《vue入门与实战》由会员分享，可在线阅读，更多相关《vue入门与实战（188页珍藏版）》请在金锄头文库上搜索。
1、vue入门与实战目录vue入门与实战1前言2第一部分vue基础3vue是什么？3Vue安装5第一种通过引入本地文件5第二种通过使用CDN6第三种NPM方法7第一个vue页面15基本语法17双大括号表达式17v-text指令19v-html指令20v-bind指令21V-on指令25V-model指令32V-for指令41V-if指令43V-else指令44v-else-if45V-show指令46V-pre指令48v-cloak指令49V-once指令50自定义指令52methods属性55computed计算属性57watch监听属性59组件62全局组件63局部组件64Prop属性66vue
2、路由:vue-router73安装73单页面应用实例74Vue-router补充78生命周期函数（钩子函数）82第二部分， vue实战开发90概述90运用vue脚手架搭建开发环境90一， 什么是vue脚手架90二， 安装脚手架之前准备工作90三， 用vue-cli创建项目92项目文件的介绍97介绍实践项目的功能以及需要了解的技术98开始项目开发100首页制作100路由配置105报表界面的制作112表格界面的制作126表格的增删除改查142前言最近这几年企业推崇用框架来做前端开发，那为什么企业喜欢用框架来开发项目了，这个问题简单，首先就是减少造轮子的想法，能够快速的开发一款web应用对于公司来说
3、都是非常愿意看到的，另外就是使用前端框架的组件功能，只要组件功能强大，什么样的项目都能够开发。简单来说企业就是为了节约时间与成本。那使用什么样的框架了纵观网络大数据，其中用得最多，最火的就属于Angular,React,Vue。至于企业到底选用那个框架，那就和企业的项目类型，项目大小以及技术选型等有关了。由于我们的项目类型，以及公司技术构成等因素，我所在公司选择的前端框架为vue。虽然我做前端已经很多年了，但vue这些前端框架也是这几年才兴起的，所以说我也是从小白到入门到精通。为了让像我以前一样有传统html+js+css技术，而没有接触过vue这类框架的小白能快速入门并能在项目中运用起来，我
4、把vue的基础以及我的实践经验进行整理和总结，能让读者的入门之路没有那么痛苦。该书主要包括两部分，一部门讲解vue基本知识，第二部分，结合企业开发的实际项目，利用脚手架（vue-cli）工具搭建和开发一个vue项目。第一部分vue基础vue是什么？Vue是一套用于构建用户界面的渐进式框架，是一个JavaScript MVVM库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。请注意上文加粗的部份，首先对vue“渐进式框架”理解:每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使
5、用方式。使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。那我们在刚学习时，没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展。 同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把Vue很方便的与其它已有项目或框架相结合。再次我们对“MVVM”进行理解：说起这个MVVM框架，就不得不说MVC框架。在传统开发中，将整个前端页面分成View（视图-V），Controller（控件-C），Modal（数据源-M），即MVC
6、框架。view(视图)上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染放在View当中，但在实际运用上却存在一个问题：那就是MVC框架允许View和Model直接进行通信！换句话说，View和Model之间随着业务量的不断庞大，会出现蜘蛛网一样难以处理的依赖关系，完全背离了开发所应该遵循的“开放封闭原则”。面对这个问题，MVVM框架就出现了，MVVM分别指View，Model，View-Model，View通过View-Model的DOM Listeners将事件绑定到M
7、odel上，而Model则通过Data Bindings来管理View中的数据，这样一来View和model之间就不用直接通信，而通过View-Model从中起到一个连接桥的作用。简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。 Vue安装第一种通过引入本地文件我们可以在 Vue.js 的官网上直接下载 vue.js 并用标签引入，vue会被注册为一个全局变量。下载方法：1，访问vue.js官网。”https:/cn.vuejs.org/”。2,点击右侧。3， 点击右侧。4， 选择弹出框里的“Download ZIP”。5，
8、 下载完成后解压到本地。示例：注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!第二种通过使用CDNCDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。以下是三个CDN的地址：Staticfile CDN（国内）:https:/cdn.staticfile.org/vue/2.2.2/vue.min.jsunpkg：https:/ 会保持和 npm 发布的最新的
9、版本一致。cdnjs:https:/ CDN，国内还没发现哪一家比较好示例：对于制作原型或学习，你可以这样使用最新版本：对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：第三种NPM方法npm全称为Node Package Manager，是一个基于Node.js的包管理器在用 Vue 构建大型应用时推荐使用 NPM 安装。安装步骤：1. 安装node.js和npm：Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js。从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。安装完成后
10、，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。2， 安装vue-cli脚手架构建工具：Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。进入到cmd命令框输入npm install -global vue-cli 。这个安装还是要几分钟，如果你的网络条件不是很好，可以使用另外一个安装命令：cnpm install -global vue-cli （由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue
11、-cli）。安装成功后将显示如下界面：3，用vue-cli创建项目：一般在传统项目开始中比如用纯的html/css/js开发时，一般会在本地手动创建文件目录，而用脚手架创建项目时就不需要这样，只需要建立一个存放项目的文件夹，然后在命令提示符窗口，cd目录到文件文件夹下，输入：vue init webpack 项目名称，然后回车就可以了。如：我们在本地建立一个文件夹“vue-obj”,然打开“命令提示符”窗口，一直cd到“vue-obj”文件夹下，输入：“vue init webpack 项目名称”。（项目名称：指的就是我们自己命名的项目名）如下图：按下回车后，它会显示一些提示信息，如下图：它的
12、意思是项目名称叫：vue-obj,如果你确定取这个项目名，按下enter即可。接下来会出现下图提示。意思是叫项目的描述信息，直接按钮enter即可。接下来又显示下图提示：它显示的是作者信息，也直接enter。然后又显示如下图提示：意思是叫你确定是否安装vue-router（路由），这个根据项目自身情况来选择。我们这里选择输入：n。我们后面用到路由时再安装。接下来又提示下图：意思是让你确定是否安装代码校验。eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。如果安装了,你写的js代码风格有问题都会给你打印出来，反正我不喜欢。这个看个人了。我一般选择n。接下来又显示
13、如下图：意思是让你确定是否设置单元测试，一般也是选择n。接下来又显示下图：意思是让你是否安装e2e自动化测试，一般也是输入n。接下来就开始创建项目了。创建项目还是要花几分钟，当然还是和你网络有关系，创建成功后将显示下图提示：接下来我们就可以按照上图画后的地方，依次输入命令：cd vue-obj 回车npm run dev 回车如果出现下图所示：说明项目创建成功。我们在浏览器窗口输入： “http:/localhost:8080” 如果显示如下界面，那恭喜你，项目创建并启动成功了！提示：不推荐新手直接使用NPM方式，尤其是在你还不熟悉基于 Node.js 的构建工具时。因此本文示例代码所用vue都是通过方式来引入的。第一个vue页面 很多编程语言的第一页面都喜欢用helloword来宣告诞生，我们也不例外就用hello vue.js来个出场白，我们看下面第一个页面代码。示例代码： Title message new Vue( el: #app, /
