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实例自身属性和方法

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容