Vue如何使用与vue常见问题
vue指令Vue组件的组成:一个组件就是一个XXX.vue文件<template></template>// 模板只能有一个根标签(节点)<template><div>所有的内容都写在这里面</div></template><script></script> //业务逻辑export default{d
vue指令
Vue组件的组成:
一个组件就是一个XXX.vue文件
<template></template>// 模板
只能有一个根标签(节点)
<template>
<div>所有的内容都写在这里面</div>
</template>
<script></script> //业务逻辑
export default{
data(){return{}},
methods:{},
......
}
css样式
App.vue里面的css样式是共用的
通过使用 实现组件之间的css隔离
在script标签里导入css文件 import ‘css文件路径’
vue组件的使用:
例:
编写组件
Test.vue
导入组件
import Test from '../components/Test.vue'
import Test from '@/components/Test'
//两种方式,第一种就是普通的跳出当前目录然后寻找,
//第二种通过“@” @代表从src文件夹开始
注册:
components{Test}
使用
<Test></Test>
条件渲染:
v-if
v-else
v-else-if
v-show
//v-if和v-show的区别?
//v-if为false触发时,元素目标将会被卸载
//v-show触发时,元素目标会被添加一个display:none的属性
文本显示:
{{ }}
v-text //只可渲染文本
v-html //可渲染html标签
事件:
v-on:事件名 或 @事件名
$event 事件的参数
-
@click 单击事件
-
@change 值发生变动失焦后触发
-
@blur 离开input触发
-
@input input发送变化立即触发
-
…
属性:
v-bind:属性名称 或者 :属性名称
- :class
- :style
- :disabled
- …(很多)
表单(数据绑定):
//v-model
<input type="text" value="" v-model="flag">
//数据绑定
修饰符号:
v-model.number // 转换为数字
v-model.lazy //延迟更新
循环:
<div v-for="(item,index) in 要循环的目标" :key="index"></div>
事件修饰符:
- stop //阻止事件冒泡
- once //只执行第一次
- prevent //阻止默认事件
例子:
@click.once.stop= " ";
按键修饰符:
enter
esc
up(↑)
down(↓)
left(←)
right(→)
//例如:
@keyup.enter=" " //(enter键被按下触发)
:class
<div :class = " "> </div> //属性绑定(这里以div标签为例)
<div :class="{key1:'val1',key2:'val2'....}"></div>
//对象模式--val值为真,key对应class会绑定上,
<div :class=" [ name1,name2]" //数组方式 要在data里定义一下样式
:style
<div :style="{key1:'val1',key2:'val2'}"></div>
//驼峰css格式书写例如 在style里面 font- size在这里要写成fontSize
<div :style = "styles"></div>
new Vue({
data:{
styles:{fontSize:"30px",backgroundColor:"#fff00"}
}
})
directives 自定义指令
<div id="app">
<div class="box">
//调用自定义指令v-img 并指定list数组里的三张图片
<div id="" class="box" v-img="list[0]"></div>
<div id="" class="box" v-img="list[1]"></div>
<div id="" class="box" v-img="list[2]"></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
list:['./images/1.jpg','./images/2.jpg','./images/3.jpg']
//新建一个list数组 里面放入图片
},
directives:{
img:{ //自定义指令的名称
inserted(el,binding){
let color = Math.floor(Math.random()*1000000);
el.style.backgroundColor = "#"+color;
el.style.backgroundImage = "url("+binding.value+")";
}
}
}
})
</script>
配置路由:
例如在src/views里新建了一个Base.vue (一般都是开头大写)
要在router文件夹里的index.js里配置
import Basefrom '../views/Base.vue'
const routes =[
{
path: '/base',
name: 'Base',
component: Base,
}
]
子路由的配置:
import Home from '../views/Home.vue'
import Register from '../views/Register.vue'
//在需要配置子路由的路由里添加children数组 : children:[]
//children里面就是子路由,可多个
const routes = [
{
path: '/',
name: 'Home',
component: Home,
children:[
{
path:'/register ',
name:'Register ',
component:Register
},
]
},
] //register.vue就是Home的子路由
跳转:
1:
<router-link to="/login">登录</router-link>//跳转到登录页
2:
<button @click="GoLogin()">登录</button>
export default{
methods:{
GoLogin(){
this.$router.push('/infolist')
}
}
} //两种方式都可实现跳转
生命周期:
beforeCreate //创建前
created //创建完成(可以获取到组件的实例 this 通常启用定时器 发起网络请求)
beforeMount //挂载前
mounted //挂载完成 (组件已经渲染完毕 可以操作dom 获取ref)
beforeUpdate // 更新前
updated //更新完成
beforeDestroy // 销毁前 (销毁前移除定时器,销毁dom的事件)
destroyed //销毁后
见图:
发起请求方式:
fetch("http://www.520mg.com/mi/list.php?page=1")
.then(res=>res.json()) //把获取的数据转换为json
.then(res=>{
console.log(res);
//请求成功后的回调函数
//this.joks = this.joks.concat(res.result)
})
.catch(err=>{
console.log("请求失败后的回调函数")
})
网络请求的排错:
ctrl+shift+i
打开调试面板
network
网络请求
刷新
查看
请求的数据是否正确:
Querying string parameters
请求的参数
响应的数据是否符合:
Status Code:200 OK
响应的状态码
preview /response
响应的内容
js获取的属性和结构是否和响应的内容的结构一致
常见的错误:
**浏览器同源策略限制:**当前地址与服务器请求的地址不同源
404
错误 地址写错误
401
请求的权限不足
参数请求的错误
JS代码写错
组件间的数据传递:
父传子:
父通过属性方式传递<Step :num="3">
子通过props接收
props{num:{type:Number,default:1}}
子传父:
子通过发送事件 this.$emit("numchange",this.count)
父通过监听事件 <Step @numchange ="$event">
$event
代表事件传递的参数
全局传递:
空vue事件↓
//bus.js
import Vue from 'vue';
export default new Vue();
//Btn.vue
import Bus from 'xxx/bus.js'
Bus.$emit("colorChange",'red')
//Color.vue
import Bus from 'xxx/bus.js';
export default{
created(){
Bus.$on("colorChange",$event=>{
this.color = $event
})
}
}
Vue参数对象:
el
指定vue的模板data
指定vue的初始数据methods
指定方法区域computed
从现有数据计算出新的数据watch
监听数据的变化filters
过滤管道(数据的格式显示)directives
自定义指令
js中的模块导入导出
导出命令
export {xxx,xxx,xxx}
export default xxx;
导入
import Any from "xxxx"
import * as Obj from "xxxx"
import {xxx,xxx,xx} from ".xxx"
地址
可以省略 .js
后缀
如果是vue 可以省略 .vue
后缀
在vue项目中 @
代表src
目录
如果是相对路径 ./
如果没有相对路径,就从node_modules
文件夹查找
文件默认index.js
是可以省略 只写文件夹
例:
import Base from './components/index.js'
//简写后: import Base from './components'
规则
export
可以导出多次
export default
只能是一次
export
和 export default
可以共存
一个js
文件可以导入js
,也可以导出js
动态导入
import(xxx.js).then(res=>{console.log(res)})
webpack魔法注释
/*webpackChunkName: " jquery" */ 打包后的名称
/*webpackPrefetch: true*/ 文档空闲时提前加载
vue路由
核心概念
<router-link/> //切换地址(浏览器的地址)
<router-view/> //用来存放路由页面对应的组件
/src/router/index.js //路由配置 连接router-view 组件页面
//用一个Category分类页举例
{
path:'/category', //分类页面
name:'Category', //路由名称
component:Category //对应组件
},
//path 路由组件对应的地址
//component 地址对应的组件
//当浏览器地址栏的地址匹配到当前路由的path,
//vue就会让component组件去填充替换router-view内容
路由的传递
params 路由的传递
//配置:
{path:/produce/id}
//传递:
<router-link to="/produce/abc"></router-link>
//获取:
$route.params.id
query查询
//传递:
<route-link to="/produce?type=类型&age=20"></route-link>
//获取:
{{$route.query.type}} {{$route.query.age}}
$route
当前路由信息path fullpage
路由地址query
查询信息params
路由参数name
名称$router
路由实例history.current ===$route
跳转方法:
go
跳转back()
后退foward()
前进push()
推入历史记录replace()
替换
子路由
配置:
{
path:'/detail',
name:'Detail',
component:Detail,
children:[
{path:"arg",component:Arg},
{path:"com",component:Com}
]
},
使用:
<h1>详情</h1>
<router-link to="/detail/arg">参数</router-link> |
<router-link to="/detail/com">评论</router-link>
<router-view></router-view>
更多推荐
所有评论(0)