vue基本指令

what

jq是js框架
用起来方便。兼容性问题 。 代码简化
vue框架
用起来方便 是真方便

vue 将减少开发者在dom操作的精力(都不用管dom操作了，通过指令将元素和数据关联到一起)
将精力转移到数据操作
数据变页面变

实例

new Vue({
el:'#app',//挂载
data:{},//存放数据
methods:{},//方法
computed:{},//计算属性
filter:{},//过滤器
})

指令

内置指令 v- 开头
自定义指令
条件渲染 v-if v-else v-else-if
列表渲染 v-for
事件处理 v-on：eventname click dblclick …
组件
过滤器
计算属性
监听
axios

router
vuex
vue-cli
vue全家桶 vue-cli（脚手架工具） vuex（状态管理） axios（数据请求）router（路由）

vue内置指令

v-if 条件渲染

<div id='app'>
<p v-if='show'>我在这 if</p>
<p v-show='show'> 我在这  show</p>
</div>

let vm=new Vue({
el:'#app',
data:{
show:false
}
})

// v-if 条件渲染 根据参数的真假 来控制元素是否渲染 操作的是元素节点的增删  不经常切换
// v-show 根据参数的真假 来控制元素是否显示 控制display：none|block 使用于频繁切换显示隐藏

v-for 用于遍历数组和对象

<div id='app'>
<ul>
<li v-for='(item,index) in list'>{{item}}--{{index}}</li>
</ul>
</div>

let vm=new Vue({
el:'#app',
data:{
list:['爱情','动漫','恐怖','科幻']
}
})
// v-for 列表渲染  绑定一个数据（数组或者对象）到元素上
// 会根据数据循环创建元素
// item 数组里的每一项  index 下标

<div id='app'>
<ul>
<li v-for="(val,key,index) in obj">{{key}}:{{val}}---{{index}}</li>
</ul>
</div>

let vm=new Vue({
el:'#app',
data:{
obj:{name:'wangyi',age:16,sex:1,pass:456}
}
})
//  遍历一个对象  val  值  key：键  index 下标
//  关键字 in of 都可以

v-on 绑定事件 v-on:等同于@

<div id='app'>
<button v-on:click="test">点我</button>
{{show}}
<div v-show='show'>显示隐藏</div>
</div>

let vm=new Vue({
el:'#app',
data:{
show:false
},
methods:{
// test:function(){
// 	alert(111)
// }
// test:()=>{
// 	alert(111)
// }
test(){
this.show=!this.show
}
}
})

v-bind 绑定属性 v-bind:等同于 :

div{
width: 200px;
height: 100px;
}
.red{
background: red;
}
.green{
background: lightgreen;
}

<div id='app'>
<div v-bind:class='state?"red":"green"'>

</div>
<button @click="toggle">toggle</button>
</div>

let vm=new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6,7],
state:false
},
methods:{
toggle(){
this.state=!this.state
}
}
})
// v-bind 绑定一个属性  这个属性的值就可以用data里的变量来表示

事件修饰符

阻止冒泡

<div id="content">
<div @click.self="c1">
这里是yy
<div @click="c2">
这里bb
<div @click.stop="c3">
这是son
</div>
</div>
</div>
</div>

let vm=new Vue({
el:'#content',
data:{

},
methods:{
c1(){
console.log('点到爷爷')
},
c2(){
console.log('点到爸爸')
},
c3(){
console.log('点到son')
}
}
})

阻止浏览器的默认行为

<div id="content">
<form v-on:submit.prevent="onSubmit">
<input type="text">
<input type="text">
<button>add</button>
</form>
</div>

let vm=new Vue({
el:'#content',
data:{

},
methods:{
onSubmit(){
console.log(111)
}
}
})

键盘事件快捷键

<div id="content">
<!-- <input type="text" v-on:keyup.37='enter'> -->
<!-- <input type="text" v-on:keyup.enter='enter'> -->
<!-- <input type="text" v-on:keyup.left='enter'> -->
<input type="text" v-on:keyup.haha='enter'>
</div>

Vue.config.keyCodes.enter = 13
let vm=new Vue({
el:'#content',
data:{

},
methods:{
enter(){
console.log(111)
}
}
})

vue实例的配置项

• el
• data
• methods
• computed
• filters
• components

组件

组件的创建与注册

<div id='app'>
<hehe></hehe>
</div>

// 第一种方法 先创建 再注册
// 组件就是vue的一个拓展实例
let component=Vue.extend({
template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
})
//注册组件
Vue.component('hehe',component)

//  第二种方法
Vue.component("hehe",Vue.extend({
template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
}))
// 第三种方法 最简版 创建+注册
Vue.component('hehe',{
template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
})
new Vue({
el:'#app',
data:{
test:11
}
})
// 创建组件
// 注册组件  全局组件和局部组件
// 将组件作为标签使用

全局组件

<div id='app'>
//使用
<hehe></hehe>
</div>
<hr>
<div id='app1'>
//使用
<hehe></hehe>
</div>

//全局组件缩写 创建+注册
Vue.component('hehe',{
template:'<h1>假装我是一个非常复杂的banner图</h1>'// 模板  这个组件的html元素
})
new Vue({
el:'#app',
data:{
test:11
}

})
new Vue({
el:'#app1',
data:{
test:11
}
})

组件内的配置项

• data

<div id='app'>
<hehe></hehe>
</div>

// 组件就是vue的一个拓展实例
let component=Vue.extend({
template:'<h1>你好{{name}},我是李雷</h1>',// 模板  这个组件的html元素
data(){
return {
name:'韩梅梅'
}
}
})
//注册全局组件
Vue.component('hehe',component);
new Vue({
el:'#app',
data:{
test:11
}

})
// 组件内部的数据  可以绑定到组件内部的模板
// 组件的data数据格式不是对象而是一个函数，在函数的内部返回对象 让每一个组件都有自己单独的作用域

• methods
• filters
• computed
• watch
• components 注册组件名时含有大写字母 使用时用-连接 大写改成小写
• template 必须有根节点

使用vue

1.创建数据信息 数据源 数据
2.将元素和数据进行关联 通过指令
3.根据需求修改数据， 数据变页面