Vue系列(三)之基本语法文本插值

今天先介绍Vue最简单最基本的语法，声明式渲染。

Vue实例

上篇文章中我们使用new关键字创建了一个Vue实例：

<div id="app">
    <div>messgae：{{message}}</div>
</div>
<script>
    var vm = new Vue({
        //el是css选择器，或者HTMLElement实例，提供Vue实例挂载的Dom节点
        el:'#app',
        data:{
           message:'hello vue'
        }
    });

</script>

或者（如果没有提供el选项，需要手动调用mount方法）

var vm = new Vue({
    data:{
       message:'hello vue'
    }
}).$mount('#app');

插值

普通文本

使用 {{ }} 实现数据绑定到视图：

<div>messgae：{{message}}</div>

var vm = new Vue({
  data:{
       message:'hello vue'
    }
}).$mount('#app');

运行效果：

使用js表达式

可以在{{}}使用简单的js表达式，例如：

<div>{{num+1}}</div>
<div>{{isRight? name1:name2}}</div>
<div>{{str.split('_').join('')}}</div>

原始html

{{}} 语法会将数据解释为普通文本，而不是html。有时我们确实需要插入html而非普通文本（虽然这种情况很少见，至少目前我没有遇到过这样的需求，所以这里简单带过。真正用到时，可以去官方文档查看）。
使用v-html指令：

<div id="app">
    <div>message：{{message}}</div>
    <div>原始html：{{html}}</div>
    <div v-html="html">原始html:</div>

</div>
<script>
    var vm = new Vue({
        data: {
            message: 'hello vue',
            html: '
hello world
'
        }
    }).$mount('#app');

</script>

运行效果：

新的属性

注意：由于Vue底层的实现，Vue无法监听新加的属性变化。

Vue只在初始化的时候，递归data的属性转换为setter/getter方法，使data的属性可以响应数据变化。所以一个属性如果没有在data中声明，而是后期加进去的，vue监听不到该属性的变化，也就无法做到视图的同步改变。

解决方案有两种：

data 中声明所有属性

既然无法监听到新添加的属性，那在data中声明所有要用到的属性，并赋予其默认值就可以了。后期属性改变的时候，vue就可以监听到属性变化，做到视图同步改变了。

Vue的$set()

set api
set()方法向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

如下例：info中未声明weight属性，在add中直接新增，视图不会响应改变，使用this.$set()方法可以将新增属性设置为响应式的。

    <div>height:{{info.height}}</div>
    <div>weight:{{info.weight}}</div>
    <button @click="add">add</button>

data: {
    name: 'ayy',
    info: {
        height: 165
    }
},
methods: {
    add() {
    	//直接新增，响应不到
        // this.info.weight = 60;
        /*
        * vue的set方法可以新增响应属性
        * 第一个参数为要新增的对象
        * 第二个参数为要新增的属性名
        * 第三个为属性值
        */
        this.$set(this.info,'weight',60);
    }
}

但是set方法不允许动态添加根级响应式属性，所以如果是根级属性(data数据对象中第一层属性)，必须在data中声明。

如果你使用了未在data中声明的属性，Vue 将警告你渲染函数正在试图访问不存在的属性。