vue常见的指令
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定
v-text(相当于原生js中的innerText)
解析文本
两者等价
<span v-text="msg"></span>
<span>{{msg}}</span>
v-html(相当于原生js中的innerHTML)
与v-text相比，v-html可以解析标签
<p v-html="<span>你好</span>"></p>
v-once(只渲染一次)
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<span v-text="msg"></span><br>
<span v-once>{{msg}}</span><br>
<button @click="msg = '滚滚'">改变msg</button>
点击按钮之后，第一个msg发生变化；第二个不发生变化
v-cloak(解决页面加载时闪烁问题)
注意：在脚手架中，不会有闪烁问题，因为经过webpack打包处理过了
v-cloak指令的作用防止页面加载时出现闪烁问题，保持在元素上直到关联实例结束时进行编译
插值闪烁 两个{{}}会闪一下
原因：是先加载html 再加载 js 所以在vue.js还没有加载完成的时候 两个花括号会先出来
解决：
<style>
[v-cloak]{
display:none
}
</style>
让带有插值语法的添加v-cloak属性在数据渲染完之后，v-cloak 属性会被自动去除
v-cloak一旦移除也就是没有这个属性了，属性选择器找不到该标签，就把该标签变成可见
<div v-cloak>{{message}}</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
v-show
v-show 元素始终被渲染并保存在dom中，它只是简单的切换css的display属性
<div v-show="bool">Yll</div>
当bool值为true，页面中显示，bool值为false,给div设置display:none这个属性实现隐藏效果
v-if
v-if 是惰性的，如果条件一开始为false,什么都不做，当条件为true才会创建元素，条件再为false就会销毁元素，不存在dom中
<div v-if="bool">Yll</div>
也可以使用
v-if v-else-if v-else语句联合使用
注意：使用时指令要属于同级关系才会有用
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
v-if和v-show的区别
- 相同点：给用户的感受都是元素的显示或隐藏
- 实现原理不同：
v-if会动态创建或销毁dom元素，v-show会动态添加或移除display:none样式控制元素的显示或隐藏 - 性能不同：
v-show比v-if性能好
v-for 循环
v-for:循环动态绑定数据
- 可以循环数字：item从1开始到当前数字， index从0开始
- 可以循环字符串：item是每一个字符，index索引
- 可以循环对象：item是属性值，key是属性名，第三个参是索引index
- 可以循环数组：item是每一项，index是索引
<span>---数字--</span>
<p v-for="(item,index) in 2" :key="index">{{index}} -- {{item}}</p>
<span>---字符串--</span>
<p v-for="(item,index) in '你好'" :key="index">{{index}} -- {{item}}</p>
<span>---对象--</span>
<p v-for="(item,key,index) in {name:'zbt'}" :key="index">{{index}} -{{key}}- {{item}}</p>
<span>---数组--</span>
<p v-for="(item,index) in ['a','b','c','d']" :key="index">{{index}} -- {{item}}</p>
v-pre
显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{{msg}}</span> // 显示{{msg}}
v-bind
v-bind 简写为 :
动态的绑定一个或者多个属性
# 绑定class
<div v-bind:class="flag?'active':''"></div>
v-bind可以简写成':'
<div :class="{textSize: flag1,textColor: flag2}"></div>
v-bind支持绑定一个数组
<div :class="['textSize','textColor']"></div>
# 绑定style
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
<div v-bind:style="[styleObj]"></div>
<script>
new Vue({
el: '#app',
data: {
flag:true,
flag1:true,
flag2:true,
activeColor: 'red',
fontSize: '30px',
styleObj:{
color: 'red'
}
}
})
</script>
.active { color: red; }
.textColor { color: green; }
.textSize { font-size:30px; }
v-on
v-on 简写为 @
主要用来监听dom事件，用来实现事件绑定指令
<button v-on:click='fun'></button>
v-on 可以简写成@
<button @click='fun'></button>
事件函数传参
事件触发的时候，需要传递参数信息，把方法加小括号，$event是事件对象
在绑定事件时，如果没有小括号，那么第一个参数就是事件对象
<button @click='fun'></button>
<script>
new Vue({
el: '#app',
data: {},
methods:{
fun(e) { console.log(e)} // 输出事件对象
}
})
</script>
如果有小括号，但是没有传参，那么e默认是undefined
<button @click='fun()'></button>
<script>
new Vue({
el: '#app',
data: {},
methods:{
fun(e) { console.log(e)} // 输出undefined
}
})
</script>
如果既要有事件对象，也要传参，事件对象要写成$event
<button @click='fun($event,10)'></button>
<script>
new Vue({
el: '#app',
data: {},
methods:{
fun(e,num) { console.log(e,num)}
}
})
</script>
事件修饰符
常规修饰符:
.prevent[阻止默认事件]/stop[阻止冒泡]/once[只能触发一次] = ‘xxx’
.capture: 控制事件在捕获阶段执行[与事件冒泡的方向相反，事件捕获由外到内]
.passive: 修饰onscroll事件，不会等待onscroll完成，立即触发
.self:只有点击自己的时候才会执行
按键修饰符:
@keydown.enter/space/delete/up/right/down/left…=’ xxx’
键盘码: @keydown.13 = ‘xxx’
组合按键: @keydown.al1t.67 = 'xxx’ //=>ALT+C注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
v-model
用于在表单上创建双向数据绑定
能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值v-model: 双向数据绑定；一般用于表单元素
下拉框
<div id="app">
<select v-model="selected">
<option value="A被选">A</option>
<option value="B被选">B</option>
<option value="C被选">C</option>
</select>
<span>Selected: {{ selected }}</span> // 被选中元素的value 例如：A被选
</div>
--------------------------------------------------------------------
<div id="app">
<select v-model="selected" multiple>
<option value="A被选">A</option>
<option value="B被选">B</option>
<option value="C被选">C</option>
</select>
<span>Selected: {{ selected }}</span> // 被选中元素的value的集合 例如：['A被选','B被选']
</div>
单选框
<div id="app">
<input type="radio" value="small" v-model="picked">
<label for="small">small</label>
<br>
<input type="radio" value="big" v-model="picked">
<label for="big">big</label>
<br>
<span>Picked: {{ picked }}</span> // 被选中元素的value 例如：small
</div>
复选框
组合使用时，我们可以给它定义成一个数组(例如购物车每个单选框)
<div id="">
<input type="checkbox" id="one" value="one" v-model="checkedNames">
<label for="one">选项一</label>
<input type="checkbox" id="two" value="two" v-model="checkedNames">
<label for="two">选项二</label>
<input type="checkbox" id="three" value="three" v-model="checkedNames">
<label for="three">选项三</label>
<br>
<span>Checked names: {{ checkedNames }}</span> // 被选中元素的value的集合 例如：['one','two']
</div>
-----------------------------------------------
单个时，我们可以给它定义成一个布尔值(例如购物车全选框)
<div id="app">
<input type="checkbox" id="one" value="one" v-model="checkedNames">
<label for="one">选项一</label>
<br>
<span>Checked names: {{ checkedNames }}</span> // 布尔值
</div>
<script>
export default {
data() {
return {
checkedNames:false
};
},
};
</script>
v-model修饰符
v-model也可以和.lazy、.trim和.number这些修饰符一起使用
在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步
<input v-model.lazy="msg" > // v-model.lazy只有当焦点移除才会触发事件
去除字符串首尾的空格
<input v-model.trim="msg">
将数据转化为值类型
<input v-model.number="age" type="number">
v-slot
详细请看
Vue自定义指令
详情请看