简单了解vue.js

简单了解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

data选项，用于声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data中声明，这样不至于将数据散落在业务逻辑中，难以维护。

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

console.log(app.a)

vue实例代理了data对象里的所有属性，所以可以像上面例子那样进行访问。
除了显式的生命数据外，也可以指向一个已有的变量，并且他们之间默认建立了双向绑定。

var myData = {
    a: 1
}

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

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