Vue指令
Vue指令
1.mustache语法糖对数据类型的支持（js语法支持）
基本数据类型 unmber， string， boolean ，null ，underfined
引用数据类型 object（arr ，function）
<p>number: {{num}}</p>
<p>string: {{str}}</p>
<p>boolean: {{bool}}</p>
<p>null: {{nul?'1':'2'}}</p>
<p>undefined: {{und?'1':'2'}}</p>
<p>object: {{obj}}</p>
<p>array: {{arr}}</p>
<p>function: {{fn}}</p> //调用函数的话输出函数的返回值
特别注意 console.log 和 alert 是不被mustache支持的
指令绑定的形式就是为了操作dom
2.v-html 和 v-text的区别
1.v-html 可以解析标签 v-text不可以
<p v-html='msg'></p> //'hello Vue.js'
<p v-text='msg'></p> //'hello Vue.js'
<p v-html='h'></p> //'hello Vue.js'
<p v-text='h'></p> //'<h3>hello Vue.js<h3>'
<script>
var vm2 = new Vue({
el: '#app2',
data: {
msg: 'hello Vue.js',
h: '<h3>hello Vue.js<h3>',
flag: true,
}
})
<script>
3.条件渲染的指令
v-show
<p v-show="true">v-show指令</p> //v-show操作的是dom元素的display属性
v-if
//单路分支
<p v-if='true'>v-if - 单路分支</p> //可以控制一个dom的存在与否（创建和销毁）
v-else
<p v-if="true">v-if - 双路分支 成立</p>
<p v-else="false">v-if - 双路分支 不成立</p>
v-else-if
<p v-if="type === 'A' ">A</p>
<p v-else-if=" type === 'B' ">B</p>
<p v-else=" type === 'C' ">C</p>
4.循环指令
v-for
可以给每一个循环的元素绑定key值（唯一的标识，可以是index可以是id 看给我数据中有无）最好用id
：bind 数据绑定 可以简写成 ’：‘表示
//数组 <li v-for=" (a,index) in arr " v-bind:key:"index"></li>
//对象 <li v-for=" (item,key,index) in obj v-bind:key:"index""></li>
//json <li v-for=" (item,index) in json v-bind:key:"item.id""></li>
//嵌套类型数据
<li v-for=" (item,index) in lists v-bind:key:"index"">
<p>id:{{item.id}}</p>
<ul>
<li v-for=" item in item.todos ">
<p>todos中的数据 -- :{{item}}</p>
</li>
</ul>
</li>
案例：
<div id="app">
<h3>数组</h3>
<ul>
<li v-for=" (a,index) in arr ">
<p>item: {{a}} -- index:{{index}} </p>
</li>
</ul>
<hr>
<h3>对象</h3>
<ul>
<li v-for=" (item,key,index) in obj ">
<p>item:{{item}} -- key:{{key}} -- index:{{index}}</p>
</li>
</ul>
<hr>
<h3>json</h3>
<ul>
<li v-for=" (item,index) in json ">
<p>id:{{item.id}}</p>
<p>task:{{item.task}}</p>
<p>{{index}}</p>
</li>
</ul>
<hr>
<h3>嵌套类型数据</h3>
<ul>
<li v-for=" (item,index) in lists ">
<p>id:{{item.id}}</p>
<ul>
<li v-for=" item in item.todos ">
<p>todos中的数据 -- :{{item}}</p>
</li>
</ul>
</li>
</ul>
</div>
<script>
//v-for
//1.数组
//2.对象
//3.json类型数据
//4.嵌套类型数据
new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4],
obj: {
id: 1,
name: '俊哥',
sex: 'man',
age: 18
},
json: [{
id: 1,
task: '敲代码'
}, {
id: 2,
task: "敲代码2"
}],
lists: [{
id: 1,
todos: {
id: 1,
name: 'zxh'
}
}, {
id: 2,
todos: {
id: 2,
name: 'dsb'
}
}]
}
})
</script>
5.指令类名的添加
v-bind：class
对象添加类名的形式：
<p :class="{size,bg_color}"></p> //对象添加类名 当data中属性和属性值名字相同时 可以直接写上添加
<p :class="{size:true,bg_color:true}"></p> //当属性值是true是 会加上class = “size bg_color”
<p :class="{ [s]:true,bg_color:true}"></p> //当属性名加上[]时候 相当于data中名字相同的值
<p :class="{ [s]:5>3?true:false,bg_color:true}"></p> //可以写表达式进行判断
数组添加类名的形式：
<p :class="['size','bg_color']"></p> //普通类名的添加形式（和data无关，就是和style样式关联）
<p :class="[s,bg_color]"></p> //数据中类名的添加形式 （就是和data相关联）
注意：绑定的类名不会覆盖原先的类名
6.指令添加样式
v:bind：style
style - 对象形式
<p :style="{width:'100px',height:'100px',background:'red'}"></p>
<p :style="{width:size.width,height:size.height,background:size.backgroud}"></p>
style - 数组形式
<p :style="[{width:'100px',height:'100px',background:'blue'}]"></p>
<p :style="[{width:'100px',background:'blue'},{height:'100px'}]"></p>
<p :style="[size]"></p>
<script>
new Vue({
el: "#app",
data: {
size: {
width: '100px',
height: '100px',
background: 'red'
}
}
})
</script>
7.指令添加事件
v-on使用 可以简写@
<button v-on:click="hellohandler">点击</button>
<button @click="hellohandler">点击</button>
new Vue({
el: '#app',
methods: { //这里存放事件处理函数
hellohandler() {
alert("hello")
},
usee(e) {
console.log(e)
},
usee2(a, b, e) {
console.log(a);
console.log(b);
console.log(e);
}
}
})
8.需要注意的点
1.事件对象（e） 处理
当e是第一个参数是没什么问题，但当e不是第一个参数是要用$event代替
2.我们通过length = 0 来清空一个数组 vue监测不到这个变动
解决方法: 使用splice
3.我们直接修改一个数组下的一个数据时，发现下标不能检测这个变动
解决方法：使用Vue.set / this.$set
arrChange() {
// this.arr[1] = "junge" //数组检测不到
//this.$set(this.arr, '1', '俊哥');
Vue.set(this.arr, '1', '俊哥')
}
