HTML5培训Vue独孤九剑之起手式

-HTML5培训技术分享 Vue 独孤九剑之起手式00：前言大家好，我是李鹏（MR_LP）,最近 Vue 大火，很多小伙伴们都想一览 Vue 的风采却不知如何下手。那我们今天就一起来探讨一下，关于 Vue 的点点滴滴吧。另外，本文主要是记录一下自己的学习历程，顺带做一个总结。其中有参考 Vue.js 的中文文档,也有去查看其它大大们给出的总结。最后也是一个期盼，希望能够帮助到其他有需要的小伙伴 。补充： 第一次自学的话，推荐直接去查看以下内容。*01：Vue 基础介绍以下部分内容参考于官方文档。Vue.js 是什么 Vue.js（读音 /vju/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。至于很多小伙伴，对于是否要选择 Vue 可能存在一些顾虑，或者说可能会觉得 Vue 不值得去学习。在这里，笔者和大家分享一句我以前打游戏时很喜欢说的话。没有垃圾的英雄，只有菜比的玩家每一个框架的存在都是有其特定意义的，只是在不同的使用场景，才会有适不适合之分。此外再去补充一下关于 SegmentFault 在 2016 年 8 月给出的 Vue 的增长趋势。由此也能看出来，Vue 的未来前景如何。说了这么多，也该书归正文，一起来看一下，如果我们要学习 Vue，该做哪些准备.*0*02：Vue 和其他 MVVM 框架的对比首先在开始学习 Vue 之前，我们首先需要了解一下，Vue 和其他框架有什么不同.这里请允许我直接引用一下懒得安分大神的话术。关于MVVM，原来在介绍knockout.js的时候有过讲解，目前市面上比较火的MVVM框架也是一抓一大把，比如常见的有Knockout.js、Vue.js、AvalonJS、Angularjs等，每一款都有它们自己的优势。 Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。 Vue：是最近几年出来的一个开源Javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。 AvalonJS：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。 React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。 Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。除此之外，在 Vue 的官网上也提供了和其他框架的对比。Vue ：对比其他框架更多内容：点击显示更多内容*03：什么是 MVVMMVVM是Model-View-ViewModel的简写。 MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。-百度百科除此以外，我们还可以通过这*图来看一下 MVVM。这*图足以说明MVVM的核心功能，在这三者里面，ViewModel无疑起着重要的桥梁作用。一方面，通过ViewModel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候，通过ViewModel里面数据绑定的机制，触发View里面Dom元素的变化；另一方面，又通过ViewModel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，ViewModel通过Dom树的监听机制，触发对应的Model的数据变化。当然在Vue.js里面ViewModel也是核心部件，它就是一个Vue实例。这个实例作用于单个或者多个html元素，从而实现Dom树监听和数据绑定的双向更新操作。*04：Vue 的引入关于 Vue 的引入，首先要明确一点。Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。除此之外，我们当然也可以去下载 Vue 的源码。 Vue 开发版本 Vue 生产版本 Vue 安装指南最后，我们在选择安装方式的时候，要注意vue-cli，对 Node.js 不够熟悉的同学不推荐使用。这里附录一下，关于vue-cli的路径说明。.|- build / 项目构建(webpack)相关代码|- build.js / 生产环境构建代码|- check-version.js / 检查node、npm等版本|- dev-client.js / 热重载相关|- dev-server.js / 构建本地服务器|- utils.js / 构建工具相关|- webpack.base.conf.js / webpack基础配置|- webpack.dev.conf.js / webpack开发环境配置|- webpack.prod.conf.js / webpack生产环境配置|- config / 项目开发环境配置|- dev.env.js / 开发环境变量|- inde*.js / 项目一些配置变量|- prod.env.js / 生产环境变量|- test.env.js / 测试环境变量|- src / 源码目录|- ponents / vue公共组件|- store / vue*的状态管理|- App.vue / 页面入口文件|- main.js / 程序入口文件，加载各种公共组件|- static / 第三方静态文件，比如一些图片，json数据等|- data / 群聊分析得到的数据用于数据可视化|- .babelrc / ES6语法编译配置|- .editorconfig / 定义代码格式|- .gitignore / git上传需要忽略的文件格式|- README.md / 项目说明|- favicon.ico |- inde*.html / 入口页面|- package.json / 项目基本信息这里咱们直接去使用一下官方推荐的基础引入方法。*05：Vue 的声明式渲染Documentmessagevar app = new Vue(/注意这里，需要填写的是对应的选择器el:*div,data: message:hello vue! )其中使用到了两个需要注意的内容。 el :o 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。o 其实说白了就是需要绑定的 DOM 元素。 data ：o Vue 实例的数据对象。o 大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。这是官方给出的基本案例，我们在这个案例之上，去从新书写一个新的案例。Document*： Name 年龄： Age 性别： Se* /Modelvar data = Name: 李先生, Age: 18, Se*:男人, /ViewModelvar vue = new Vue( el: *app, data: data, );用 MVVM 的角度，来从新看待这个问题，我们会发现。 Model就是data变量 ViewModel就是这里的new Vue()得到的对象需要注意，我们在上方所使用的message是 Vue 中数据绑定最常见的形式。也就是去使用 “Mustache” 语法（双大括号）来在文本中插入值。Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。但是请注意，它所说的是绑定的数据对象的属性发生改变才会更新。 插入 动态图地址 *06：处理用户输入Vue 提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。首先来看一个例子。Document message var app = new Vue( el: *app, data: message: 测试文本 )我们会发现，一旦我们输入*些内容，我们对应标签页会实时更新，这种方式我们一般称之为双向绑定。除此之外，我们还可以针对像te*tarea等内容进行数据的绑定。DocumentMultiline message is: message var app = new Vue( el: *app, data: message: )同时需要注意，在文本区域插值并不会生效，应用 v-model 来代替。更多内容请参照，表单数据绑定。*07：Vue 常用指令以下内容，我就直接懒得安分大神的文章，并对其内容作了更改。Vue里面为我们提供的常用指令主要有以下一些。 v-te*t v-html v-if v-show v-else v-for v-on v-bind v-model v-pre v-cloak v-once每一个指令都可以到相关文档，博主觉得文档里面每种指令的语法写得非常详细，在此就没必要重复做说明了，下面博主打算将一些常用的指令以分组的形式分别结合demo来进行解释说明。*08：v-te*t、v-html指令v-te*t、v-html这两者分为一组很好理解，一个用于绑定文本，一个用于绑定html。上文使用到的 Name 这种写法就是v-te*t的的缩写形式。这个很简单，没什么好纠结的，看一个Demo就能明白。Document*：*： Name 年龄：/Modelvar data = Name: 李先生, Age: 20, School:*校, /ViewModelvar vue = new Vue( el: *app, data: data, );代码说明： Name这种写法和v-te*t的作用是相同的，用于绑定标签的te*t属性。注意如果标签没有te*t属性，该绑定会失效，比如你在一个文本框上面使用v-te*t是没有效果的 由得到的效果可以看出，v-html绑定后会覆盖原来标签里面的内容（比如上面的“年龄：”），记住此处是覆盖而非append。 对于v-html应用的时候要慎重，在上动态渲染任意 HTML 有一定的危险存在，因为容易导致*SS 跨站脚本攻击。所以最好是在信任的网址上面使用。 注意v-te*t和v-html绑定都是单向的，只能从Model到View的绑定，不能实现View到Model的更新。*09：v-model指令v-model上面有介绍它的双向绑定功能，对于v-model指令，vue限定只能对表单控件进行绑定，常见的有、等。Document编辑*：*：Name编辑备注：备注：Remark篮球足球跑步学生爱好： Hobby 户籍： Huji */Modelvar data = Name: 李先生, Age: 18, School: 光明小学, Hobby: , Remark: 三好学生, Huji: /ViewModelvar vue = new Vue( el: *app, data: data,);插入动图地址：关于selece的数据源的动态绑定，我们留在v-for指令的时候介绍。*10：v-if、v-else指令v-if和v-else是一对离不开的好兄弟，使用条件运算符判断时常用。需要说明的是，v-if可以单独使用，但是v-else的前面必须要有一个v-if的条件或者v-show指令（后面介绍），这个和我们编程的原理是一样一样的。它们作为条件渲染指令，他们的基础语法如下：v-if=e*pression,v-else;注意这里的v-else可以不写，e*pression表达式是一个返回bool类型的属性或者表达式。Document*：是否已婚：是大人or小孩：18大人小屁孩学校： School /Modelvar data = Name: 李先生, IsMarry: true, Age: 20, School:*校, /ViewModelvar vue = new Vue( el: *app, data: data, );*11：v-show指令v-show指令表示根据表达式之bool值，觉得是否显示该元素。需要说明的是，如果bool值false，对应的Dom标签还是会渲染到页面上面，只是将该标签的css属性display设为none而已。而如果你用v-if值，bool值为false的时候整个dom树都不被渲染到页面上面。从这点上来说看，如果你的需求是需要经常切换元素的显示和隐藏，使用v-show效率更高，而如果你只做一次条件判断，使用v-if更加合适。v-show还常和v-else一起使用，表示如果v-show条件满足，则显示当前标签，否则显示v-else标签。Document*：是否已婚：是学校： School /Modelvar data = Name: 李先生, IsMarry: false, Age: 20, School:*校, /ViewModelvar vue = new Vue( el: *app, data: data, );*12：v-for指令v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。最简单的例子：Documentvalue/ViewModelvar vue = new Vue( el: *app, data: nums: 1, 2, 3, 4, 5, 6, 7, 8, 9 );除了基础数据之外，还支持Json数组的绑定。比如：Document*：value.Name，年龄：value.Age/ViewModelvar vue = new Vue( el: *app, data: values: Name: 李先生, Age: 20 , Name: 小刚, Age: 18 , Name: 小红, Age: 16 );*13：v-once指令v-once表示只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。什么意思呢.还是来看demo说话：Document*：年龄： Age 学校： School /Modelvar data = Name: 李先生, Age: 18, School:光明小学, /ViewModelvar vue = new Vue( el: *app, data: data, );插入动图地址：可以看出，只要使用v-once指令的，View和Model之间除了初次渲染同步，之后便不再同步，而同一次绑定里面没使用v-once指令的还是会继续同步。*14：v-bind指令对于html标签的te*t、value等属性，Vue里面提供了v-te*t、v-model去绑定。但是对于除此之外的其他属性呢，这就要用到接下来要讲的v-bind指令了。博主的理解是v-bind的作用是绑定除了te*t、value之外的其他html标签属性，常见的比如class、style、自定义标签的自定义属性等。它的语法如下：v-bind:property=e*pression先来看几个简单的例子。Document*：是否红领巾：是学校星级：aa/Modelvar data = Name: 李先生, Age: 18, School: 光明小学, SchoolLevel: red, IsBack:true /ViewModelvar vue = new Vue( el: *app, data: data, );需要说明的是同一个标签里面的同一个属性，可以既有绑定的写法，也有静态的写法，组件会自动帮你合并，比如上文中的class属性。得到效果如下：*15：v-on指令属性jquery的朋友应该很熟悉这个“on”，对于时间的监听和绑定，jquery里面最常用的就是on了。同样，在Vue里面，v-on指令用来绑定标签的事件，其语法和v-bind基本类似。v-on:event=e*pression;这里的event可以是Javascript里面的常用事件，也可以是自定义事件。Document*：年龄： Age 年龄递增/Modelvar data = Name: 李先生, Age: 18, /ViewModelvar vue = new Vue( el: *app, data: data, );这段代码是一个最简单的应用，直接在click事件里面执行逻辑，改变变量的值。效果如下：插入动图地址：除了直接在标签内写处理逻辑，还可以定义方法事件处理器。Document*：年龄： Age Hello/Modelvar data = Name: 李先生, Age: 18, /ViewModelvar vue = new Vue( el: *app, data: data, methods: Hello: function (event) / this 在方法里指当前 Vue 实例 alert(Hello + this.Name + !);this.Age+; );插入动图地址：*16：实例一：30分钟搞定增删改查在编写这个实例之前，首先先说明一下当前文档中需要引入的库。 bootstrap Vue实现效果：插入动图地址：案例源码：Documenttabletheadtrth te*t-align:center; 用户管理用户名年龄毕业学校备注操作row.Namerow.Agerow.Schoolrow.Remark编辑删除*小学复兴中学光明小学保存/Modelvar data = rows: Id: 1, Name: 李先生, Age: 18, School: 光明小学, Remark: 三好学生 , Id: 2, Name: 小刚, Age: 20, School: 复兴中学, Remark: 优秀班干部 , Id: 3, Name: 吉姆格林, Age: 19, School: 光明小学, Remark: 吉姆做了汽车公司经理 , Id: 4, Name: 李雷, Age: 25, School: 复兴中学, Remark: 不老实的家伙 , Id: 5, Name: 韩梅梅, Age: 22, School: 光明小学, Remark: 在一起 , , rowtemplate: Id: 0, Name: , Age: , School: , Remark: ;/ViewModelvar vue = new Vue( el: *app, data: data, methods: Save: function (event) if (this.rowtemplate.Id = 0) /设置当前新增行的Idthis.rowtemplate.Id = this.rows.length + 1;this.rows.push(this.rowtemplate); /还原模板this.rowtemplate = Id: 0, Name: , Age: , School: , Remark: , Delete: function (id) /实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理。for (var i=0;ithis.rows.length;i+)if (this.rowsi.Id = id) this.rows.splice(i, 1);break; , Edit: function (row) this.rowtemplate = row; );*17：实例二：带分页的表格上面的例子用最简单的方式实现了一个增删改查，为了进一步体验我们Vue的神奇，博主更进了一步，用Vue去做了一个客户端分页的表格功能。其实代码量并不大。实现效果：插入动态图：这里做出一下修改，参照于原帖中*位读者的留言，给出一种更优的解决方案。案例代码：Documenttabletheadtrth te*t-align:center; 用户管理用户名年龄毕业学校备注=(curpage-1)*pagesize&inde*row.Namerow.Agerow.Schoolrow.Remark上一页上一页pagepage下一页下一页/Modelvar data = rows: Id: 1, Name: 李先生, Age: 18, School: 光明小学, Remark: 三好学生 , Id: 2, Name: 小刚, Age: 20, School: 复兴中学, Remark: 优秀班干部 , Id: 3, Name: 吉姆格林, Age: 19, School: 光明小学, Remark: 吉姆做了汽车公司经理 , Id: 4, Name: 李雷, Age: 25, School: 复兴中学, Remark: 不老实的家伙 , Id: 5, Name: 韩梅梅, Age: 22, School: 光明小学, Remark: 在一起 , Id: 1, Name: 李先生, Age: 18, School: 光明小学, Remark: 三好学生 , Id: 2, Name: 小刚, Age: 20, School: 复兴中学, Remark: 优秀班干部 , Id: 3, Name: 吉姆格林, Age: 19, School: 光明小学, Remark: 吉姆做了汽车公司经理 , Id: 4, Name: 李雷, Age: 25, School: 复兴中学, R