线上11班项目课件vue进阶

1、学习目标熟练掌握Vue组件的编写掌握组件间通信方式掌握vue-router使用了解wck使用掌握使用vue-cli搭建脚手架掌握axios工具使用1. 组件化在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会 有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独 立的组件，然后在不同页面就可以共享这些组件，避免重复开发。通常一个应用会以一棵嵌套的组件树的形式来组织：例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航件。、博文之类的组为了能在模板中使用，这些组件必须先以便 Vue

2、 能够识别。这里有两种组件的类型：全局和局部。1.1 定义全局组件我们可以使用Vue的component来定义一个全局组件。/ 定义全局组件，两个参数：1.组件名称。2.组件参数Vponent(counter,template:我已经被点击了 count, 次了组件其实也是一个Vue实例，因此它在也会接收：data、methods、生命周期函数等不同的是组件与页面的元素绑定，否则就无法复用了，因此没有el属性。但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。data的定义方式比较特殊

3、，必须是一个函数。1.2 组件的复用定义好的组件，可以任意复用多次：你会发现每个组件互不干扰，都有组件的data属性必须是函数！的count值。怎么实现的？当我们定义这个 组件时，它的data 并不是像这样直接提供一个对象：data: count: 0取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的的拷贝：data: function () return count: 01.3 局部一旦全局，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部。我们先在外部定义一个对象，结构与创建组件时

4、传递的第二个参数一致：data()return count:0)var app = new Vue( el:#app)然后在Vue中使用它：components就是当前vue对象子组件集合。其key就是子组件名称其值就是组件对象的属性效果与刚才的全局 是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用1.4 组件通信通常一个单页应用会以一棵嵌套的组件树的形式来组织。各个组件之间以嵌套的 组合在一起，那么这个时候不可避免的会有组件间通信的需求。1.4.1 父组件向子组件传递数据比如我们有一个子组件：这个子组件中要使用msg属性渲染页面，但是 并没有msg属性通过props来接

5、收父组件属性，名为msg父组件使用子组件，同时传递msg属性：个人简介： Vponent(intro,/ 直接使用props接收到的属性来渲染页面Vponent(intro,/ 直接使用props接收到的属性来渲染页面template:msg,props:msg / 通过props来接收一个父组件传递的属性)var app = new Vue( el:#app, components:counter:counter / 将定义的对象 为组件)const counter = template:我已经被点击了 count 次了, data()return count:0;1.4.2 复杂数据传递我

6、们定义一个子组件：这个子组件可以对 users进行迭代，并输出到页面。但是组件中并未定义users属性。通过props来定义需要从父组件中接收的属性users：是要接收的属性名称type：限定父组件传递来的必须是数组，否则报错default：默认值我们在父组件中使用它：用户列表：const userList = template:user.id : ,props: / 通过props来接收父组件传递来的属性users:/ 这里定义users属性type:Array,/ 要求必须是Array类型default: / 如果父组件没有传，那么给定默认值是template:msg,

7、props:msg / 通过props来接收一个父组件传递的属性)var app = new Vue( el:#app)1.4.3 子组件向父组件的通信观察如下案例：子组件接收父组件的num属性子组件定义点击按钮，点击后对num进行加或减操作子组件接收到父组件属性后，默认是不 修改的。既然只有父组件能修改，那么加和减的操作一定是放在父组件：var app = new Vue( el:#app, data:num:0,methods: / 父组件中定义操作num的 状 治愈人数: numVponent(counter, / 子组件，定义了两个按钮，点击数字num会加或减template:增加 减

8、少 ,props:num/ count是从父组件获取的。)var app = new Vue( el:#app, data:num:0)var app = new Vue( el:#app, components:userList / 当key和value一样时，可以只写一个,data: users:id:1, name: 张三,id:2, name: 李四,id:3, name: ,)但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？ 我们可以通过v-on指令将父组件的函数绑定到子组件上：然后，当子组件中按钮被点击时，调用绑定的函数：vue提供了一个内置的this.$

9、emit函数，用来调用父组件绑定的函数2. vue-router现在我们来实现这样一个功能：一个页面，包含登录和 ，点击不同按钮，实现登录和 页切换2.1 编写父组件登录登录页/ 页2.2 编写子组件Vponent(counter, template:增加 减少 , props:count, methods:plus()this.$emit(inc);,reduce() this.$emit(dec);)num: numincrement() this.num+;,decrement() this.num-;)2.3 父组件登录2.4我们期待的是，当点击登录或 按钮，分别显示登录页或 页，而不

10、是一起显示。但是，如何才能动态加载组件，实现组件切换呢？虽然使用原生的Html5和JS也能实现，但是 推荐我们使用vue-router模块。2.5 vue-router简介以及安装使用vue-router和vue可以非常方便的实现 复杂单页应用的动态 功能。官网：使用npm安装： npm install vue-router -save在index.html中引入依赖：2.6 快速入门新建vue-router对象，并且指定 规则：const registerForm = template: 页 用 户 名： 密  码： 确认 ： const loginF

11、orm = template:登录页 用户名： 创建VueRouter对象，并指定 参数routes： 规则的数组，可以指定多个对象，每个对象是一条 规则，包含以下属性：path： 的路径component：组件名称在父组件中引入router对象：页面跳转 ：通过 来指定一个 ，当 的路径匹配时，vue-router会自动把对应组件放到位置进行渲染通过 指定一个跳转 ，当点击时，会触发vue-router的 功能，路径中的hash值会随之改变3.w ckW ck 是一个前端 的打包工具，它可以将js、image、css等 当成一个模块进行打包。中文 ：官网给出的解释：登录 var vm = n

12、ew Vue( el:#app,components:/ 登录和 组件loginForm, registerForm,router / 上面定义的router对象)/ 创建VueRouter对象const router = new VueRouter( routes: / 编写 规则path:/login, / 请求路径component:loginForm / 组件名称,path:/register,component:registerForm,)本质上，w ck 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当w ck 处理应用程序时，它会递归

13、地构建一个依赖 图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。为什么需要打包？将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高 效率。将ES6的高级语法进行转换编译，以兼容老版本的浏览器。将代码打包的同时进行 ，提高代码的安全性。3.1 安装w ck支持全局安装和本地安装， 推荐是本地安装，我们按照 的来。安装最新版本w ck，输入命令： npm install -save-dev w ckw ck 4+ 版本，你还需要安装 CLI ，输入命令： npm install w ck w ck-cli -sa

14、ve-dev3.2 概念学习W ck，你需要先理解四个 概念：(entry)w ck打包的起点，可以有一个或多个，一般是js文件。w ck会从起点文件开始，寻找起点直接或间接依赖的其它所有的依赖， JS、CSS、图片 等，作为将来打包的原始数据输出(output)出口一般包含两个属性：path和lename。用来告诉w ck打包的目标文件夹，以及文件的名称。目的地也可以有多个。加载器（loader）w ck本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为w ck能处理的有效模块，最后利用w ck的打包能力去处理。插

15、件(plugins)插件可以扩展w ck的功能，让w ck不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。3.3 w ck配置接下来，我们编写一个w ck的配置，来指定一些打包的配置项。配置文件的名称，默认就是w ck.cong.js。配置文件中就是要指定上面说的四个 概念， 、出口、加载器、插件。不过，加载器和插件是可选的。我们先编写 和出口3.3.1 entryw ck打包的起点，可以有一个或多个，一般是js文件。现在思考一下我们有没有一个 ？貌似没有，我们所有的东西都集中在index.html。然后把原来index.html中的js代码全部移动到inde

16、x.js中/ 使用es6的语法导入js模块原来的index.html中引入了很多其它js，在这里我们使用es6的import语法进行导入。注意，要使用import，就需要在login.js和register.js中添加export导出语句：register.js:const registerForm = template: 页 用 户 名： 密  码： 确认 ： export default registerForm;vue-router使用模块化加载后，必须增加一句：Vue.use(VueRouter)这样，index.js就成了我们整个配置的 。我们

17、在w ck.cong.js中添加以下内容：const loginForm= template: 登陆页用户名：密 码：,export default loginForm;import Vue from ./node_modules/vue/dist/vue;import VueRouter from ./node_modules/vue-router/dist/vue-router; import loginForm from ./user/login;import registerForm from ./user/register;Vue.use(VueRouter);/ 创建vu

18、e对象const router = new VueRouter( routes: / 编写 规则/ path: 请求路径；component：组件名称path: /login, component: loginForm,path: /register, component: registerForm);var vm = new Vue( el: #app, components: loginForm, registerForm,router);3.3.2 出口output出口，就是输出的目的地。一般我们会用一个dist目录，作为打包输出的文件夹. 然后，编写w ck.cong.js，添加出口配

19、置：3.3.3 测试打包在 台输入以下命令：3.3.4 测试运行在index.html中引入刚刚生成的build.js文件，4. vue-cliTitle登录 npx w ck -config w ck.config.jsmodule.exports=entry:./src/index.js, /指定打包的 文件output:/ path: 输出的目录， dirname是相对于w ck.config.js配置文件的绝对路径path : dirname+/dist,filename:build.js /输出的js文件名module.exports=entry:./src/index.js, /指

20、定打包的 文件4.1与安装在开发中，需要打包的东西不止是js、css、html。还有一一去添加就会比较麻烦。的东西要处理，这些插件和加载器如果我们幸好，vue提供了一个快速搭建vue项目的脚手架：vue-cli使用它能快速的构建一个web工程模板。官网：安装命令： npm install -g vue-cli4.2 快速上手ck hello-vuevue init w4.3 单文件组件需要注意的是，我们看到有一类后缀名为.vue的文件，我们称为单文件组件每一个.vue文件，就是一个的vue组件。类似于我们刚才写的login.js和register.js只不过，我们在js中编写 html模板和样

21、式非常的不友好，而且没有语法提示而单文件组件中包含三部分内容：。template：模板，支持html语法和提示script：js，这里编写的就是vue的组件对象，还可以有data()等style：样式，支持CSS语法和提示每个组件都有4.4 运行的npm run dev 或者 npm start5. 异步工具axios异步数据，自然是通过ajax，大家首先想起的肯定是jQuery。但jQuery与MVVM的思想不吻合，而且ajax只是jQuery的一小部分。因此不可能为了发起ajax请求而去5.1 入门这么大的一个库。具体参考：axios的Get请求语法：axios.get(/api/user/get?id=0) / 请求路径和请求参数拼接.then(function(res)/回调函数).catch(function()/ 失败回调函数)/ 参数较多时，可以通过params来传递参数axios的POST请求语法：比如新增一个用户axios.post(/user,name:张三, age:21).then(function(res).catch(function(error)注意，POST请求传参，不需要像GET请求那样定义一个对象，在对象的params参数中传参。post()的第二个参数对象，就是