VUE第三天学习

内容：生命周期、vue-cli脚手架、组件传值 购物车bug解决： watch中改变了每一个商品的选中状态，此时，计算属性也会重新执行，造成数据冲突。 解决办法：把监听去掉，给全选增加一个单独的点击事件 checkAll(){ this.goods.map(d=>{ d.checked = !this.allChecked }) } 一、生命周期 vue实例从创建、挂载、更新、销毁的一个完整的过程叫生命周期，在整个vue的生命周期中，有一些特殊的方法叫钩子函数。 (1)页面渲染期 beforeCreate vue实例创建之前 created vue实例创建完成 beforeMount 挂载之前（准备好html结构，并不会解析vue语法） mounted 挂载完成（*****），一般在此生命周期函数中执行ajax请求 (2)页面更新期 beforeUpdate 数据更新之前 updated 数据更新完成 (3)页面销毁期 beforeDestroy 销毁之前 destroyed 销毁完成 二、vue-cli脚手架 2.0 （主讲） 3.0 需要有Node环境，自行下载nodejs进行安装即可 1.安装webpack npm i webpack -g 2.安装vue-cli npm i vue-cli -g 3.初始化项目 vue init webpack 项目名称 注意：项目名称不能包含中和空格，并且不能包含vue全家桶中的关键字（vuex、vue-router） vue init webpack mydemo [图片上传失败...(image-466985-1581578757189)] 4.运行项目 npm run dev 或者npm start 5.项目目录结构 mydemo build webpack目录，进行项目打包等 config 项目配置目录 node_modules 项目依赖目录 src 项目程序目录（主战场） main.js 项目启动文件 App.vue 根组件 assets 静态资源 components 组件目录 static 静态资源 .babelrc babel配置文件 .editorconfig 代码规范配置文件 .gitignore git忽略文件的配置文件 .postcssrc.js postcss插件配置文件 index.html 首页 package.json 依赖配置文件 README.md 说明 项目运行流程： index.html > src/main.js > App.vue > components/HelloWorld.vue 三、vue-tools工具 1.谷歌浏览器开启开发者模式 2.安装谷歌访问助手 (1)拿到谷歌访问助手压缩包后进行解压 (2)在谷歌浏览器右侧三个点按钮处点击后找到扩展程序，点击加载已解压扩展程序，选择解压后的谷歌访问助手文件夹即可 3.安装vue-devtools 在谷歌应用商店中搜索vue，搜索到之后添加到chrome即可使用。 四、组件传值【重点】 1.父子组件传值 第一步：在父组件上，使用子组件时，通过自定义属性来给子组件传递数据 第二步：在子组件上，需要主动的接收数据，通过props来接收（props的数据类型是一个数组，数据与数据之间用逗号隔开） 父组件： 子组件： 2.子父组件传值 第一步：子组件执行自己的函数来主动发送数据 第二步：在父组件使用子组件时，需要传递一个自定义事件，方便子组件来出发这个自定义事件对应的函数 第三步：子组件中通过this.$emit("自定义事件名")来触发父组件中的函数，来进行数据的传递。 3.兄弟组件传值 第一步：设置一个公用的容器，来进行数据的传递 /src/main.js Vue.prototype.bus = new Vue(); 第二步：在需要发送数据的组件中通过这个公用的容器来进行数据的发送。 this.bus.$emit("变量名",变量值) 第三步：在其他兄弟组件中接收兄弟组件传递的数据 mounted(){ this.bus.$on("变量名",(形参)=>{...}) } 第一个兄弟组件： 其他兄弟组件： 作业： 用vue-cli脚手架创建后台管理系统页面，并且用bootstrap写一个表格页面和表单页面。

本文章由javascript技术分享原创和收集