2. Vue指令和过滤器

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;

});