Vue的指令
什么是指令？
指令就是Vue为开发者提供的一种模板语法，用于辅助软件开发人员渲染页面的基本结构。
根据用途不同的六大指令
1.内容渲染指令
内容渲染指令用来辅助开发者渲染dom元素的文本内容。有以下三种模式：
v-text指令
<!--把 username对应的值，渲染到第一个p标签当中-->
<p v-text="username"></p>
<!--把 gender对应的值，渲染到第一个p标签当中-->
<p v-text="gender">性别</p>
缺点：会覆盖标签原本的内容
{{}} 插值表达式
插值表达式用于解决v-text的内容覆盖问题。
<body>
<!--希望vue能够控制下面的div，帮我们在数据填充到div内部-->
<div id="app">
<!--把 username对应的值，渲染到第一个p标签当中-->
<p>姓名：{{ username }}</p>
<!--把 gender对应的值，渲染到第一个p标签当中-->
<p>性别:{{ sex }}</p>
</div>
<!--1.导入vue的库文件，在window全局就有了vue这个构造函数-->
<script src="./lib/vue-2.6.12.js"></script>
<!--2.创建vue实例对象-->
<script>
//创建Vue实例对象
const vm = new Vue({
//el属性是固定的写法，表示当前vm实例
el: "#app",
//data对象就是渲染到页面上的数据
data: {
username: "zhangsan",
gender: '男',
info:"<h1>123345</h1>"
}
})
</script>
</body>
v-html指令
v-text和插值表达式只能渲染文本内容，不能渲染带有HTML标签的字符串渲染为页面的HTML元素。
需要用到v-html
<div v-html="info"></div>
<!--2.创建vue实例对象-->
<script>
//创建Vue实例对象
const vm = new Vue({
//el属性是固定的写法，表示当前vm实例
el: "#app",
//data对象就是渲染到页面上的数据
data: {
username: "zhangsan",
gender: '男',
info:"<h1>123345</h1>"
}
})
</script>
2.属性绑定指令
属性绑定指令：v-bind
注意：
- 插值表达式只能用在元素的内容节点，不能用在元素的属性节点。
- 如果需要动态绑定属性值，则需要借助v-bind指令.
在vue中可以使用v-bind指令，为元素的属性动态绑定值
v-bind指令简写是英文的冒号 :
<body>
<div id="app">
<img v-bind:src = "photo" alt="" style="width=150px">
<img :src = "photo" alt="" style="width=150px">
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
photo:"https://cn.vuejs.org/images/logo.svg"
}
})
</script>
</body>
在属性中可以绑定JavaScript语句
<body>
<div id="app">
<div>
1 + 2 的结果是：{{ 1 + 2 }}
</div>
<div>
{{ tips }}反转的结果是：
{{ tip.split('').reverse().join('')}}
</div>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
photo:"https://cn.vuejs.org/images/logo.svg"
}
})
</script>
</body>
3.事件绑定指令
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下：
<body>
<div id="app">
<p>
count的值是：{{ count }}
</p>
<button v-on:click="add">
+1
</button>
<button v-on:click="sub">
-1
</button>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
count:0,
},
method:{
add:function(){
// vm.count +=1
this.count +=1
},
sub:function(){
// vm.count -=1
this.count -=1
}
}
})
</script>
</body>
通过this可以修改vm实例中的data值
在绑定事件处理函数的时候可以使用()传递参数
<body>
<div id="app">
<p>
count的值是：{{ count }}
</p>
<button v-on:click="add(1)">
+1
</button>
<button v-on:click="sub(2)">
-1
</button>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
count:0,
},
method:{
add(m){
// vm.count +=1
this.count +=m
},
sub(n){
// vm.count -=1
this.count -=n
}
}
})
</script>
</body>
$event事件绑定:
<body>
<div id="app">
<p>
count的值是：{{ count }}
</p>
<!--如果count是偶数，则按钮背景变成红色;否则，取消背景颜色-->
<!--vue提供了内置变量，名字叫做$event,它是原生的DOM是事件对象e-->
<button v-on:click="add(1,$event)">
+N
</button>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
count:0,
},
method:{
add(n,e){
// vm.count +=1
this.count +=n;
//判断this.count的值是否为偶数
if(this.count %2 ==== 0){
//偶数
e.target.style.background = 'red'
}else{
//奇数
e.target.style.background = ''
}
},
}
})
</script>
</body>
事件修饰符：
<body>
<div id="app">
<!--@click.prevent绑定事件但是阻止默认行为-->
<a href="http://www.badiu.com"
@click.prevent="show">
跳转到百度首页
</a>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
count:0,
},
method:{
show(){
"点击了 a 链接"
}
}
})
</script>
</body>
按键修饰符：
我们经常需要判断详细的按键，可以为键盘相关的事件添加按键修饰符。
4.双向绑定指令
vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作dom的情况下，拿到表单数据，主要在表单中使用.
-
input输入框
-
type="radio"
-
type="checkbox"
-
type="xxxx"
<body> <div id="app"> <p> 用户的名字是：{{ username }} </p> <input type="text" v-model="username"> <input type="text" value="abc"> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el: "#app", data: { }, method:{ username:"zhangsan", } }) </script> </body>
-
-
textare
-
select
v-model修饰符：
.number修饰符可以把用户填写的内容自动转换为数字类型
<body>
<div id="app">
<input type="text" v-model.number="n1">
+ <input type="text" v-model.number="n2">
= <span>{{ n1+n2 }}</span>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
username:"zhangsan",
n1:1,
n2:2
},
})
</script>
</body>
.trim 对输入内容去除两边的空格，在传入到data里面
5.条件渲染指令
条件渲染指令就是辅助开发者控制DOM的显示和隐藏。条件指令有如下两个，分别是：
-
v-if
-
v-show
<body> <div id="app"> <p v-if="flag"> 这是被v-if控制的元素 </p> <p v-show="flag"> 这是被v-show控制的元素 </p> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el: "#app", data: { //如果flag为true，则显示被控制的元素，如果为false则隐藏被控制的元素 flag:true }, }) </script> </body>v-if和v-show功能一样，但是隐藏方式不一样(面试)
- v-show的原理是为元素动态添加和移除display:none样式，来实现元素的显示和隐藏
- 如果频繁的切换元素的显示状态，用v-show性能更好
- v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏。
- 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能会更好
- v-show的原理是为元素动态添加和移除display:none样式，来实现元素的显示和隐藏
-
v-else
![image]()
6.列表渲染指令
vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for指令需要使用item in items形式的特殊语法，其中：
- items是带循环的数组
- item是被循环的每一项
<body>
<div id="app">
<table>
<thead class="table ">
<th>索引</th>
<th>I D</th>
<th>姓名</th>
</thead>
<tbody v-for="(index,item) in list" :title="item.name">
<tr>{{ index }} </tr>
<tr>{{ item.id }}</tr>
<tr>{{ item.name }}</tr>
</tbody>
</table>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
list:[
{ id:1, name:"张三" },
{ id:2, name:"李四" },
{ id:3, name:"王五" }
]
},
})
</script>
</body>
v-for中key值的注意点
官方建议：只要用到了v-for指令，那么一定要绑定一个:key属性，而且尽量把id作为:key值。
浙公网安备 33010602011771号