Javascript
vue-指令&修饰符
本文主要是介绍vue-指令&修饰符，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
基本指令
v-html
作用： 相当于js中的innerHTML，插入元素，可以输入html标签 使用：<div v-html="message"></div> 总结：有时后台会返回一段带html标签的数据而不是字符串，这是v-html就有用武之地了。
v-text
作用： 相当于js中的innerText，插入文本，等同于插值表达式/mustache语法 -- {{}}
使用：<div v-text="message"></div>
注意：解析不了html标签。
总结：不常用
v-pre
作用：跳过使用此语法的元素极其子元素，直接显示插值表达式内容，加快编译速度，一般静态内容不需要解析的可以使用。
使用：<div v-pre>{{message}}</div>
注意：没有使用指令且未使用插值表达式使用，不然会显示{{要解析的数据名}}
总结：特定场景使用，提高性能。
v-cloak
作用：页面加载时的数据会出现插值表达式在页面上闪烁，使用v-cloak指令则在表达式内的值未渲染完成则隐藏。
使用：<div v-cloak>{{message}}</div>
总结：出现令用户无法的理解代码，会影响用户体验感，优化用户使用体验
v-once
作用：对于只需要渲染一次的数据，v-once使其节点以及子节点以下所有节点都不进行第二次渲染。 使用：这里使用定时器测试下，使其作用看起来更直观
<!-- html -->
<div v-once>{{message}}</div>
<!-- mounted -->
mounted() {
setTimeout(() => { //使用了v-once则不会受到第二次数据变动的影响
this.message = 'change value'
log(this.message)
},5000)
}
注意：只能渲染一次，不要忽略了子节点内的数据，如果子节点需要动态接收数据状态则不适合用 总结：一次性数据进行过滤，提高性能
判断指令
v-if
作用：对元素的显隐的判断操作 使用：<div v-if="is_show">message</div> 注意：它与另外一个判断指令v-show的区别就在于，不符合判断的被绑定的这个节点就会连同被整个删除。 总结：对于节点的显隐判断操作还是非常频繁的，不过v-if对节点显隐操作的消耗更大，不适合频繁对元素进行的显隐操作
V-else-if & v-else
作用：就是正常的if判断，一级判断未进入则进入二级判断，否则进入else 使用：
<div v-if="is_show" @click="please_hidden">{{message}}</div>
<div v-else-if="!is_show">else-if偷偷跑出来的</div>
<div v-else>else偷偷跑出来的</div>
注意：与v-if成对出现 总结：使用时如果注意到时频繁操作，除非需要涉及到一些安全性问题，v-show会有。
v-show
作用：根据判断对绑定元素进行显隐操作 使用：<div v-show="is_show" @click="please_hidden">is_show</div> 注意：使用v-show的元素即使隐藏或显示了，也可以通过浏览器将其显示/隐藏 总结：适合频繁的显隐操作，以及不能让用户操作显隐的操作可以使用。
循环指令
v-for
作用：循环数据并在页面中渲染 使用
<div v-for="(item,index) in user" :key="item.id">
{{item.id}} + {{item.name}}
</div>
注意：:key是一定要添加的，否则在eslint或vuter中报错，在对于复杂的数据， 且有唯一id标识，比如对象数组的数据使用其id作为key值能提高性能，一般使用数组下标多为为了盖住警告，对性能无提优。 还有v-for和v-if一起使用时，v-for的优先级要比v-if高，所以循环的节点都会拥有v-if指令 总结：使用很频繁，可以循环，String,Array,Object等...
双向绑定指令
v-model
作用：常用于对form表单内元素的数据绑定 使用：
<div v-for="(item,index) in user" :key="item.id">
{{item.id}} + {{item.name}}
</div>
<label for="user_id">用户id</label>
<input type="text" v-model="userId" id="user_id" value="" />
<label for="user_name">用户姓名</label>
<input type="text" v-model="userName" id="user_name" value="" /> </br>
<button @click="add">添加数据</button>
<div>双向绑定的数据<span>用户id：{{userId}}</span><span>用户名:{{userName}}</span></div>
<!-- methods方法 -->
add() {
this.user.push({ id: this.userId, name: this.userName })
log(this.user)
}
总结：对于用户form表单上的数据绑定很有用
属性绑定指令
v-bind
作用：将元素的属性使用动态的方式绑定，例如image的src,或普通元素的clss/style ，等等... 使用：
<!-- html -->
<div v-bind:style="active_style">
<!-- 可以绑定style，直接使用对象绑定。可以动态改变其中的某个样式状态 -->
style
</div>
<div :class="is_show ? 'active_class' : '' ">
<!-- 绑定的同时也可以使用判断表达式作为是否绑定的条件，这里使用三元运算符 -->
class
</div>
<div :class="{'obj_sty':is_show,'obj_sty2': !is_show}">
对象语法绑定
</div>
<div :class="[arr,{'arr_sty2':is_show}]">
<!-- 直接选择data中的变量，如果值存在于样式中则添加样式，一般配合有需要动态判定样式的元素 -->
数组语法绑定
</div>
<!-- css -->
.active_class{
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
border: 1px solid #CCCCCC;
color: gold;
font-size: 12px;
}
.obj_sty{
font-size: 30px;
color: red;
}
.obj_sty2{
border: 10px solid skyblue;
}
.arr_sty{
font-size: 25px;
color: #5500ff;
}
.arr_sty2{
font-family: "楷体"
}
<!-- 实例data中 -->
总结：v-bind的使用十分频繁，只要需要动态修改的元素属性都会用到，其语法糖是<:>
修饰符
v-model修饰符（.lazy、.number、.trim）
.lazy
作用：动态绑定input框输入时，v-model是在用户每一次输入/input事件后则同步数据，添加.lazy后则转变为每次onchange事件之后触发,如失焦，keyup.Enter操作之后同步数据 使用：
<input type="text" v-model.lazy="userId" id="user_id" value="" />
注意：添加了.lazy修饰符就不能监听每一次keyup操作了，除了keyup.Enter以及使其输入框失焦的键盘操作 总结：除了特殊要求外可以减轻监听的频率
.number
作用： 使用：
<!-- html -->
<input type="text" v-model.lazy.number="userId" id="user_id" value="" />
<!-- 实例中 methods -->
log("得到的值",this.userId) //通过打印我们看到原本String类型的值被转换成了Number类型
log("查看输入的类型",typeof this.userId)
结果：
注意：当输入了数值型和字符串一起的值，输入字符串要先将字符串删除才会同步数据，且最终打印出来的只有数值，因为.number修饰符使用了parseInt方法去解析，字符串会被过滤出去
总结：由于此修饰符的限制性，这里建议使用正则表达式和Number来限制
<!-- html -->
//绑定一个input事件，注意不能使用.lazy修饰符，不然可以输入字符串，最后得到NaN
<input type="text" v-model="userId" @input="u_input" id="user_id" value="" />
<!-- input事件中 -->
u_input(e){
this.userId = this.userId.replace(/[^\d]/g,'')
}
<!-- 添加方法中 -->
this.userId = Number(this.userId)
.trim
作用：去除掉用户输入的左右两边的空格 使用：<input type="text" v-model.lazy.number.trim="userName" id="user_name" value="" /> 注意：使用了.lazy是失焦事件触发，否则是keydown触发 总结：去除掉两边的空格
键盘事件（keydown/keypress/keyup）
1. keydown: 当用户按下任意键时触发，按住不放，重复触发。 2. keypress: 当用户按下且松开按键时触发，按住不放，重复触发 3. keyup: 当用户释放按键时触发
键盘事件修饰符
1. .enter //回车键 2. .tab //切换键 3. .delete //删除 4. .esc //返回/离开键 5. .space //空格键 6. .up // 方向上键 7. .down //方向下键 8. .left //方向左键 9. .right //方向右键 使用：
<!-- html -->
<input type="text" placeholder="请使用按键/keydown" @keydown.a="key_p">
<input type="text" placeholder="请使用按键/keypress" @keypress="key_p">
<input type="text" placeholder="请使用按键/keyup" v-model="key_event" @keyup="key_ups">
<!-- methods -->
key_p(){
log('键盘事件')
}
<!-- 使用键盘按键码触发，可以判断用户使用的按键操作 -->
key_ups(e){
if(e.keyCode == 13){
log('回车操作,获取用户输入数据:',this.key_event)
}
}
<!-- 或者自定义键盘事件 -->
//全局注册个指定键码
Vue.config.keyCodes.a = 38
附上本篇所有代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.show_hidden-enter-active,
.show_hidden-leave-active {
transition: all 1s ease
}
.show_hidden-enter,
.show_hidden-leave-active {
opacity: 0
}
.active_class{
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
border: 1px solid #CCCCCC;
color: gold;
font-size: 12px;
}
.obj_sty{
font-size: 30px;
color: red;
}
.obj_sty2{
border: 10px solid skyblue;
}
.arr_sty{
font-size: 25px;
color: #5500ff;
}
.arr_sty2{
font-family: "楷体"
}
</style>
</head>
<body>
<div id="app">
<!-- 基本指令 -->
<!-- <div v-html="message"></div> -->
<!-- <div v-text="message"></div> -->
<!-- <div v-pre>{{message}}</div> -->
<!-- <div v-cloak>{{message}}</div> -->
<!-- <div v-once>{{message}}</div> -->
<!-- 判断指令 -->
<!-- <transition name="show_hidden">
<div v-if="is_show" @click="please_hidden">{{message}}</div>
<div v-else-if="!is_show">else-if偷偷跑出来的</div>
<div v-else>else偷偷跑出来的</div>
</transition> -->
<!-- <transition name="show_hidden">
<div v-show="is_show" @click="please_hidden">is_show</div>
</transition> -->
<div v-for="(item,index) in user" :key="item.id">
{{item.id}} + {{item.name}}
</div>
<label for="user_id">用户id</label>
<input type="text" v-model="userId" @input="u_input" id="user_id" value="" />
<label for="user_name">用户姓名</label>
<input type="text" v-model.number.trim="userName" id="user_name" value="" /> </br>
<button @click="add">添加数据</button>
<div>双向绑定的数据<span>用户id：{{userId}}</span><span>用户名:{{userName}}</span></div>
<div v-bind:style="active_style">
<!-- 可以绑定style，直接使用对象绑定。可以动态改变其中的某个样式状态 -->
style
</div>
<div :class="is_show ? 'active_class' : '' ">
<!-- 绑定的同时也可以使用判断表达式作为是否绑定的条件，这里使用三元运算符 -->
class
</div>
<div :class="{'obj_sty':is_show,'obj_sty2': !is_show}">
对象语法绑定
</div>
<div :class="[arr,{'arr_sty2':is_show}]">
<!-- 直接选择data中的变量，如果值存在于样式中则添加样式，一般配合有需要动态判定样式的元素 -->
数组语法绑定
</div>
<input type="text" placeholder="请使用按键/keydown" @keydown.a="key_p">
<input type="text" placeholder="请使用按键/keypress" @keypress="key_p">
<input type="text" placeholder="请使用按键/keyup" v-model="key_event" @keyup="key_ups">
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
const {
log
} = console
Vue.config.keyCodes.a = 38
const vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
is_show: true,
user: [{
id: 1,
name: '张三'
},
{
id: 2,
name: '张四'
},
{
id: 3,
name: '张五'
},
],
userId: '', //双向绑定数据
userName: '',
active_style:{ //style 绑定的样式
width: '100px',
height:'100px',
backgroundColor:'gray',
borderRadius: '50%',
lineHeight:'100px',
textAlign:'center'
},
actives:false ,//v-bind class样式绑定开关
arr: 'arr_sty',
key_event:''
},
mounted() {
setTimeout(() => {
// this.message = 'change value'
// log(this.message)
// this.is_show = true
this.actives = true
}, 3000)
},
methods: {
please_hidden() {
this.is_show = false
},
add() {
this.user.push({ id: this.userId, name: this.userName })
this.userId = Number(this.userId)
log("得到的用户id值",this.userId)
log("查看输入的用户id类型",typeof this.userId)
log("得到的用户名值",this.userName)
log("查看用户名输入的类型",typeof this.userName)
},
u_input(e){
this.userId = this.userId.replace(/[^\d]/g,'')
},
key_p(e){
log('键盘事件',e)
},
key_ups(e){
if(e.keyCode == 13){
log('回车操作,获取用户输入数据:',this.key_event)
}
}
}
})
</script>
</body>
</html>
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话 —— 鲁迅
end
这篇关于vue-指令&修饰符的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Vue新手入门教程：从零开始学习Vue框架11-23
-
如何集成Ant Design Vue的图标11-23
-
如何集成Ant Design Vue图标11-23
-
使用vue CLI快速搭建Vue项目教程11-23
-
Vue CLI多环境配置简单教程11-23
-
Vue3入门教程：轻松搭建你的第一个Vue3应用11-23
-
Vue3+Vite快速上手指南11-23
-
Vue3阿里系UI组件入门指南11-23
-
Vue3的阿里系UI组件入门指南11-23
-
Vue3公共组件入门教程11-23
-
Vue3核心功能响应式变量入门教程11-23
-
集成Ant Design Vue的图标学习11-23
-
集成Ant Design Vue图标学习：新手入门指南11-23
-
Vue3入门：新手必读的简单教程11-21
-
Vue3教程：新手入门与基础详解11-21
栏目导航
