【1】vue中的指令与插值表达式

为什么要用指令和插值表达式

前面我们已经说到过，在Vue中不直接对DOM进行操作，而是通过数据的改变来改变页面的显示状态。但是如果在HTML中直接像这样设置页面内容，那么改变数据时将无法用到Vue提供的便捷方法

<p id="hello" >hello world</p>

为了能通过变量来决定显示的内容，用原生JS我们可以这样写

var str="hello world";
document.getEleMentById('hello').innerText=str;

但此时在控制台中改变str的值，页面并不会改变，因为在页面不刷新的情况下，变量改变页面不会重新渲染。

因此，我们需要使用Vue提供的方法，来做到在不刷新页面的情况下重新渲染页面。

Vue实例的数据，要定义在实例中的data内，当某个数据改变时，就会重新渲染页面中用到了该数据的地方。而要达到这个目的，要解决的问题就是：如何使用在Vue实例中定义的数据，这也就用到了标题中的两种方法，指令和插值表达式。

另外，Vue中的指令还有其他便捷的功能，我们在后面一一介绍。

插值表达式

插值表达式，就是用固定的语法，在根实例接管的范围内的标签中使用Vue中定义的数据。

比如我们在Vue实例的data中定义了变量text

var vm=new Vue({
            el:"#box",
            data:{
                text:"呵呵",
                list:[]
            }
        })

那么在标签中就可以使用这个变量

<p>{{text}}</p>

此时，页面中将显示text的值hello world。若我们在控制台中通过vm.text="hello vue"改变text的值，页面中的显示也将改变，达到了不刷新页面重新渲染的目的。

指令的用法

在Vue实例接管的范围内的标签中，或是子实例的模板中，都可以使用指令。为便于区分，Vue中的指令都以 v- 开头，有些常用的指令也有简写形式。以常用的绑定单击事件举例：

<p v-on:click="handleClick"></p>

常用指令

• v-text=“变量名” 将这个节点的innerText与这个变量绑定 v-html=“变量名”
  将这个节点的innerHTML与这个变量绑定
• v-on: 在上面例子中用于绑定点击事件，实际上也可以用于绑定其他事件，在冒号后跟事件名，单击事件即click。在父子组件传值中，父组件监听子组件触发的自定义事件时，也是用的 v-on:自定义事件名 的方法。v-on:可以简写为@，即绑定单击事件也可以写成@click
• v-for="(item,index) in list"用于循环显示数组的所有元素。list是Vue实例的data中定义的iterable类型的变量，item和index分别是每次循环出的元素（值）和索引（键）
• v-model="变量名"将变量的值和表单元素（input、textare、select）的值进行双向绑定，改变变量表单的显示会变，改变表单的状态值也会变
• v-bind:接收变量名=“传递变量名” 用来在子组件中接收父组件传递来的值，简写时可以省略v-bind，即写成 :a="b"的形式。
• v-if=“布尔型变量” 当布尔值为false时，节点将不会显示。通过控制台可以看到，其原理是将该节点注销掉

一点补充：

• 指令的参数：指令中冒号后面的部分，如绑定事件的指令v-on:事件名中的事件名就是参数
• 动态参数：将JS语句写在方括号[]内，作为指令的参数。这个语句必须是一个字符串，或是返回一个字符串；语句中不能使用空格或引号