VUE常用指令
在学习前端的过程中,学了一段时间的VUE,先说手为啥要学习VUE,很直白,想找工作,想赚钱!
然后学习VUE的好处是,不用过多地去操作DOM元素,可以花更多的时间去关注业务逻辑
v-on
vue使用最频繁的指令之一,用于绑定事件
使用方法一: <input type=“button” value=“开启” v-on:click="go">
使用方法二(简写): <input type=“button” value=“开启” @:click="go">
v-bind
vue使用最频繁的指令之一,用于绑定属性
使用方法一: <input type=“button” value=“开启” v-bind:title="btnTitle + ‘, 这是追加的内容’">
使用方法二(简写): <input type=“button” value=“开启” :btnTitle + ‘, 这是追加的内容’">
在使用v-bing的过程中
会使用到事件修饰符
使用方法
在这里插入代码片 div class="inner" @click.capture="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div>”
1.stop 阻止冒泡
2.prevent 阻止默认事件
3.capture 添加事件侦听器时使用事件捕获模式
4 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
5 .once 事件只触发一次
v-model
双向绑定数据的指令,使用最频繁的指令之一
//绑定msg数据
<p v-model="msg"></p>
v-cloak
使用v-cloak可以解决插值表达式闪烁的问题
<p v-cloak>++++++++ {{ msg }} ----------</p>
v-text
默认v-text没有闪烁问题,但是v-text会覆盖原本的内容
<h4 v-text="msg">==================</h4>
##v-html
v-html会自动解析属性值内的html标签,如下v-html会自动解析msg2的h1标签
列子:
<div v-html="msg2">1212112</div>
data: {
msg2: '<h1>哈哈,我是H1</h1>',
},
v-for
v-for指令用于循环迭代列表或者数据的元素
<ul>
//迭代数组
<li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>
</ul>
!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
//迭代数字
<p v-for="i in 6">这是第 {{i}} 个P标签</p>
v-if
每次使用v-if的时候,都会创建或者删除dom元素
需要创建或者使用次数少的时候可以使用v-if
<h3 v-if="flag">这是用v-if控制的元素</h3>
v-show
使用v-show的时候,会使用display:none去切换元素的隐藏或者显示
涉及到元素的频繁切换建议使用v-show
<h3 v-show="flag">这是用v-show控制的元素</h3>