VUE指令
为开发者提供的模板语法,辅助开发者渲染页面结构
一、按照不同用途分为6大类
①内容渲染指令:渲染DOM文本的内容 常用指令
v-text 用于操作纯文本
<p v-text="message">123</p> 会覆盖原本标签中的默认值 //123
{{ }} 插值表达式:只能用在元素的内容节点中,不能动态的为元素绑定值
<p>{{message}}</p>
v-html 将包含HTML标签的字符串渲染为页面HTML元素
<body>
<div id="app">
<p v-text="desc"></p> //打印 <i style="color:red">abc</i>
<p>{{desc}}</p> //打印<i style="color:red">abc</i>
<p v-html="desc"></p> //打印 abc
</div>
<script>
var app = new Vue({
el: '#app',
data: {
desc: '<i style="color:red">abc</i>'
}
})
</script>
</body>
②属性绑定指令:为元素的属性动态绑定属性值 v-bind 简写形式 使用 : 符号来代替 v-bind
//V-bind
<input type="text" v-bind:placeholder="inputValue">
// 冒号符 :
<input type="text" :placeholder="inputValue">
●javaScript表达式运算的渲染支持 :
<body>
<div id="app">
<p> {{ number+1 }}</p>
<p>{{ok ? 'True':'False'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list'+id">xxx</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello!',
number: 1,
ok: true,
id: 3
}
})
</script>
③事件绑定指令: v-on用来监听DOM元素绑定事件 简写形式 @ 符号代替v-on
原生onclick oninput onkeyup原生事件,替换为vue的事件绑定形式后为:v-on:click v-on:input v-on:keyup 通过v-on绑定的事件处理函数,需要在methods节点中声明使用
<body>
<div id="app">
<p>message的值是:{{ message }}</p>
<button v-on:click="message+=2">+2</button>
<button @click="addCount">+1</button>
<button @click="addCountEvent(num,$event)">+num</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 0,
num: 2
},
methods: {
addCount(e) {
const evt = e.target.style.backgroundColor
e.target.style.backgroundColor = evt === 'green' ? '' : 'Green',
this.message += 1
},
addCountEvent(num, e) { //传参后接收不到原生event事件对象,需要在传参时$event
this.message += num
const evt = e.target.style.backgroundColor
e.target.style.backgroundColor = evt === 'red' ? '' : 'red'
}
},
})
</script>
</body>
事件对象event 在原生的DOM事件绑定中,可以在事件处理函数的形参处,接收事件对象event。同理,在v-on指令(简写为@)所绑定的事件处理函数中,同样可以接收到事件对象event,如果进行了传参,需要在参数中添加$event才可以拿到事件对象,否则拿不到。
事件修饰符 :在事件处理函数中调用preventDefault()或 stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念, 来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下:
1).prevent 阻止默认行为(例如:阻止a连接的跳转 表单提交)
2).stop 阻止事件冒泡
3).capture 以捕获模式触发当前的事件处理函数
4).once 绑定事件只触发1次
5).self 只在event.target是当前元素自身时触发事件函数
//阻止链接进行跳转
<a href="https://www.baidu.com" @click.prevent="onLinkClick">去百度下</a>
//阻止事件冒泡
<div class="outer" @click="onQuterClick">
外层的box
<div class="inner" @click.stop="oninnerClick">内部的box</div>
</div>
④双向绑定指令:v-model 快速获取表单的值 只能配合表单元素使用
<P>{{userName}}</P>
<input type="text" v-model="userName">
v-model提供3个修饰符
⑤ 条件渲染指令:按需控制元素的显示与隐藏 v-if 与 v-show 实现效果一样
<p v-if="flag">我被v-if控制</p> //flag=ture 显示 false隐藏
<p v-show="flag">我被v-if控制</p> //flag=ture 显示 false隐藏
实现原理不同:v-if 指令会动态地创建或移除DOM元素,从而控制元素在页面上的显示与隐藏;
v-show 指令会动态为元素添加或移除style="display: none;"样式,从而控制元素的显示与隐藏;
性能消耗不同:v-if有更高的切换开销,而v-show有更高的初始渲染开销。
●如果需要非常频繁地切换,则使用v-show较好
●如果在运行时条件很少改变,则使用v-if 较好
v-if 与 v-else v-else-if 充当 v-if的else-if块,可以连续使用
<div class="box" v-if="true"></div> //条件为真 展示box盒子
<div class="box2" v-else></div> //v-if为false时 显示box2盒子
⑥列表渲染指令:v-for 基于一个数组来循坏渲染相似的UI结构
v-for 需要使用 item in items
item带循环的数组
item是当前循环项
v-for 指令支持可选的第二个参数 使用 (item,index) in items index当前循坏项的索引
<div v-for="(item,index) in arr" :key="index">
<h1>{{ item} }</h1>
<h2>{{ index }}</h2>
</div>
使用key维护列表的状态 当列表的数据变化时,默认情况下,vue会尽可能的复用已存在的DOM元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。为了给vue一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能。此时,需要为每项提供一个唯一的key属性
key的注意事项 key 的值只能是字符串或数字类型 key 的值必须具有唯一性(即: key的值不能重复) 建议把数据项id属性的值作为key 的值(因为id属性的值具有唯一性) 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性) 建议使用v-for指令时一定要指定key 的值(既提升性能、又防止列表状态紊乱)
二、vue filters节点中使用过滤器
全局过滤器Vue.filter('过滤器名称', function)
私有过滤器filters节点
(vue 3.x 版本剔除过滤器) 进而使用计算属性或方法