<div id="app">
    <h2>{{name}} 非常帅</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"虎哥"
        }
    })
</script>

• 首先通过 new Vue()来创建Vue实例

• 然后构造函数接收一个对象，对象中有一些属性：

  • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div

  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

    • name：这里我们指定了一个name属性

• 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

<div id="app">
    <input type="text" v-model="num">
    <h2>
        {{name}} 非常帅,
        有{{num}}位女神为他着迷。
    </h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"虎哥",
            num:1
        }
    })
</script>

• 我们在data添加了新的属性：num

• 在页面中有一个input元素，通过v-model与num进行绑定。

• 同时通过{{num}}在页面输出

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

• input与num绑定，input的value值变化，影响到了data中的num值

• 页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

我们在页面添加一个按钮：
<button v-on:click="num++">点我</button>

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num

• 普通click是无法直接操作num的。

html：
<div id="app">
    <input type="text" v-model="name"/>
</div>

js:
var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

• name的变化会影响到input的值

• input中输入的值，也会导致vm中的name发生改变

html：
<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

js：

var vm = new Vue({
　　el:"#app",
　　data:{
　　　　num: 0
　　},
　　methods:{
　　　　add:function(){
　　　　// this代表的当前vue实例
　　　　this.num++;
　　　　}
　　}
})

格式：

{{表达式}}

说明：

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值）

• 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;

• 可以直接获取Vue实例中定义的数据或函数

示例：

<div id="app">{{name}}</div>

使用v-text和v-html指令来替代{{}}

说明：

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

<div id="app">
v-text:<span v-text="hello"></span> <br/>
v-html:<span v-html="hello"></span>
</div>

var vm = new Vue({
    el:"#app",
    data:{
        hello: "<h1>大家好，我是虎哥</h1>"
    }
})

- input
- select
- textarea
- checkbox
- radio
- components（Vue中的自定义组件）

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

• 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型

• radio对应的值是input的value值

• input 和textarea 默认对应的model是字符串

• select单选对应字符串，多选对应也是数组

语法：
v-on:事件名="js片段或函数名"

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="num++">增加</button><br/>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <button v-on:click="decrement">减少</button><br/>
    <h1>num: {{num}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

语法：
v-for="item in items"

• items：要遍历的数组，需要在vue的data中定义好。

• item：迭代得到的数组元素的别名

示例

<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'虎哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
</script>

语法：
v-if="布尔表达式"
示例：
    <div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br/>
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
示例：

    <div id="app">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender === '女'">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                users:[
                    {name:'柳岩', gender:'女', age: 21},
                    {name:'虎哥', gender:'男', age: 30},
                    {name:'范冰冰', gender:'女', age: 24},
                    {name:'刘亦菲', gender:'女', age: 18},
                    {name:'古力娜扎', gender:'女', age: 25}
                ]
            }
        })
    </script>

也可以使用 `v-else` 指令来表示 `v-if` 的“else 块”：
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>
v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。

data属性：

data:{
    isActive:['active','hasError']
}
HTML：
<div v-bind:class="isActive"></div>

v-bind:class可以简写为:class