MeAlert的笔记网站

Appearance

vue 的指令与过滤器 ​

1.指令的概念 ​

​ 指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下 6 大类：

  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件渲染指令
  6. 列表渲染指令

​ 注意：指令是 vue 开发中最基础、最常用、最简单的知识点。

1.1 内容渲染指令 ​

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

​ ⚫ v-text ​ ⚫ ​ ⚫ v-html

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

1.1.1：v-text指令 ​

​ 用法实例：

html
<body>
      <div id="app">
           <p v-text="username"></p>
           <p v-text="gender">性别</p>
      </div>
      <script src="js/vue.js"></script>
      <script>
           const vm = new Vue({
                el:'#app',
                data:{
                     username:'zs',
                     gender:'女'
                }
           })
      </script>
</body>

​

​ 特点：v-text只能渲染值

​

​ 注意：v-text 指令会覆盖元素(标签)内默认的值。

2.2.2： 插值表达式 ​

​ vue 提供的 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 语法的专业名称是插值表达式（英文名为：Mustache）。

用法示例：

html
<body>
 <div id="app">
      <p>{{ username }}</p>
      <p>性别{{ gender }}</p>
 </div>
 <script src="js/vue.js"></script>
 <script>
      const vm = new Vue({
           el:'#app',
           data:{
                username:'zs',
                gender:'女'
           }
      })
 </script>
</body>

​

​ 的好处：插值表达式里面支持js语法

​ 注意：相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。

3.3.3：v-html ​

​ v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：

​

html
<body>
	 <div id="app">
          <p v-html="blue"></p>
     </div>
     <script src="js/vue.js"></script>
     <script>
          const vm = new Vue({
               el:'#app',
               data:{
                    blue:"<h2 style='color:blue'>李四</h2>"
               }
          })
     </script>
</body>

​

​ v-html的作用：可以把带有标签的字符串，渲染到真正的HTML内容！

4.4.4：v-bind(单向绑定指令): 属性绑定指令 ​

​

​ 如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：

html
<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title></title>
          <script src="js/vue.js"></script>
     </head>
     <body>
          <div id="app">
               <!-- v-bind:xxx 动态绑定值  -->
               <!-- v-bind:xxx可以简写成 :xxx 效果一样 -->
               <input type="text" v-bind:placeholder="tips">
          </div>
          <script>
               const vm = new Vue({
                    el:'#app',
                    data:{
                         tips:'请输入用户名：'
                    }
               })
          </script>
     </body>
</html>

​

​ 结果为input里面是：请输入用户名：

4.4.5：属性绑定指令的简写形式： ​

​ 由于 v-bind 指令在开发中使用频率非常高，因此，vue官方为其提供了简写形式（简写为英文的 : ）。

​ 在vue中，可以使用v-bind:指令中，为元素的属性动态绑定值：

​ 简写是英文的:

​ 再使用v-bind:属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

html
				<div :title="'box'+index">这是一个div</div> index是data属性的变量
5.5.5：事件绑定指令 ​

​ vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

​ 事件绑定指令： ​ 通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

html
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ count }}</p>
			<button v-on:click="addCount">+1</button>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					count:0
				},
				//methods:的作用就是可以定义事件处理函数
				methods:{
					addCount(){	//推荐使用这种写法
					this.count++
					},
				//这样也可以
					addCount:funtion(){
						this.count++
					}
				}
			})
		</script>
	</body>
</html>

​

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

5.5.6：事件绑定的简写形式 ​

​ 由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）

​

html
<button v-on:click="addCount">+1</button>

​ 可以简写为：

​ 这些也可以被简写为：

​ @click、@input、@keyup

5.5.7：绑定事件并传参 ​

​ 在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参，示例代码如下：

html
     <div id="app">
          <p>count的值是：{{ count }}</p>
          <!-- 如果count是偶数，则按钮背景颜色变成红色，否则取消背景颜色 -->
          <button @click="addCount(1)">+N</button>
     </div>
     <script>
          const vm = new Vue({
               el:"#app",
               data:{
                    count:0
               },
               methods:{
                    addCount(value){
                         this.count += value
                    }
               }
          })
     </script>
$event内置函数： ​

​ event是vue提供的特殊变量，用来表示原生的事件参数对象event。event 可以解决事件参数对象 event被覆盖的问题。示例用法如下：

html
<div id="app">

     <p>count的值是：{{ count }}</p>
     <!-- 如果count是偶数，则按钮背景颜色变成红色，否则取消背景颜色 -->
     <!-- addCount(1,$event) 中的$event是固定的不能更改 -->
     <button @click="addCount(1,$event)">+N</button>
     
</div>

