指令
- 指令是带有 v-前缀 的特殊属性，绑定在 dom 属性上
- Vue 中不允许直接操作 dom
- 指令用来操作 dom
- mustache语法 --------- 属性写法
- 属性值是直接写数据的，不需要使用 {{ }}
1、v-text
- 更新元素的 textContent。
- 如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
- 示例
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> <script> var vm = new Vue({ el: '#app', data: { msg: ' hello Vue.js ' } }) </script>
2、v-html
-
更新元素的 innerHTML 。
-
可以解析标签型数据。
-
示例
<div id="app"> <p v-html = "h"></p> </div> <script> var vm = new Vue({ el: '#app', data: { h: '<h3> hello Vue.js </h3>' } }) </script>
条件渲染:
3、v-show
-
根据表达式的 true 和 false 值，切换元素的 display CSS 属性；
-
不管初始条件如何，元素始终渲染。
-
v-show 无法用于 < template > 元素，也不能和 v-else 配合使用。
-
示例
<div v-show="flag">v-show</div> <script> var vm = new Vue({ el: '#app', data: { flag: true } }) </script>
4、v-if
- 根据表达式的值的真假条件渲染元素；
- 操作 dom元素（组件）的创建或是销毁；
- 示例
<div id="app"> <h2 v-if='ifFlag'>v-if 单路分支 </h2> </div> <script> var vm = new Vue({ el: '#app', data: { ifFlag: true } }) </script>
5、v-else
- 不需要表达式；
- v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。
- 示例
<div id="app"> <h2 v-if='ifFlag'>v-if 单路分支 </h2> <p v-else >双路分支</p> </div> <script> var vm = new Vue({ el: '#app', data: { ifFlag: false } }) </script>
6、v-else-if
- v-if 之后的“else-if 块”。可以多次链式地调用;
- v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。
- 示例
<div id="app"> <h2 v-if=" type === 'A' ">v-if 多路分支 </h2> <p v-if=" type === 'A' "> A </p> <p v-else-if=" type === 'B'"> B </p> <p v-else-if=" type === 'C'"> C </p> <p v-else > D </p> </div> <script> var vm = new Vue({ data: { type: 'A' } }) </script>
列表渲染:
7、v-for
- 将一个数组、对象或 json 数据渲染为列表项；
- v-for 指令需要限定格式为
v-for = " item in items "的特殊语法；
- 数组
v-for = " (item,index) in arr "item 是 arr 中每一个元素 - 对象
v-for = " (item,key,index) in obj "item 是 obj 的属性值 - json 类型数据
- 嵌套类型数据
-
示例
<div id="app"> <div id="app"> <h3>数组</h3> <ul> <!-- item1 为数组 arr 中的每个元素, index 为索引 --> <li v-for=" (item1,index) in arr "> {{ item1 }} ，{{ index }} </li> </ul> <h3>对象</h3> <ul> <!-- item2 为对象 obj 中的每个属性值 ,key 为属性名，index 为索引--> <li v-for=" （item2,key,index） in obj "> {{ item2 }} </li> </ul> <h3>json</h3> <ul> <li v-for=" item3 in json "> {{ item3.task }} </li> </ul> <h3>嵌套</h3> <ul> <li v-for=" item4 in lists "> <p>{{ item4.id }}</p> <ul> <li v-for="todo in item4.todos"> {{ todo }} </li> </ul> </li> </ul> </div> </div> <script> new Vue({ el: '#app', data: { arr: [ 1 , 2 , 3 , 4 ]， obj: { id: 1, name: "Bianca", age: 20 }, json: [ { id:1, task:"敲代码" }, { id:2, task:"睡觉" } ], lists: [ { id: 1, todos: { id: 1, name: '连城' } }, { id: 2, todos: { id: 2, name: '文武' } } ] } }) </script>结果：
问题：
1. v-if 与 v-show 的区别
相同点：
- v-if 与v-show 都可以动态控制 dom 元素显示隐藏
不同点：
- v-show 操作的是 dom 元素的 display 属性，dom元素还在
- v-if 操作的是 dom 元素（组件）的创建或销毁
- v-show 只能写一个单路形式
- v-if 可以有多种使用形式
- 单路分支
- 多路分支
- 双路分支
注意：
- 当一个元素默认在 css 中加了display：none 属性，这时通过 if-show 修改为 true 是无法让元素显示的。原因是显示隐藏切换，只是会修改 element.style 为 display:" " 或者 display:none, 并不会覆盖掉或修改已存在的 css属性。
2. v-if 与 v-show 使用场景
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销;
- 因此，如果需要频繁地切换则使用 v-show 较好；
- 如果在运行时条件很少改变，则使用 v-if 较好。
key
-
给每一个循环列表添加一个唯一标识；
-
使用 v-bind 指令来绑定 key；
-
只有 json 数据才能用 id；数组和对象只能用 index ；
-
如果有 id ，那么我们就使用 id，如果没有，我们才会选择 index；
<div id="app"> <ul> <li v-for=" (item,index) in lists" v-bind:key="item.id"> </li> </ul> </div> <script> new Vue({ el: '#app', data: { lists: [ { id: 1, name: '连城' }, { id: 2, name: '文武' } ] } }) </script>
8、v-bind
- 单项数据绑定，将一个数据绑定在一个 dom 的属性上
- 动态地绑定一个或多个特性，或一个组件 prop 到表达式。
- 缩写 ：
9、Vue 动态绑定类名 v-bind:class
- 将数据与元素的 class 列表绑定在一起；
- v-bind:class 指令也可以和普通 class 属性共存，不会覆盖原生类名；
- v-bind:class 接受三目运算；
绑定方式
-
对象形式
-v-bind:class= " { 属性名: boolean } "
- 属性名 这个 class 的存在与否，取决于 boolean 的 truthy 值。 -
数组形式 【 推荐 】
-v-bind:class= " [ 数据 ] " -
示例
- 对象形式：
<style> .size{ width: 300px; height: 300px; } .bg{ background-color: red; } .active{ border-radius:10px; } </style> <div id="app"> <!-- 对象形式 --> <!-- data、style 里的属性名均为 size ，类名才会加上 --> <!-- bg1 是自定义属性，data 和 style 中没有定义，属性值为 undefined ，相当于 false，类名不会加上去 --> <p class="active" :class=" { size , bg1 } " ></p> <!-- bg ，size 是 style 里的自定义属性，必须和 style 里的属性名一致，属性值为 true ，类名才会加上--> <p :class=" { size:flag , bg:true } "></p> <!-- bg 是自定义属性，[bg] 为一个变量，[ ]里的属性名 必须和 data 里的一致，类名才会加上 --> <p :class=" { [size]:true , [bg]:true } "></p> </div> <script> new Vue({ el: "#app", data: { size: "size", bg: "bg"， flag: true } }) </script>- 数组形式：
<style> .size{ width: 300px; height: 300px; } .bg{ background-color: red; } .bg2{ background-color: green; } .active{ border-radius:10px; } </style> <div id="app"> <!-- 数组形式--> <!-- 1、字符串 string 格式，和 style 里的属性名一致 --> <p :class=" ['size' , 'bg'] "></p> <!-- 2、数据格式 ,和 data 数据里的属性名一致--> <p :class=" [ s , bg ] "></p> <!-- 3、三元表达式 【常用】--> <p :class=" [ flag ? bg : 'bg2', 'size' ] "></p> </div> <script> new Vue({ el: "#app", data: { s: "size", bg: "bg"， flag: true } }) </script>
10、事件绑定 v-on:
-
v-on:eventType=" handleName "
-
简写 v-on: -----> @
-
示例
<div id="app">
<button v-on:click="handle">
v-on:
</button>
<button @click="handle">
简写@
</button>
<button @click="param(10)">
传参
</button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
handle(){
alert(2)
},
param(num){
alert( num )
}
}
})
</script>
事件对象 e :
<div id="app">
<button @click="event">
事件对象 e
</button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
event(){
console.log( e )
}
}
})
</script>
结果：
问题：
- 如果事件处理程序中有三个参数，第三个参数才是事件对象 e ,如何实现?
<div id="app">
<button @click="helloHandler( 10,20,e)" > 点击 </button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
event(a,b,e){
console.log( a )
console.log( b )
console.log( e )
}
}
})
</script>
分析：
- 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个 undefined
解决：
- 在函数执行时，传入一个实际参数 $event 来代表事件对象
<div id="app">
<button @click="helloHandler( 10,20,$event)" > 点击 </button>
</div>
<script>
new Vue=({
el:"#app",
method:{ //存放事件处理程序
event(a,b,e){
console.log( a )
console.log( b )
console.log( e )
}
}
})
</script>
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
