一分钟带你了解VUE重点指令！

Vue.js指令

前言

Vue.js 自身不是一个全能框架–它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能完美地驱动复杂的单页应用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue指令

1.v-cloak

• 不需要表达式

代码如下（示例）：

 <!-- View -->
    <div id="app">
       <p v-cloak>{{userName}} </p>
    </div>
     <!-- View end -->
    <script src="./Js/vue.min.js"></script>
     <script> 
        //创建一个vue环境，创建一个VM层
            new Vue({
                el:'#app',
                data:{
                    userName:'admin'
                }
            })
        </script>

• 不会显示，直到编译结束。

---

2.v-text

代码如下（示例）：

 <div id="app">
            <!-- {{userName}} -->
            <p v-text='userName'></p>
    </div>
</body>
<script src="./Js/vue.min.js"></script>
<script>
    let Vm = new Vue({
        el:'#app',
        data:{
            userName:'admin'
        }

    })
</script>

---

3.v-html

代码如下（示例）：

<div id="app">
             <!-- {{myDiv}} -->
             <P v-html='myDiv'></P>
    </div>
</body>
<script src="./Js/vue.min.js"></script>
<script>
    let Vm = new Vue({
        el:'#app',
        data:{
            myDiv:'<h1>HI</h1>'
        }

    })
</script>

---

4.v-pre

• 不需要表达式

代码如下（示例）：

 <div id="app">
       <p v-pre>{{msg}}</p>
    </div>
</body>
<script src="./Js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'不想被编译'
        }

    })
</script>

---

5.v-once

• 不需要表达式

代码如下（示例）：

<div id="app">
      <p v-once>{{msg}}</p>
    </div>
</body>
<script src="./Js/vue.min.js"></script>
<script>
    let Vm = new Vue({
        el:'#app',
        data:{
            msg:'最初的梦想：当老师'
        },
        mounted() {
            this.msg = '后来我长大了，一心只想暴富'
        }

    })
</script>

---

6.v-model

代码如下（示例）：

 <!--双向数据绑定-->
    <div id="app">
        <input type="text" value="" v-model="userName">
        <p>{{userName}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                userName:'admin'
            }
        })
    </script>

---

7.v-on

• 缩写 @

代码如下（示例）：

<div id="app">
       <input type="text" v-model="num"><br />
       <input type="button" value="+1" v-on:click='add' />
       <input type="button" value="-1" v-on:click='sub' />
    </div>
    <script src="./Js/vue.min.js"></script>
    <script>
      new Vue  ({
          el:'#app',
          data:{
              num: 1
          },
          // 将num值进行操作
          // methods:用来写页面需要的方法的配置项
        methods:{
            add:function () {
                 this.num += 1
            },
            sub(){
                this.num -= 1
            }
        }
      })
    </script>

---

8.v-bind

• 缩写 :

代码如下（示例）：

 <div id="app">
        <!--<img v-bind:src="srcUrl">-->
        <img :src="srcUrl">
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                srcUrl:'./img/n1.jpg'
            },//这个逗号必须要
            mounted(){
                //这个this必须要：它指当前的vm实例
                this.srcUrl='./img/n2.jpg'
            }
        })
    </script>