vueJS · 前端

https://www.kancloud.cn/a173512/app_dcloud/1891743 时间轴点：Angular》React》vue Angular：模板与数据绑定 React：组件与虚拟DOM（国内大公司用的多些） vue：结合Angular与React（国内小公司用的多些） ### **兼容性** Vue**不支持**IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有[兼容 ECMAScript 5 的浏览器](https://caniuse.com/#feat=es5) ### **vue扩展插件** 1)ue-cli: vue脚手架 2) vue-resource(axios): ajax请求 3) vue-router:路由 4) vuex:状态管理 5) vue-lazyload:图片懒加载 6) vue-scroller:页面滑动相关 7) mint-ui:基于vue的U1组件库(移动端) 8) element-ui:基于vue的Ul组件库(PC端) 数据绑定与双向数据绑定数据绑定：数据在页面与内存中的变量自动转移双向数据绑定：如果2个方向数据都可以自动转移 vue的MVVM ![](https://img.kancloud.cn/0c/f0/0cf0a6bfc6001a92a4ebb350a2a3f66f_732x350.png) MVVM: model:模型,数据对象(data) view: 视图,模板页面 viewModel: 视图模型(Vue的实例) **声明式开发与命令式开发** 声明式开发:按照别人的语法,写一些特定的代码例如此例中向input添加v-model属性就可以获取input的值并保存到vue实例的data.username里命令式开发:例如jquery这种,按照流程的编码 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="test"> <input type="text" v-model="username" name="uname" id="" value="" /> <p>hello {{username}}</p> <p v-text="username">1</p> </div> <p>{{username}}</p> <script type="text/javascript"> var vm=new Vue({ el:'#test', data:{ username:'dash' } }); </script> </body> </html> ``` 1.模板的理解: 动态的html 页面包含了一些S语法代码双大括号表达式指令(以v-开头的自定义标签属性) 2,双大括号表达式语法: {{fexp}}或{{{ffexp}}} 功能：向页面输出数据可以调用对象的方法 3,指令一: 强制数据绑定功能：指定变化的属性值完整写法:v-bind:xxx='yyy' //yyy公作为表达式解析执行简洁写法：:xxx='yyy' 4.指令二：绑定事件监听功能：绑定指定事件名的回调函数完整写法: v-on:click='xxx' 简洁写法： @click='xxx'