vue简介_01章

1、渐进式框架（构建用户界面-只关注视图层）

2、两个核心点

① 响应的数据绑定（ 当数据发生改变  --》 自动更改视图 ）

html： <div id="demo">{{message}}</div>    // 模板

js:        let data={message:"hello ,Vue! ";        // 数据

            var vm = new Vue（{        //实例

                      el：“#demo”，        //挂载元素

                      data：data

             }）；

注意点：利用object。definedProperty中的setter/getter代理数据，监控对数据的操作（ 兼容iE9以上）

②组合的视图组件（ui界面映射为组件树）

优点：划分组件可维护、可重用、可测试

http://element.eleme.io/%23/zh-CN/ (饿了么 vue组件库)

3、虚拟DOM（只渲染改变的地方—对象嵌套对象）

模板（标签）  -----》  渲染函数    -----  》虚拟DOM树（对象）-----  》真实的DOM

                       调用                       render                                     create（编译）

4、MVVM

M：Model 数据模型

V:   View 视图模板

VM：view-Model 视图模型（数据绑定 、数据的监听）

示例：双向数据绑定

html：

<div id="demo">   // 模板

<input type="text" v-model="message">

<p>{{message}}</p>

</div>

js: 

let data={message:"hello ,Vue! "; }       // 数据

var vm = new Vue（{        //实例

       el：“#demo”，        //挂载元素

       data：data

}）；

5、vue实例 （new Vue选项对象）

①    包括：el：挂载元素选择器

          data：代理数据

          methods：定义方法

更多查看官网API

html: <div id="demo"><span v-on:click="clickHandle">{{message}}</span></div>

js:   let  data={   message:"hello,Vue!"}

      new Vue({

              el:"#demo",

              data:data,

              methods:{

                        clickHandle(){     alert("click")    }      //ESC6语法

              }

         })

② 代理data数据

每个vue实例都会代理其data对象里的所有属性，这些被代理的属性是响应的，新添加的不具备响应功能，改变后不会更新视图。

③ vue实例自身属性和方法

暴露自身的属性和方法，已$开头