Vue.js基础入门.pptVIP

Vue.js 基础与入门 1.简介 2.快速入门 目录 一、历史由来 框架作者： 尤雨溪 2014年2月开源的一个前端开发库Vue.js。 Vue.js是一款轻量级的以数据驱动的前端JS框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。 1.概述 2.优点： （1）轻量——最小只需要17.14kb（Vue.js 2.0生产版本）—— jquery是87KB（3.1）95KB（1.12） （2）易学——相比较React和Angular来说，学习曲线平缓，学习文档资料相对较多。 （3）易开发——支持热加载（即修改源代码后，无需刷新即可在页面上看到效果） 使用Vue的项目： 1. 天猫、饿了么、小米商城、途牛、苏宁易购、微博头条 2. 其中某些使用了vue-native，也就是weex（比单纯前端多了后端部分） 3.兼容性 4. MVVM模式 MVVM模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Vue、Angular 和 Ember 都采用这种模式，相比于Angular，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 5.数据驱动和组件式编程 总结一下基于操作dom的前端开发方式： 拼界面-找到dom节点-修改属性-检测是否有其他影响的节点-根据刚刚修改的dom节点更新自己的状态 vue或者angular这些mvvm框架给了前端另一种思路,完全基于数据驱动的编程。不同于jQuery操作DOM，因为Vue.js是数据驱动的,采用一种数据绑定的方式,自动绑定dom节点的属性.这样就把你从操作dom节点的繁琐过程中解脱出来了,你只要专注于数据的状态,ui更新的事情你不需要去管了,回归编程的本质:程序=数据结构+算法. 这也是mvvm框架最大的思路上的突破。 1.模板语法（Hello World示例） 2.快速入门 1. {{ variable }} 非转译模板语法 2. {{{ variable }}} 转译模板语法 - 将变量字符串转成HTML 3. {{* variable }} 不变数据模板 - 变量只生效一次，后面的更改不生效 4. {{ string.split( ).reverse().join( ) }} 模板中，可以运行js语句 2. Vue事件响应 button v-on:click=方法名/button 事件添加的缩略形式 button @click=方法名/button input @keydown=method ev对象以第一个参数的形式传给method方法 input @keydown=method(a,b) input @keydown=method(a,b,ev) 键码缩略形式 input @keydown.enter=method(a,b,ev) input @keydown.delete=method(a,b,ev) input @keydown.left=method(a,b,ev) input @keydown.right=method(a,b,ev) input @keydown.up=method(a,b,ev) input @keydown.down=method(a,b,ev)