简单了解vue.js

vue.js提供了现代web开发中常见的高级功能，比如：

解耦视图与数据

可复用的组件

前端路由

状态管理

虚拟DOM

1、MVVM模式

视图层、视图模型、模型双向绑定

双向绑定第一种：

<div id="app">
    <input type="text" v-model="name"/>
    <h1>你好，{{ name }} </h1>
</div>
......

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: ''
        }   
    })

</script>      

这样就形成了简单的数据绑定，通过v-model中的model与{{ }}中的viewmodel层进行绑定，通过vue实例中data字段中的name来实现的双向绑定。

创建一个vue的根实例：

var app = new Vur({
    //各种选项
})      

各种选项：

1、el

el用于制定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器

<div id="app"></div>

var app = new Vue({
    el: document.getElementById('app') //或'#app'
})      

Vue提供了很多常用的实例属性与方法，都以$开头

2、data

var app = new Vue({
    el: '#app',
    data: {
        a: 2
    }
})

console.log(app.a)      

var myData = {
    a: 1
}

var app = new Vue({
    el: '#app'
    data: myData
})

console.log(app.a)
app.a = 2
console.log(myData.a)