Vue内置的常用指令

通过标签引入vue.js文件，让我们来开始了解Vue的基础语法吧！

 <script src="vue.js"></script>

除了差值表达式以外，Vue的指令是都在html标签的属性处定义。

v-text v-html

这两个指令用来控制标签在页面的显示数据，v-text会为标签按字符串的形式赋值，v-html则会将其中的字符串按html的标准解析出来。

<script>
        var app = new Vue({
            el:"#app",
            data:{
                //插入一个标签元素，对比两个指令的不同
                message: "<a href='http://www.baidu.com'>xuan</a>"
            }
        })
</script>

<div id="app">
        <h2 v-text="message + '!'">lel</h2>
        <h2 v-html="message"></h2>
    	<h2>{{message}}</h2>
</div>

输出结果如下：

有两点需要注意：

1.访问Vue对象的方式有两种：在指令中可以直接通过变量名访问到；指令外使用差值表达式{{}}；

2.可以对拿到的数据进行二次操作。

v-on

v-on主要是为标签绑定一个具体的事件，在JavaScript中的写法是onclick、onchange等等，这个on便是取自于此。

<script>
        var app = new Vue({
            el:"#app",
            methods: {
                doIt:function(){
                    console.log("做IT");
                }
           },
        })
</script>

<div id="app">
     <input type="button" value="v-on指令" v-on:click="doIt()">
     <input type="button" value="v-on指令简化" @click="doIt()">
</div>

当点击button时，就会进行doIt()的调用，v-on: 也可以简写成@。利用v-on，我们就可以实现一个简单的MVVM模式：

<script>
        var app = new Vue({
            el:"#app",
            data:{
                value:0
            },
            methods: {
                subscribe:function(){
                    if(this.value === 0){
                        alert('到底啦.')
                    } else {
                        this.value--;
                    }
                },
                add:function(){
                    if(this.value === 10){
                        alert('最多啦.')
                    } else {
                        this.value++;
                    }
                }
            },
        })
</script>

<div id="app">
        <input type="button" value="-" @click="subscribe()">
        <span v-text="value"></span>
        <input type="button" value="+" @click="add()">
</div>

我们通过点击+ 、 -两个按钮就可以轻松控制中间value的值并显示在页面上：

MVVM理解

不妨来试想一下，没有vue之前我们是怎么做到的：

<div>
    <input type="button" value="-" onclick="subscribe()">
    <span id="v1">0</span>
    <input type="button" value="+" onclick="add()">
</div>

<script>
  function subscribe() {
      var spanElement = document.getElementById("v1");
      var value = spanElement.innerText;
      if(value == 0){
          alert('到底啦.')
      } else {
          value--;
      }
      spanElement.innerText = value;
  };
  function add(){
      var spanElement = document.getElementById("v1");
      var value = spanElement.innerText;
      if(value == 10){
          alert('最多啦.')
      } else {
          value++;
      }
      spanElement.innerText = value;
  }
</script>

我们通过DOM拿取到标签的值，进行操作之后，再手动的为标签设置值。这就是Vue MVVM模式的高明之处，它替我们完成了较繁琐的数据同步功能，使编码人员只需要关注具体的业务处理即可。

MVVM理念

v-show v-if

两个指令都是用来控制页面标签元素的显示状态，可以动态的隐藏或展示标签：

 <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"cake",
                isShow:true,
                age:18

            },
            methods: {
                //ES6定义函数
                change(){
                    this.isShow = !this.isShow;
                }
            },
        })
</script>

<div id="app">
        <H2 v-show="isShow" >show-{{food}}</H2>
        <H2 v-show="age>=18" >show-{{food}}</H2>

        <H2 v-if="isShow" >if-{{food}}</H2>
        <H2 v-if="age>=18" >if-{{food}}</H2>

        <!-- function不需要加()也能调用 -->
        <input type="button" value="修改" @click="change">
</div>

看一下调式台的结果就能明白二者的区别：

v-show是将元素的display属性设置为none，该元素还存在，只是不显示；v-if是直接不加载当前元素。

考虑到Dom树的操作比较耗费性能，如果需要频繁切换建议使用v-show。

v-bind

v-bind是为html标签动态设置属性的值，v-bind:可以简写为:。

分别为src、class属性赋值：

 <div id="app">
     <!-- 两种写法的不同 -->
     <img v-bind:src="imgSrc" :class="isActive?'active':''"  @click="change">
     <img v-bind:src="imgSrc" :class="{active:isActive}"  @click="change">

     <!-- 简写形式 -->
     <img :src="imgSrc" :class="isActive?'active':''"  @click="change">
 </div>

为isActive设置一个样式:

<style>
    .active{
         border: 4px solid red;
     }
</style>

 <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"demo1.png",
                isActive:true
            },
            methods: {
                change:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
</script>

点击事件触发后，class属性获得一个isActive值，进行边框加粗：

轮播图实现

利用v-show、v-bind可以实现一个简单的轮播图：

    <div id="app">
       <img :src="imgArr[index]">
       <input type="button"  @click="next" value="next" v-show="index < imgArr.length - 1">
       <input type="button"  @click="prev" value="prev" v-show="index != 0">
    </div>

<script>
        var app = new Vue({
            el:"#app",
            data:{
              imgArr:['demo1.png','demo2.png','demo3.png','demo4.png'],
              index:0
            },
            methods: {
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            },
        })
</script>

仔细感受一下图是怎么通过改变数组变化的，在Vue中，一切的界面动态都是对数据的操作。

v-for

见名知意，对数据进行循环遍历，需要我们先定义一个数组：

<script>        var app = new Vue({            el:"#app",            data:{                vegetables:[                  {name:"xixi"},                  {name:"heihei"}                ]            }        })</script>

此处定义了一个对象数组，这也是日后前后端开发时必会的获取规则。

对于JavaScript对象和数组概念模糊，可以参考：JavaScript数据结构

<div id="app">        <ul >            <li v-for="(item,i) in vegetables">                {{i+1}}:<p>{{item.name}}</p>            </li>        </ul></div>

item表示数组中的一个元素，i则是当前元素在数组中的下标。

v-model

v-model是双向数据绑定最淋漓尽致的体现，用于在input标签中使用：

 <script>        var app = new Vue({            el:"#app",            data:{             message:"请你输入:"            },            methods: {            },        });		function aaa(){            alert('aaa')        } </script>

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

当我们在input中输入值的时候，下面的div不需要任何触发事件就会同步显示，这样可以更直观的看到双向数据绑定的现象。

作用域问题

在上面的案例中定义一个JavaScript函数，调用情况如下：

<!-- 找不到方法，不会进行函数调用 --><input type="button" v-model="message" @click="aaa()"> <!-- 正常显示与调用 --><input type="button" v-model="message" onclick="aaa()">

使用Vue的指令会使其在Vue对象的作用域内查找，我们定义的函数是在Vue之外，自然也就看不到了。