<script>
const vm = new Vue({
     el:"#app",
     data:{
          count:0
     },
     methods:{

          addCount(value,$event){		
               // addCount(value,$event)中的$event可以被更改
               //在绑定事件对象的时候，如果不传参的时候，默认有一个e
               //如果事件传参了，事件对象e就会被覆盖掉
               
        		//vue提供了内置对象，名字是固定的，"$event"，它就是DOM的原生对象
               this.count += value
               //判断count的值是否为偶数
               if(this.count %2 === 0){
                    //偶数
                    $event.target.style.backgroundColor = "red"
               }else{
                    //奇数
                    $event.target.style.backgroundColor = ""
               }
          }
     }
})
</script>
事件修饰符: ​

​

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

​

​ 例如： ​

html
<!-- 触发click点击事件时，阻止a的默认跳转行为 -->
<a href="https://www.baidu.com" @click.prevent="onLinkClick">百度一下</a>
<script>
     const vm = new Vue({
          methods: {
                    onLinkClick(){
                         console.log(111);
                    }
          }
     })
</script>
按键修饰符 ​

​ 在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如： ​ ​ 按esc清空文本输入框的值： ​

html
<div id="app">
     <input type="text" placeholder="请输入内容" @keyup.esc="clearInput">
</div>
<script>
     const vm = new Vue({
          el:"#app",
          methods:{
               clearInput(e){	
                   //默认有一个e对象，传递参数的时候就会把e对象给覆盖了
                   e.target.value=''
               }
          }
     })
</script>

​

​ 注意： @keyup可以绑定多个按键

v-model双向绑定指令： ​

​

​ vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

html
<div id="app">
     <p>用户的名字：{{ username }}</p>
     <input type="text" v-model="username" v-bind:placeholder="text">
     <select v-model="city">
          <option value="">请选择城市</option>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
     </select>
</div>
<script>
     const vm = new Vue({
          el:'#app',
          data:{
               username:'zs',
               text:'请输入用户名',
               city:''		//显示的是option中的value值
          }
     })
</script>

​

​

注意：

​ v-model只能绑定： ​ ​ 1、input输入框： ​ ​ type="radio" 单选框 ​ ​ type="checkbox" 复选框 ​ ​ type="xxx" ​ ​ 2、textarea文本框 ​ ​ 3、select下拉列表 ​ ​ 不能绑定标签.....

v-model 指令的修饰符 ​

​

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

​

​

示例用法如下：

html
<div id="app">

 <input type="text" v-model.number='n1'>+
 <input type="text" v-model.number='n2'>={{ n1+n2 }}
 <hr>
 <input type="text" v-model.trim="username">
 <button @click="getName">获取用户名</button>
 <hr>
 <input type="text" v-model.lazy="username">

</div>
<script>
 const vm = new Vue({
      el:'#app',
      data:{
           n1:1,
           n2:2,
           username:'zhangsan'
      },
      methods:{
           getName(){
                console.log(`用户名是："${ this.username }"`);
           }
      }
 })
</script>
条件渲染指令 ​

​

​ 条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是： ​ ​ ⚫ v-if

​ ⚫ v-show

v-if和v-show: ​

​ 示例用法如下： ​

html
<html>
	<head>
          <meta charset="utf-8">
          <title></title>
          <script src="js/v2.6.10/vue.js"></script>
	</head>
​	<body>
​		<!-- 点击显示和不显示 -->
		<div id="app">
			<!-- v-if 会被 vue 动态的移除 -->
			<p v-if="flag">这是被v-if控制的语句</p>
			<!-- v-show 会被添加 display:none; 属性 -->
			<p v-show="flag">这是被v-show控制的语句</p>
			<button @click="clickFlag">点击隐藏</button>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					flag:true
				},
				methods:{
					clickFlag(){
					this.flag = false
					}
				}
			})
          </script>
​	</body>
</html>

​

​ v-if的原理是: ​ ​ 1、每次动态的创建或移除元素，实现元素的显示和隐藏

​

​ 2、如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能 更好 ​ ​ v-show的原理是: ​ ​ 1、会动态的添加或移除display:none;样式，来实现元素的显示和隐藏 ​ ​ 2、如果要频繁的切换元素的显示状态，用v-show性能会更好 ​ ​ 结论：在实际开发中，绝大多数的情况下，不用考虑什么性能问题，直接使用v-if就好了。 ​

v-if 和 v-show 的区别： ​

​

​ 1、实现原理不同：

​ ​ ⚫ v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏。 ​ ​ ⚫ v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏。 ​ ​ 2、性能消耗不同： ​ ​ v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此： ​ ​ ⚫ 如果需要非常频繁地切换，则使用 v-show 较好 ​ ​ ⚫ 如果在运行时条件很少改变，则使用 v-if 较好 ​

