Vue.js之细说Vue指令

一、{{插值表达式}}、v-text、v-html（向HTML插值）

这里我们会用到：{{插值表达式}}、v-text、v-html
1）概述

        <div id="root">
            <h1>lance {{number}}</h1>
            <hr />
        </div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    msg:'hello world',
                    number:123
                }
            })
        </script>

“{{number}}”：我们把{{数据项名称}}叫做插值表达式。
举例：

        <div id="root">
            <h1>lance {{number}}</h1>
            <hr />
            <p v-text="number"></p>
            <hr />
            <p v-html="number"></p>
        </div>

在

<p v-text="number"></p>

表示p中的内容由number变量决定，v-text是vue中的一个指令。
当然我们也可以使用v-html指令。
2）v-text和v-html的区别

        <div id="root">
            <div v-text="content"></div>
        </div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    content:'<h1>hello world</h1>'
                }
            })
        </script>

我们通过这个例子测试出：v-text会被转义，而v-html(正常显示样式)不会被转义。

二、v-on（绑定监听）

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，
如果没有修饰符也可以省略。
1）v-on
是一个模板指令，比如

        <div id="root">
            <div v-on:click="handleClick">{{content}}</div>
        </div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    content:'hello'
                },
                methods: {
                    handleClick: function(){
                        alert(123);
                    }
                }
            })
        </script>

给

<div v-on:click="handleClick">{{content}}</div>

标签绑定了一个click事件，在它被触发的时候就会去调用handleClick方法，这个方法
定义在vue实例当中的methods这个对象当中。
2）需求：把hello变成world？

        <div id="root">
            <div v-on:click="handleClick">{{content}}</div>
        </div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    content:'hello'
                },
                methods: {
                    handleClick: function(){
                        this.content = "world"
                    }
                }
            })
        </script>

我们只需要在函数中，this.content去改变实例里面的数据，vue实例会监听到你数据的改变。
自动的帮你对模板进行更新，页面就会自动的跟着变化了。
所以说现在我们不是在面向dom变成而是在面向数据编程了。
3）事件绑定的简写
比如：

<div v-on:click="handleClick">{{content}}</div>

简写：

<div @click="handleClick">{{content}}</div>  

所以说在之后的编程中绑定某个事件的话，我们直接使用@就可以了。

三、v-bind、v-model（属性绑定和双向数据绑定）

3.1 v-bind（属性绑定）

需求：我希望title中的提示语是可变的

        <div id="root">
            <div title="this is hello world">hello world</div>
        </div>

        <script>
            new Vue({
                el: '#root'
            })
        </script>

解决：

        <div id="root">
            <div title="title">hello world</div>
        </div>

        <script>
            new Vue({
                el: '#root',
                data: {
                    title: 'this is hello world'
                }
            })
        </script>

但是这样好像是不行的，只会显示title。那要怎么样才能做好属性的绑定呢？
v-bind：这时我们需要使用一个新的模板指令v-bind。

<div v-bind:title="title">hello world</div>

当前这个title这个属性和vue实例中title数据项性绑定，，所以v-bind:title=”title”，
双引号中的title指的就是data中的title。
2）简写

<div :title="title">hello world</div>

使用v-bind:和使用:的效果是一样的

3.2 v-model（双向数据绑定）

1）限制与用法

<input>、<select>、<textarea>、components使用

用法：在表单控件或者组件上创建双向绑定。
2）单向数据绑定

    <div id="root">
            <div :title="title">hello world</div>
        </div>
        <hr />
        <input />
        <div>{{content}}</div>
        <script>
            new Vue({
                el: '#root',
                data: {
                    title: 'this is hello world',
                    content: 'this is content'
                }
            })
        </script>

数据决定页面的显示，但是页面无法决定你数据里的内容。
3）双向数据绑定

        <div id="root">
            <div :title="title">hello world</div>
            <input :value="content" />
            <div>{{content}}</div>
        </div>
        <hr />
        <script>
            new Vue({
                el: '#root',
                data: {
                    title: 'this is hello world',
                    content: 'this is content'
                }
            })
        </script>

我们改变input框中的值，但data中的content数据项的内容没有发生改变。

        <div id="root">
            <div :title="title">hello world</div>
            <!--<input v-model:value="content" />-->
            <input v-model="content" />
            <div>{{content}}</div>
        </div>
        <hr />
        <script>
            new Vue({
                el: '#root',
                data: {
                    title: 'this is hello world',
                    content: 'this is content'
                }
            })
        </script>

四、v-if、v-show、v-else、v-else-if（判断）

4.1 v-if、v-show

1）需求

        <div id="root">
            <div> hello world</div>
            <button>点击N下</button>
        </div>

        <script>
            new Vue({
                el: '#root'
            })
        </script>

效果：

当我点击按钮的时候，hello world能关闭，再次点击有可以出来。。。
2）实现

        <div id="root">
            <div v-if="show"> hello world</div>
            <button @click="handleClick">点击N下</button>
        </div>

        <script>
            new Vue({
                el: '#root',
                data: {
                    show: true
                },
                methods:{
                    handleClick: function(){
                        this.show = !this.show;
                    }
                }
            })
        </script>

当然我们也可以使用v-show实现这个功能：

        <div id="root">
            <!--<div v-if="show"> hello world</div>-->
            <div v-show="show"> hello world</div>
            <button @click="handleClick">点击N下</button>
        </div>

3)v-if与v-show的区别
v-show是在挂载点的节点中添加了display:none;的CSS属性。

而：v-if是直接的注释掉挂载点

分析：当我们频繁：关闭和开启某个节点的时候，性能好的应该是v-show。
因为它不会去频繁增删节点。如果不是很频繁则使用v-if。

4.2 v-else

1）限制
前一兄弟元素必须有 v-if 或 v-else-if
2）用法
为 v-if 或者 v-else-if 添加“else 块”。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

4.3 v-else-if

1）限制
前一兄弟元素必须有 v-if 或 v-else-if。
2)用法
表示 v-if 的 “else if 块”。可以链式调用。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>  

五、v-for（循环）

5.1 基础概念

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定
语法 alias in expression ，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：
我们去循环items这个数组，每一项我会放到item中，每一下的坐标我会放到index中去。

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供
一个 key 的特殊属性：
:key属性：可以提升每一项的渲染效率

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

5.2 实例一

html:

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

js：

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

5.3 一个对象的v-for

html：

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

js:

  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

结果：

你也可以提供第二个的参数为键名：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

结果：

第三个参数为索引：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

结果：