日常学习之Vue指令（1）

学习期间参考的读物是Vue.js权威指南。若有理解不正确的地方，欢迎大家指正，我会积极理解改正。希望和大家共同进步。

1、v-cloak 1.1 用途：用于解决插值表达式闪烁问题。 1.2 造成闪烁的原因：当网速特别慢的时候，外部引用的包没有完全加载完，页面上会渲染出{{xx}}这样的画面，全部加载完成后{{}}里的内容才会被正常的渲染出来。 1.3 代码展示：

/* 利用属性选择器，选择有v-cloak属性的元素，
      在未完全加载完时，不显示该元素的内容 */
      [v-cloak] {
        display: none;
      }   

<div id="app1">
  <div v-cloak>{{ msg }}</div>
</div>

var vm = new Vue ({
     el: '#app1',
     data: {
     msg: '我是前端小白'
     },
   })  

2、v-text 2.1 用途：更新元素内部的内容。 2.2 代码展示：

<!-- v-text会自动覆盖这个元素里面本来有的内容，渲染到页面上内容是msg里的内容。 -->
<div id="app2" v-text="msg">我本来是这个内容</div>

var vm = new Vue ({
     el: '#app2',
     data: {
      msg: '我是前端小白'
     },
   })

2.3 页面效果展示： 2.4 v-text和{{}}（插值表达式）的区别： ①v-text没有闪烁问题。 ②v-text会覆盖原有元素的内容，{{}}不会覆盖原有元素的内容。元素原本有的内容会正常渲染到页面上，{{}}是替换了它本身占位符的内容。

3、v-html 3.1 用途：可以更新元素的innerHTML，内容会按照普通HTML插入。 3.2 代码展示：

<div id="app3" v-html="msg"></div>

var vm = new Vue ({
     el: '#app3',
     data: {
      msg: '<p>插入一个段落结构</p>'
     },
   })

3.3 页面效果展示：

4、v-bind 4.1 用途：给元素绑定属性。 4.2 代码展示：

<input id="btn" value="按钮" type="button" v-bind:title="title" >

 var vm = new Vue ({
     el: '#btn',
     data: {
       title: '添上了吧'
     },
   })

4.3 页面效果展示：

4.4 v-bind 缩写“ :”

 <input id="btn" value="按钮" type="button" :title="title" >

5、v-on 5.1 用途：用于给元素绑定事件。 5.2 代码展示：

<div id="app4" v-on:click="show" >
  {{msg}}
</div>

var vm = new Vue ({
     el: '#app4',
     data: {
       msg: '点我点我'
     },
     methods: {
       show() {
         alert("我弹出来了吧")
       }
     }
   })

5.3 v-on可简写为@

<div id="app4" @click="show" >
   {{msg}}
</div>

5.4 页面效果展示： 5.5 事件修饰符 5.5.1 .stop 阻止冒泡，调用event.stopPropagation()方法。 示例代码：

<div id="wrap">
   <div id="inner" @click="divClick">
      <input type="button" value="点击" @click="buttonClick">
   </div>
</div>

 #inner {
        width: 400px;
        height: 200px;
        background-color: blueviolet;
      }

 var vm = new Vue ({
     el: '#wrap',
     data: {
     },
     methods: {
      divClick() {
        console.log("这里触发的是div的点击事件");
      },
      buttonClick() {
        console.log("这里触发的是button的点击事件");
      }
     }
   })

输出结果： 先触发的是当前元素的时间，然后触发的是外围的事件。 若想阻止外围事件的触发，可以直接在事件上添加.stop方法。 代码示例：

<div id="wrap">
  <div id="inner" @click="divClick">
    <input type="button" value="点击" @click.stop="buttonClick">
  </div>
</div>

输出结果： 5.5.2 .prevent 阻止默认事件，调用event.preventDefault()方法。 代码示例:

 <div id="wrap">
      <a href="http://www.baidu.com" @click.prevent="aClick">跳转链接</a>
 </div> 

5.5.3 .capture 添加事件侦听器时使用事件捕获模式。 代码示例：

<div id="wrap">
      <div id="inner" @click.capture="divClick">
        <input type="button" value="点击" @click="buttonClick">
      </div>
</div> 

 var vm = new Vue ({
    el: '#wrap',
    data: {
    },
    methods: {
     divClick() {
       console.log("这里触发的是div的点击事件");
     },
     buttonClick() {
       console.log("这里触发的是button的点击事件");
     },
    }
  })

打印结果： 事件是从外向内捕获的。 5.5.4 .self 当事件在当前元素本身触发时，触发回调。 代码示例：

<div id="wrap">
  <div id="inner" @click.self="divClick">
    <input type="button" value="点击" @click="buttonClick">
  </div>
</div> 

js代码与capture一致。 打印结果： .self只会阻止自己本身的冒泡行为触发，并不会真正的阻止冒泡行为。 5.5.5 .once事件值触发一次。 代码示例：

 <div id="wrap">
  <div id="inner" @click.once="divClick">
    <input type="button" value="点击" @click="buttonClick">
  </div>
</div> 

js代码同上 打印结果： 只能触发一次事件。

6、v-model 6.1 用途：双向数据绑定 （这是唯一一个可以实现双向数据绑定的指令。） 6.2 代码示例：

<div id="app">
      <p>{{msg}} </p>
      <input class="text" type="text" v-model="msg">
    </div>

 var vm = new Vue ({
     el: '#app',
     data: {
       msg: '我是前端初学者，我们一起来学习。'
     },
   })

页面效果： 在vm实例中，数据内容也是被修改后的。 注意：v-model指令只能运用到表单元素中。