目录
Vue指令:是Vue为开发者提供的模版语法,用于辅助开发者渲染页面的基本结构
一、内容渲染指令
内容渲染指令是用来渲染DOM元素的文本内容
1. v-text
把username对应的值,渲染到第一个p标签中
<p v-text="username"></p>
把gender对应的值,渲染到第二个p标签中
<p v-text="gender">性别</p>
缺点:会覆盖元素内部原有的内容,实际开发中使用的不多
2. {{ }} 插值表达式
<p>姓名:{{username}}</p>
<p>性别:{{gender}}</p>
在实际开发中用的最多,只是内容的占位符,不会覆盖原有 的内容
注意:插值表达式只能用在内容节点中,不能用在元素的属性节点
使用JavaScript表达式:在vue提供的模板渲染语法中,除了支持简单的数据绑定外,还支持JavaScript表达式的运算,例如:
<div>1+2的结果是{{1+2}}</div>
<div>{{tips}} 的反转结果是:{{tips.split('').reverse().join('')}}</div>
<div>{{ok ? 'yes' : 'no'}}</div>
3. v-html
<div v-html="info"></div>
可以把带有标签的字符串,渲染成真正的HTML内容
二、属性绑定指令
1. v-bind
为元素的属性动态绑定属性值
<input type="text" v-bind:placeholder="tips">
v-bind: 给元素的属性动态添加属性值,实际开发中可以简写成 :
<!-- <img v-bind:src="photo" alt=""> -->
<img :src="photo" alt="">
简写:英文的 :
注意:在使用v-bind期间,如果绑定的内容需要进行动态拼接,则字符串的外面应该用单引号包括,例如:
<div :title="'box' + index">这是一个div</div>
三、事件绑定指令
1、v-on
vue提供了v-on 事件绑定指令,用来辅助程序员 为 DOM 元素绑定事件监听
v-on: 可以被简写为 @ 符号
绑定事件处理函数的时候,可以使用()传递参数
<button v-on:click="add(1)">点击+1</button>
<button v-on:click="sub(1)">点击-1</button>
methods 的作用是 定义事件的处理函数
methods: {
// 普通写法
// add: function() {
// console.log(12);
// },
// es6的写法
add(n) {
console.log(vm === this); // this完全可以替代vm,this指的就是new出来的vue的实例对象
如果在方法中要修改data 中的数据,可以通过this访问到
// vm.count += 1;
this.count += n;
},
sub(n) {
// vm.count -= 1;
this.count -= n;
}
}
注意:原生DOM对象有onclick、oninput、onkeyup等原生事件,替换为vue的事件绑定形式后,分别为:
v-on:click v-on:input v-on:keyup
2、事件对象 $event
事件函数中,如果传递了参数,就无法使用事件对象 e!解决办法是vue提供了内置变量,名字叫做$event,它就是原生DOM的事件对象
<button @click='add(1,$event)'>+1</button>
add(n, e) {
this.count += n;
console.log(e);
// 点击按钮,偶数的时候,按钮的背景颜色修改为红色,奇数不变
if (this.count % 2 === 0) {
e.target.style.backgroundColor = "red";
} else {
e.target.style.backgroundColor = "";
}
}
3、事件修饰符
.prevent vue提供的阻止事件默认行为的方法,以下为演示:
<a href="http://www.baidu.com" @click.prevent='show'>跳转到百度首页</a>
原生js中使用: e.preventDefault();
.stop 阻止冒泡
<div style="height: 60px;background-color: pink;" @click="divHandler">
<button @click.stop="btnHandler">按钮</button>
</div>
4、按键修饰符
按键修饰符 .esc .enter 在监听键盘事件时,经常需要判断详细的按键,可以通过键盘相关的事件添加按键修饰符
<input type="text" @keyup.esc='clearAll' @keyup.enter='commitAjax'>
methods: {
clearAll(e) {
console.log('按下了esc这个键');
e.target.value = '';
},
commitAjax() {
console.log('按下了enter键,提交Ajax请求');
}
}
四、双向绑定指定 v-model
1、可以和以下表单元素实现双向数据绑定
1)、input 输入框
type="radio"
type="checkbox"
type="xxxx"
2)、textarea
3)、select
<input type="text" v-model="username">
2、v-model指令的修饰符
为了方便用户对输入的内容进行处理,vue为v-model指令提供了3个修饰符,分别是:
v-model.number
自动将用户输入的值转为数值类型
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span>
v-model.trim
自动过滤用户输入的首尾空白字符
<input type="text" v-model.trim="msg">
v-model.lazy
在"change"时而非 input 时更新,简单理解就是在修改页面数据时候,源数据不会实时更新,当失去焦点后,再更新
<input type="text" v-model.lazy="username">
五、条件渲染指令
条件渲染指令:用来控制DOM元素的显示和隐藏,有如下两个
默认值如果是true,则显示;如果是false,则隐藏
1、v-if 原理: 每次动态创建或移除元素,实现元素的显示或隐藏
如果默认状态是false,也即是默认不需要被展示,而且后期这个元素也不需要被展示出来,此时v-if的性能更好
<p v-if="flag">我是被v-if控制的</p>
2、v-show 原理:动态对元素添加或移除 display:none 样式,来实现元素的显示或隐藏
如果要频繁的切换元素的显示状态,用v-show性能更好
<p v-show="flag">我是被v-show控制的</p>
3、v-else 指令必须配合v-if指令一起使用,否则将不会被识别
六、列表渲染指令
1、v-for 基于一个数组来循环渲染一个列表结构。v-for需要使用item in items 形式的特殊语法
-
items 是 待循环的数组
-
item 是被循环的每一项
另外 v-for 还支持第二个可选择的参数,即当前项的索引,以下为语法格式:
v-for = "(item, index) in items"
注意:v-for指令中的item和index索引都是形参,可以根据需要进行重命名
<tr v-for="(item,index) in list" :key="item.id">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
2、key的注意事项:建议使用v-for指令时,一定要指定key的值(既能提升性能,又能防止列表状态紊乱)
-
key的值只能是字符串或数字类型
-
key的值必须具有唯一性(即key的值不能重复)
-
建议把数据项id 属性的值,作为key的值(id具有唯一性)
-
使用index 的值当作key 的值没有任何意义(因为index不具有唯一性)
七、过滤器 filter
仅支持vue2,vue3不支持
filters 用于文本的格式化。过滤器用在两个地方:
1、差值表达式
<p>{{ message | capi }}</p>
声明过滤器,过滤器函数必须被定义到 filters 里面
// 过滤器本质上是函数
filters: {
// 注意: 过滤器函数的形参中的val,永远是 管道符 | 前面的那个值
capi(val) {
console.log(val);
const first = val.substr(0, 1).toUpperCase();
console.log(first);
const other = val.slice(1)
console.log(other);
// 强调,过滤器中,一定要有一个返回值
return first + other;
}
}
2、v-bind属性绑定
注意:
1、过滤器被添加在js表达式的尾部,用管道符"|" 进行调用
2、过滤器函数必须定义在 filters 里面
3、过滤器函数的形参中的val,永远是 管道符 | 前面的那个值
4、过滤器中一定要有一个返回值
5、定义到vue实例里面的都是私有过滤器
6、全局过滤器,Vue.filter() 方法接收2个参数
第一个参数,是全局过滤器的名字
第二个参数,是全局过滤器的处理函数
Vue.filter('capi', function(val) {
const first = val.substr(0, 1).toUpperCase();
const other = val.slice(1)
// 强调,过滤器中,一定要有一个返回值
return first + other;
});