v-else、v-else-if ​

​ v-if 可以单独使用，或配合 v-else 指令一起使用：

​ 示例如下：

html
<div id="app">
	<p v-if="type === 'A'">优秀</p>
     <p v-else-if="type === 'B'">良</p>
     <p v-else-if="type === 'C'">中等</p>
     <p v-else>差</p>
</div>
<script>
     const vm = new Vue({
          el:'#app',
          data:{
               type:'A'
          }
     })
</script>

​ 注意：v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

列表渲染指令 ​

​

​ vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法，其中： ​ ​ ⚫ items 是待循环的数组 ​ ​ ⚫ item 是被循环的每一项

​ 示例v-for循环数据添加到表格： ​

vue
<html>
   <head>
         <meta charset="utf-8">
         <title></title>
         <link rel="stylesheet" href="css/bootstrap.css">
         <script src="js/v2.6.10/vue.js"></script>
   </head>
    <body>
        <div id="app">
             <table class="table table-bordered table-hover table-striped">
             	<thead>
                   <th>索引</th>
                   <th>ID</th>
                   <th>姓名</th>
                </thead>
                <tbody>
                      <tr v-for="item in list">
                          <td>{{ item.id }}</td>
                          <td>{{ item.name }}</td>
                       </tr>
                 </tbody>
              </table>
         </div>
         <script>
            const vm = new Vue({
               el:'#app',
               data:{
                	list:[
                       { id: 1 , name : '张三' },
                       { id: 2 , name : '李四' },
                       { id: 3 , name : '王五' },
                       { id: 4 , name : '赵六' }
                    ]
               }
           })
         </script>
    </body>
</html>
v-for 中的索引： ​

​ 语法：

​ v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items， ​ ​ 示例代码如下： ​

html
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<th>索引</th>
					<th>ID</th>
					<th>姓名</th>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list">
						<td>{{ index }}</td>
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					list:[
						{ id: 1 , name : '张三' },
						{ id: 2 , name : '李四' },
						{ id: 3 , name : '王五' },
						{ id: 4 , name : '赵六' }
					]
				}
			})
		</script>
	</body>
</html>

​

​ 注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

使用 key 维护列表的状态 ​

​ 1、当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。

​ 但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。 ​ ​ 2、为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲 ​ 染的性能。此时，需要为每项提供一个唯一的 key 属性：

html
     <ul>
          <li v-for="item in userList" :key="item.id">
               姓名{{ item.name }}
          </li>
     </ul>

​

key 的注意事项： ​

​ ① key 的值只能是字符串或数字类型 ​ ​ ② key 的值必须具有唯一性（即：key 的值不能重复） ​ ​ ③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性） ​ ​ ④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性，不是一一对应的） ​ ​ ⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

​ 使用v-for添加学生示例： ​

html
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="name">
			<button @click="addClick">添加</button>
			<ul>
				<li v-for="item in userList" :key="item.id">
					<input type="checkbox">
					姓名{{ item.name }}
				</li>
			</ul>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					userList:[
						{id:1,name:'zs'}
					],
                        //输入的用户名
					name:'',		
					nextId:2
				},
				methods:{
					addClick(){
						this.userList.push({id:this.nextId,name:this.name})	
                              //向末尾添加元素    
						// this.userList.unshift({id:this.nextId,name:this.name})	
                              //向首部添加元素
						this.name = ''
						this.nextId++
					}
				}
			})
		</script>
	</body>
</html>
过滤器： ​

​

​ 1、vue2才有，vue3已经淘汰了 ​ ​ 2、过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：

​ 插值表达式和 v-bind 属性绑定。 ​ ​ 3、过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用 ​ ​ 使用私有过滤器写首字母转大写示例如下： ​

html
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ message | capitalize }}</p>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					message:'Hello vue.js'
				},
					//过滤器函数，必须定义到filters之下
					//过滤器本质上是函数
				filters:{
					capitalize(val){//接收变量message
                              
                              const first = val.charAt(0).toUpperCase()
                              const other = val.slice(1)	//从索引1开始截取到结尾
                              //过滤器中必须要有返回值
                              return first + other
                              
					}
				}
			})
		</script>
	</body>
</html>

​

1、私有过滤器和全局过滤器： ​

​ 1.1：私有过滤器和全局过滤器在 filters 节点下定义的过滤器，称为“私有过滤器”， ​ ​ 因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器， ​ ​ 则可以按照如下的格式定义全局过滤器 ​ ​ 1.2：全局过滤器：独立于每个vm实例之外 ​ ​ 使用全局过滤器写首字母转大写示例如下： ​

