Vue - 指令
内置指令
常用的
v-bind
:单向绑定解析表达式,可简写 :xxx
v-model
:双向数据绑定
v-for
:遍历数据 / 对象 / 字符串
v-on
:绑定事件监听,可简写为@
v-if
:条件渲染(动态控制节点是否存在)
v-else
:条件渲染(动态控制节点是否存在)
v-show
:条件渲染(动态控制节点是否展示)
v-text指令
1. 作用:向其所在的节点中渲染文本内容。
2. 与插值语法的区别:v-text
会替换掉节点中的内容,{{xx}}
则不会。
v-html指令
1. 作用:向指定节点中渲染包含html结构的内容。
2. 与插值语法的区别
v-html
会替换掉节点中所有的内容,{{xx}}
则不会。
v-html
可以识别html结构。
3. 严重注意:v-html有安全性问题!!!
在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
一定要在可信的内容上使用v-html
,永不要在用户提交的内容上!
v-cloak指令(没有值)
1. 本质是一个特殊属性,Vue示例创建完毕并接管容器后,会删掉v-cloak属性。
2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<style>
[v-cloak]{
display: none;
}
</style>
<h2 v-cloak></h2>
v-once指令(没有值)
1. v-once
所在节点在初次动态渲染后,就是为静态内容。
2. 以后数据的改变不会引起v-once
所在结构的更新,可以用于优化性能。
v-pre指令(没有值)
1. 跳过其所在节点的编译过程。
2. 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
自定义指令
示例:
<!--
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>当前的n值是: <span v-text="n"></span> </h2>
<h2>放大10倍后的n值是: <span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind>
</div>
<script>
new Vue({
el: "#root",
data: {
n: 1
},
directives: {
// big函数何时被调用?1.指令与元素成功绑定时。2.指定所在的模板会被重新解析时。
big(element, binding) {
element.innerText = binding.value * 10;
},
fbind: {
// 指令与元素成功绑定时(以上来)
bind(element, binding) {
element.value = binding.value;
},
// 指令所在元素**入页面时
inserted(element, binding) {
element.focus();
},
// 指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
element.focus();
}
}
}
})
</script>
扩展Vue中的事件修饰符
1. prevent
:阻止默认事件(常用)
2. stop
:阻止事件冒泡(常用)
3. once
:事件只触发一次(常用)
4. capture
:使用事件的捕获模式
5. self
:只有event.target是当前操作的元素时才触发事件
6. passive
:事件的默认行为立即执行,无需等待事件回调执行完毕
<button @click.stop=""></button>
-
目录导航
公告
昵称:默永
园龄:2年333天
注册时间:2021-11-15
当前在第:1页
总共:1条
搜索
精品文章 48小时阅读排行