指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构
所用到的数据定义在实例的 data 中，事件定义在实例的 methods 中
只能渲染纯文本内容，会覆盖 标签内部原本的内容
<p v-text="gender">性别</p>
复制代码
只能渲染纯文本内容，不会覆盖 标签内部原本的内容
<p>性别：{{ gender }}</p>
复制代码
能将带标签的字符串渲染成html内容，会覆盖 标签内部原本的内容
<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->
复制代码
为元素的属性 动态 绑定属性值
<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->
复制代码
注意：插值表达式 和 v-bind 还支持JAVAscript表达式的运算
{{ 1 + 2 }} //一元运算
{{ ok ? 'YES' : 'NO'}} //三元运算
{{ message.split('').reverse().join('') }} //字符串的反转
复制代码
<div :id="'list-' + id"></div> <!--字符串和变量的拼接-->
复制代码
为元素绑定事件
<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
methods:{
add(){
this.count ++; //相当于vm.count ++;
}
}
})
</script>
复制代码
<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
methods:{
add(n,event){
//修改
this.count +=n;
//判断
if(this.count % 2 === 0)
event.target.style.color = 'red';
else
event.target.style.color = '';
}
}
})
</script>
复制代码
只要是事件，就能使用的修饰符，以下列举5个常用的
|
事件修饰符 |
说明 |
|
.prevent |
阻止默认行为（例：阻止a链接的跳转、阻止表单的提交） |
|
.stop |
阻止事件冒泡 |
|
.capture |
以捕获模式触发当前的事件处理函数 |
|
.once |
绑定的事件只触发一次 |
|
.self |
只有在event.target是当前元素自身时触发事件处理函数 |
<!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>
复制代码
只能在触发键盘事件时，使用的修饰符，以下列举2个常用的
|
按键修饰符 |
说明 |
|
.esc |
按键盘esc键时 |
|
.enter |
按键盘enter键时 |
<!--举个例子-->
<!--keyup是事件名称 .esc是按键修饰符 clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">
复制代码
快速获取表单数据（只应用于表单元素，如：input、textarea、select）
<input type="text" v-model="username">
复制代码
<select v-model="city">
<option value="">请选择城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
复制代码
只能给v-model使用的修饰符
|
专属修饰符 |
说明 |
|
.number |
自动将用户输入的值转为数值类型 |
|
.trim |
自动过滤用户输入的首尾空白字符 |
|
.lazy |
在失去焦点时才自动更新数据（一般情况下都是实时更新的） |
<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>
复制代码
控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换
<p v-show="flag">这是被 v-show 控制的元素</p>
复制代码
控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少
<p v-if="flag">这是被 v-if 控制的元素</p>
复制代码
配合 v-if 指令一起使用，否则将不会被识别
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
复制代码
基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"
<table>
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
</thead>
<tbody>
<!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
<!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
<!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
<!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
<tr v-for="(item,index) in list">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
------------------------------------------------------------
<script>
//创建vue的实例对象
const vm = new Vue({
data: {
list: [
{ id: 1, name:'张三', gender:'男' },
{ id: 2, name:'李四', gender:'女' },
{ id: 3, name:'王五', gender:'男' }
]
}
})
</script>
复制代码
注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性
<tr v-for="(item,index) in list" :key="item.id">
作者：用户2031777005900
链接：
https://juejin.cn/post/7105273755168931877