html
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>message信息：{{ message |  capitalize}}</p>
		</div>
		<div id="app2">
			<p>message信息：{{ message |  capitalize}}</p>
		</div>
		<script>
                                        
                    //Vue.filter()方法接收两个参数

                    //第1个参数，是全局过滤器的"名字"

                    //第2个参数，是全局过滤器的"处理函数"

                    Vue.filter('capitalize',(val)=>{

                         const first = val.charAt(0).toUpperCase()
                         const other = val.slice(1)
                         return first+other
                    })
                    const vm = new Vue({
                         el:'#app',
                         data:{
                              message:'Hello vue.js'
                         }

                    })
                    const vm2 = new Vue({
                         el:'#app2',
                         data:{
                              message:'hello world'
                         }
                    })
                    
			</script>
	</body>
</html>

​ 注意：全局过滤器必须定义在script里面，new Vue({})外面

2、过滤器的注意点： ​

​ 2.1：要定义到filters节点下，本质是一个函数 ​ ​ 2.2、在过滤器函数中，一定要有return值 ​ ​ 2.3、在过滤器的形参中，就可以获取到“管道符”前面那个待处理的那个值

​ 2.4、如果全局过滤器和私有过滤器名字一致，此时按照就近原则，调用的是"私有过滤器" ​

3、连续调用多个过滤器 ​

​ ​ 过滤器可以串联地进行调用，例如：

​ 1、把message的值，交给filterA进行处理

​ 2、把filterA处理的结果，再交给filterB进行处理

​ 3、最终把filterB处理的结果，作为最终的值渲染到页面上

​ 例如：

html
                 <p>{{ message | filterA | filterB }}</p>

​

​ 连续调用多个过滤器，第一个首字母转大写和控制文本的最大长度，示例如下： ​

html
<html>
	<head>
		<meta charset="utf-8">
          <title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ message | capitalize | maxLength }}</p>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					message:'Hello vue.js'
				},
					//过滤器函数，必须定义到filters之下
					//过滤器本质上是函数
				filters:{
                         
					//第一个首字母转大写
					capitalize(val){//接收变量message
						const first = val.charAt(0).toUpperCase()
						const other = val.slice(1)	//从索引1开始截取到结尾
						//过滤器中必须要有返回值
						return first + other
					},
                         
					//控制文本最大长度
					maxLength(str){
						if(str.length<=10){
							return str
						}
						return str.slice(0,12)+"  ....."
					}
				}
			})
               
			//过滤器的注意点：
			//1、要定义到filters节点下，本质是一个函数
			//2、在过滤器函数中，一定要有return值
			//3、在过滤器的形参中，就可以获取到“管道符”前面那个待处理的那个值
		</script>
	</body>
</html>

​

4、过滤器传参 ​

​ 过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下： ​ ​

html
<!-- arg1 和 arg2 是传递给 filterA的参数 -->
<p>{{ message | filterA(arg1,arg2) }}</p>
<script>
     //过滤器处理函数的形参列表中：
          //第一个参数：永远都是“管道符”前面待处理的值
          //第二个参数开始，才是调用过滤器传递过来的 arg1 和 arg2 参数
     Vue.filter('filterA',(message,arg1,arg2)=>{
               //过滤器的代码逻辑
     })
</script>

​

​ 过滤器传参代码如下： ​

html
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ message | capitalize | maxLength(12) }}</p>
		</div>
		<script>
			const vm = new Vue({
                    
				el:'#app',
				data:{
					message:'Hello vue.js'
				},
					//过滤器函数，必须定义到filters之下
					//过滤器本质上是函数
                    
				filters:{
                         
					//第一个首字母转大写
					capitalize(val){//接收变量message
						const first = val.charAt(0).toUpperCase()
                              
						const other = val.slice(1)	//从索引1开始截取到结尾
                              
						//过滤器中必须要有返回值
						return first + other
					},
                         
					//控制文本最大长度
					maxLength(str,len){
						if(str.length<=10){
							return str
						}
					return str.slice(0,len)+"  ....."
					}
				}
			})
				//过滤器的注意点：
						//1、要定义到filters节点下，本质是一个函数
						//2、在过滤器函数中，一定要有return值
						//3、在过滤器的形参中，就可以获取到“管道符”前面那个待处理的那个值
		</script>
	</body>
</html>

​

5、过滤器的兼容性: ​

​ 过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。 ​ ​ 在企业级项目开发中： ​ ​ ⚫ 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能 ​ ​ ⚫ 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能 ​ ​ 具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明： ​ ​ https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

Copyright © Albert MeAlert 2024