vue数据绑定

语法

1.Vue构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的

    var vm = new Vue();

2.插值表达式 {{ }}

插值表达式用于输出文本，双大括号标签会将里面的值全部当作字符串来处理

如果是 html 标签，则用三个大括号来绑定

插值表达式也可以放在 html 标签内

{{ }} 插值表达式支持：

单独语句的表达式

可以进行简单的运算

可以进行三元运算

可以由 javascript 表达式和过滤器构成

<p id="app">
    {{ cents*10}}   //在原值的基础上乘以10
    {{ 3>2?1:0}}    //值为真则渲染出1，否则渲染出0
    {{ message.split("")}} //获取message的值并用""分割
</p>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello Vue!',
            cents: 10
        }
    })

3.声明式渲染

Vue.js 的核心是允许采用简洁的模板语法来声明式的将数据渲染进 DOM 中

```
<p id = 'app'>
    {{ message }} #插值表达式输出数据
</p>

var vm  = new Vue({
    el: '#app',
    data: {
        message: 'hello Vue!'
    }
})

```

el: 指定 Vue 要渲染的 DOM 元素

data: 用来放置要挂载到 Vue 实例上的属性

每个被创建的 Vue 实例都会代理其 data 对象里的所有属性，只有这些被代理的属性是响应的

打开这个实例页面的控制台，并修改 app.message ，你会看到页面中的值也相应的发生了更新，

这说明被绑定的 DOM 元素都是响应式的进行数据渲染

4.指令

以 v- 开头的自定义属性是 Vue的特有指令，钟灵的值限定为绑定表达式，指令的作用是当表达式的值发生改变时把某些特殊的行为应用到 DOM 上

1.指令的语法：

v-指令名 = “表达式判断 或者是业务模型中属性名 或者事件名”

<p v-if='show'>显示</p> //当值为真是显示

还有一些指令和表达式之间插入一个参数，用冒号分隔

<p v-on:click='action'></p> //当值为真是显示