VUE常用指令

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>