vue 指令与过滤器

内容渲染指令

内容渲染指令是用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有3种。

v-text

示例

<div id="app">     <!-- 把 username 对应的值，渲染到第一个 p 标签中 -->     <p v-text="username"></p>     <!-- 把 gender 对应的值，渲染到第二个 p 标签中 -->     <!-- 注意：第二个 p 标签中，默认文本会被gender值覆盖 -->     <p v-text="gender">性别</p> </div> <!-- 导入 vue 的库文件 -->     <script src="./lib/vue.js v2.7.13.js"></script> 

//创建vue 的实例对象 const vm = new Vue({     //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器     el: '#app',     // data 对象就是要渲染到页面上的数据     data: {         username: 'zs',         gender: '男'     } }); 

插值表达式 {{}}双大括号

在实际开发中应用较多，不会覆盖原有渲染
示例

<div id="app">     <p>姓名：{{username}}</p> </div> 

const vm = new Vue({     //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器     el: '#app',     // data 对象就是要渲染到页面上的数据     data: {         username: 'zs',         gender: '男',     } }); 

v-html

可以把带标签的的字符串，渲染成真正的html 内容
示例

<div id="app">     <div v-html="info"></div> </div> 

const vm = new Vue({             //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器             el: '#app',             // data 对象就是要渲染到页面上的数据             data: {                 info: '<h4 style="color: red; font-weight: bold;"> 欢迎学习 vuejs</h4>'             }         }); 

属性绑定指令

注意：插值表达式只能用在元素内容节点中，不能用在元素的属性节点

动态绑定属性值 v-bind

在属性前加属性指令 v-bind: 为元素动态绑定值，vue 规定 v-bind 可以简写成: ,示例

<input type="text" v-bind:placeholder="tips"> <img :src="photo" style="width: 150px;"> 

使用 javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 javascript 表达式的运算，例如

{{ number + 1 }}; {{ ok ? 'YES' : 'NO'}}; {{ message.split('').reverse().join('')}};  <div v-bind:id="'list-' + id"></div>  

注意在简写 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串外应包裹单引号，例如

<div :title="'box' + index">!!!!!</div> 

事件绑定指令

v-on 绑定事件

v-on 绑定事件指令，辅助程序员为DOM元素绑定监听事件，格式如下

<p>count的值是: {{count}}</p>         <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->         <button v-on:click="addCount">+1</button> 

  const vm = new Vue({             //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器             el: '#app',             // data 对象就是要渲染到页面上的数据             data:{                 count: 0,             },             // 定义事件的处理函数             methods:{                 add: function () {                     // console.log(vm);                     // vm.count += 1;  		    // this === vm                      this.count += 1;                 } 		// 也可简写成                 add () {                     // console.log(vm);                     this.count += 1;                 }             }         });  

v-on: 也可以简写为 @

<button @click="sub">-1</button> 

注意：原生 DOM 对象有 onclick、oninput、onkeydown 等原生事件，替换成 vue 的事件绑定形式后，分别为： v-on:click 、v-on:input、v-on:keydown

事件对象

vue 提供了内置固定的变量 $event ，它就是原生 DOM 的事件对象 e

<!-- 如果 count 为偶数，则按钮背景变为蓝色，否则，取消背景 --> <!-- vue 提供了内置固定的变量 $event ，它就是原生 DOM 的事件对象 e-->         <button @click="add(1, $event)">+n</button> 

const vm = new Vue({             //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器             el: '#app',             // data 对象就是要渲染到页面上的数据             data:{                 count: 0,             },             // 定义事件的处理函数             methods:{                 add (n, e) {                     this.count += 1;                     // 判断 this.count 的值是否为偶数                     if (this.count%2 === 0) {                         //偶数                         e.target.style.backgroundColor = 'blue';                         console.log(e);                     } else {                         // 奇数                         e.target.style.backgroundColor = '';                     }                 }                            }                    }); 

事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPROpagation() 是非常常见的需求。因此， vue 提供了事件修饰的概念，辅助程序员更方便的**对事件的触发进行控制。常用5种修饰符如下：

示例1：

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a> 

const vm = new Vue({             //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器             el: '#app',             // data 对象就是要渲染到页面上的数据             data:{},             // 定义事件的处理函数             methods:{                 show () { 		    // e.preventDefault();                     console.log("点击了 a 链接");                 }             }          });