日常学习之Vue指令

学习期间参考的读物是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>

v