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="https://www.cnblogs.com/LuBingBing/archive/2022/11/23/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> 欢迎学习 vuejs</h4> } });

属性绑定指令

注意：插值表达式只能用在元素内容节点中    




    




    




  ，不能用在元素的属性节点

动态绑定属性值 v-bind

在属性前加属性指令 v-bind: 为元素动态绑定值
















，vue 规定 v-bind 可以简写成: ,示例

<input type="text" v-bind:placeholder="tips"> <img :src="https://www.cnblogs.com/LuBingBing/archive/2022/11/23/photo">

使用 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种修饰符如下：

事件修饰符 说明 .prevent 阻止默认行为（例如：阻止 a 链接跳转     

     

     

、阻止表单提交等） .stop 阻止事件冒泡 .capture 以捕获模式触发当前的事件处理函数 .once 绑定事件只触发一次 .self 只有在 event.target 是当前元素自身时触发事件处理函数

示例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 链接"); } } });