做asp网站需要的实验报告单,免费网页代理的推荐,品牌设计有哪些东西,常州的网站建设vue2学习笔记#xff08;1/2#xff09;
vue2学习笔记#xff08;2/2#xff09; 文章目录 1. 初始化脚手架2. 分析脚手架render函数文件结构图示及说明main.jsindex.htmlApp.vueSchool.vueStudent.vue 关于不同版本的Vue修改默认配置vue.config.js配置文件 3. ref属…vue2学习笔记1/2
vue2学习笔记2/2 文章目录 1. 初始化脚手架2. 分析脚手架render函数文件结构图示及说明main.jsindex.htmlApp.vueSchool.vueStudent.vue 关于不同版本的Vue修改默认配置vue.config.js配置文件 3. ref属性4. props配置5. mixin混入局部混入全局混入 6. 插件定义插件应用插件 7. scoped样式8. Todo-list 案例组件化编码流程(通用)案例代码main.jsApp.vueMyHeader.vueMyList.vueMyItem.vue MyFooter.vue 9. 浏览器本地缓存localStoragesessionStorage 10. 组件自定义事件案例代码main.jsApp.vueStudent.vueSchool.vue 11. 全局事件总线图解案例代码main.jsApp.vueSchool.vueStudent.vue 12. 消息订阅与发布案例代码main.jsApp.vueSchool.vueStudent.vue 13. $nextTick案例代码MyItem.vue 14. 过渡与动画案例代码Test.vue(拿动画写) Test2.vue(拿过渡写) Test3.vue(第三方动画) 15. 配置代理服务器方法一方法二案例代码main.jsApp.vuevue.config.js 16. github搜索案例案例代码main.jsApp.vueSearch.vueList.vue 17. vue-resourcemain.jsSearch.vue 18. 插槽1. 默认插槽App.vueCategory.vue 2. 具名插槽App.vueCategory.vue 3. 作用域插槽App.vueCategory.vue 19. Vuex1. vuex 是什么1. 什么时候使用 Vuex2. Vuex 工作原理图 2. 搭建vuex环境3. 基本使用4. 求和案例_vuex版main.jsstore/index.jsApp.vueCount.vue 5. mapState与mapGettersmapMutations与mapActions[简写]main.jsstore/index.jsApp.vueCount.vue 6. 模块化命名空间main.jsstore/index.jsstore/count.jsstore/person.jsApp.vueCount.vuePerson.vue 20. 路由路由相关理解基本使用main.jsApp.vuerouter/index.jsAbout.vueHome.vue 几个注意点嵌套路由案例代码public/index.htmlmain.jsrouter/index.jsapp.vuepages/Home.vuepages/News.vuepages/Message.vuepages/About.vuecomponents/Banner.vue 命名路由路由的query参数路由的params参数路由的props配置router-link的replace属性编程式路由导航缓存路由组件两个新的生命周期钩子路由守卫全局(前置/后置)路由守卫独享路由守卫组件内路由守卫 路由懒加载路由器的两种工作模式打包部署刷新页面404的问题使用nginx 21. UI 组件库移动端常用 UI 组件库PC 端常用 UI 组件库 22. 配置创建jsconfig.json文件 23. axios1、安装axios2、创建ajax.js3、暴露请求接口方法4、使用 24. MockJs1、安装mockJs2、编写mockServer.js文件3、创建mockAjax.js4、暴露请求接口方法5、使用 25. QRCode26. vue-lazyload 1. 初始化脚手架 说明 Vue 脚手架是 Vue 官方提供的标准化开发工具开发平台。最新的版本是 4.x。文档: https://cli.vuejs.org/zh/。 具体步骤 第一步仅第一次执行全局安装vue/cli。
npm install -g vue/cli第二步切换到你要创建项目的目录然后使用命令创建项目
vue create 项目名第三步启动项目
npm run serve 备注 如出现下载缓慢请配置 npm 淘宝镜像npm config set registry https://registry.npm.taobao.org Vue 脚手架隐藏了所有 webpack 相关的配置若想查看具体的 webpakc 配置请执行vue inspect output.js ,可以在该文件中看到所有的配置。 2. 分析脚手架render函数
文件结构图示及说明 ├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json包版本控制文件main.js
/* 该文件是整个项目的入口文件(当执行npm run serve的时候,就会从当前目录下的src目录中找到main.js)
*/
//引入Vue此处引入的vue是不带模板编译器的版本
import Vue from vue//引入App组件它是所有组件的父组件
import App from ./App.vue//关闭vue的生产提示
Vue.config.productionTip false/* 关于不同版本的Vue1.vue.js与vue.runtime.xxx.js的区别(1).vue.js是完整版的Vue包含核心功能模板解析器。(2).vue.runtime.xxx.js是运行版的Vue只包含核心功能没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器所以不能使用template配置项需要使用render函数接收到的createElement函数去指定具体内容。
*///创建Vue实例对象---vm
new Vue({el:#app, // 也可以使用vm.$mount(#app)//render函数完成了这个功能将App组件放入容器中render: h h(App),// render:q q(h1,你好啊)/* 完整写法render(createElement){return createElement(h1,你好啊);}*/// template:h1你好啊/h1, // 因为引入的vue没有模板解析器版本的所以不能使用template配置项// components:{App},
})index.html
!DOCTYPE html
html langheadmeta charsetutf-8!-- 针对IE浏览器的一个特殊配置含义是让IE浏览器以最高的渲染级别渲染页面 --meta http-equivX-UA-Compatible contentIEedge!-- 开启移动端的理想视口 --meta nameviewport contentwidthdevice-width,initial-scale1.0!-- 配置页签图标 --link relicon href% BASE_URL %favicon.ico !--如果要引入public下的资源使用该写法--!-- 引入第三方样式 --link relstylesheet href% BASE_URL %css/bootstrap.css!-- 配置网页标题 --title硅谷系统/title/headbody!-- 当浏览器不支持js时noscript中的元素就会被渲染 --noscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscript!-- 容器 --div idapp/div!-- built files will be auto injected --/body
/html
App.vue
templatedivimg src./assets/logo.png altlogoSchool/SchoolStudent/Student/div
/templatescript//引入组件import School from ./components/Schoolimport Student from ./components/Studentexport default {name:App,components:{School,Student}}
/script
School.vue
templatediv classdemoh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button /div
/templatescriptexport default {name:School,data(){return {name:尚硅谷,address:北京昌平}},methods: {showName(){alert(this.name)}},}
/scriptstyle.demo{background-color: orange;}
/styleStudent.vue
templatedivh2学生姓名{{name}}/h2h2学生年龄{{age}}/h2/div
/templatescriptexport default {name:Student,data(){return {name:张三,age:18}}}
/script关于不同版本的Vue vue.js与vue.runtime.xxx.js的区别 vue.js是完整版的Vue包含核心功能 模板解析器。vue.runtime.xxx.js是运行版的Vue只包含核心功能没有模板解析器。 因为vue.runtime.xxx.js没有模板解析器所以不能使用template这个配置项需要使用render函数接收到的createElement函数去指定具体内容。
修改默认配置
vue.config.js配置文件
加载。 使用vue inspect output.js可以将默认的webpack配置输出到output.js来查看到Vue脚手架的默认配置。 在package.json同级目录下创建vue.config.js配置文件可以对脚手架进行个性化定制详情见https://cli.vuejs.org/zh点击配置参考 vue.config.js 是一个可选的配置文件如果项目的 (和 package.json 同级的) 根目录中存在这个文件那么它会被 vue/cli-service 自动加载。 // 如
module.exports {pages: {index: {// page 的入口entry: src/main.js,}},lintOnSave:false, // 关闭保存时语法检查而报错
}3. ref属性
被用来给元素或子组件注册引用信息id的替代者应用在html标签上获取的是真实DOM元素应用在组件标签上是组件实例对象vc使用方式 打标识h1 refxxx...../h1或 School refxxx/School获取this.$refs.xxx 如果有多个元素都使用了相同名称的ref比如ref‘xxx’会被放入数组中即可以通过$refs[‘xxx’][索引]来访问比如$refs[‘xxx’][0]。 App.vue templatedivh1 v-textmsg reftitle/h1button refbtn clickshowDOM点我输出上方的DOM元素/buttonSchool refsch//div
/templatescript//引入School组件import School from ./components/Schoolexport default {name:App,components:{School},data() {return {msg:欢迎学习Vue}},methods: {showDOM(){console.log(this.$refs.title) //真实DOM元素console.log(this.$refs.btn) //真实DOM元素console.log(this.$refs.sch) //School组件的实例对象vc// 这里拿到vc对象后可以直接调用vc组件实例对象中的方法// 访问vc组件实例对象中的属性,还可以拿到vc组件的$el属性来操作dom}},}
/script
4. props配置
1.功能让组件接收外部传过来的数据
2.传递数据Demo namexxx :x123/
3.接收数据
1.第一种方式只接收props:[name]
2.第二种方式限制类型props:{name:String}
3.第三种方式限制类型、限制必要性、指定默认值
props:{name:{type:String, //类型required:true, //必要性default:老王 //默认值}
}备注props是只读的Vue底层会监测你对props的修改如果进行了修改就会发出警告若业务需求确实需要修改那么请复制props的内容到data中一份然后去修改data中的数据。不建议在子组件中修改由props接收到的属性哪怕是修改使用props接收到的对象中的属性虽然可以实现功能但不建议这么改虽然这种情况没有报出警告因为vue这里的监测只是浅层次的监测。 示例 App.vue
templatedivStudent name李四 sex女 :age18//div
/templatescriptimport Student from ./components/Studentexport default {name:App,components:{Student}}
/script
Student.vue
templatedivh1{{msg}}/h1h2学生姓名{{name}}/h2h2学生性别{{sex}}/h2h2学生年龄{{myAge1}}/h2button clickupdateAge尝试修改收到的年龄/button/div
/templatescriptexport default {name:Student,data() {console.log(this)return {msg:我是一个尚硅谷的学生,myAge:this.age // 因为props接收的数据优先于data,所以这里可以直接使用} // 避免直接修改传入的prop值,如果需要改,最好使用data接收props中的值,或使用计算属性// 因为当父组件重新渲染时,这个传入的prop值又会变掉,就会覆盖掉子组件修改的这个值了// (也就是改了相当于待会父组件一刷新又被覆盖了)// 针对这种情况,基础的做法:让父类提供一个可以修改值的函数,将此函数传给子组件,子组件// 调用此函数修改值},methods: {updateAge(){this.myAge}},//简单声明接收接收的props优先于data、methods、computed放到组件实例对象(vc)上// 所以props已经定义了那么在其它配置项去定义同名的,会有警告// props:[name,age,sex] //接收的同时对数据进行类型限制/* props:{name:String,age:Number,sex:String} *///接收的同时对数据进行类型限制默认值的指定必要性的限制props:{name:{type:String, //name的类型是字符串required:true, //name是必要的},age:{type:Number,default:99 //默认值},sex:{type:String,required:true}}}
/script5. mixin混入 功能可以把多个组件共用的配置提取成一个混入对象 使用方式 第一步定义混合 {data(){....},methods:{....}....}第二步使用混入 全局混入Vue.mixin(xxx) 局部混入mixins:[xxx] 局部混入
在main.js同级目录下创建mixin.js
export const hunhe {methods: {showName(){alert(this.name)}},mounted() {console.log(你好啊)},
}
export const hunhe2 {data() {return {x:100,y:200}},
}School.vue
templatedivh2 clickshowName学校名称{{name}}/h2h2学校地址{{address}}/h2/div
/templatescript//引入一个hunheimport {hunhe,hunhe2} from ../mixinexport default {name:School,data() {return {name:尚硅谷,address:北京,x:666}},mixins:[hunhe,hunhe2], // 当混入的配置于组件中的data或method有重复情况时,以组件中的为准} // 当混入的配置中配置了mounted等生命周期函数时混入配置与组件的mounted都会生效
/scriptStudent.vue
templatedivh2 clickshowName学生姓名{{name}}/h2h2学生性别{{sex}}/h2/div
/templatescriptimport {hunhe,hunhe2} from ../mixinexport default {name:Student,data() {return {name:张三,sex:男}},mixins:[hunhe,hunhe2]}
/script全局混入
修改main.js添加如下代码
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
import {hunhe,hunhe2} from ./mixin // 导入mixin.js
//关闭Vue的生产提示
Vue.config.productionTip falseVue.mixin(hunhe) // 引用全局混入每个组件实例都会混入这些配置包括vm本身
Vue.mixin(hunhe2)//创建vm
new Vue({el:#app,render: h h(App)
})6. 插件
1、功能用于增强Vue
2、本质包含install方法的一个对象install的第一个参数是Vue第二个以后的参数是插件使用者传递的数据。
3、定义插件
对象.install function (Vue, options) {// 1. 添加全局过滤器Vue.filter(....)// 2. 添加全局指令Vue.directive(....)// 3. 配置全局混入(合)Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod function () {...}Vue.prototype.$myProperty xxxx
}4、使用插件Vue.use() 定义插件
// plugin.js
// 下面是通过暴露一个含有install函数的对象的写法也可以暴露一个plugin函数并使用module.exports导出此函数引用用法一样
// 其实只要暴露一个含有install函数的对象或者暴露一个plugin函数使用es6模块化语法暴露或者使用commonjs语法暴露出来都一样
export default {install(Vue,x,y,z){ // 暴露一个对象,对象中必须要有一个install方法接收到的第一个参数是Vue构造函数console.log(x,y,z) // 这个打印输出是在浏览器的console中可以看到也就是说插件的这个方法在创建vm前执行// 那么其实定义插件的意思就是在告诉Vue在创建vm实例之前要做的事情//全局过滤器Vue.filter(mySlice,function(value){return value.slice(0,4)})//定义全局指令Vue.directive(fbind,{//指令与元素成功绑定时一上来bind(element,binding){element.value binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value binding.value}})//定义混入Vue.mixin({data() {return {x:100,y:200}},})//给Vue原型上添加一个方法vm和vc就都能用了Vue.prototype.hello (){alert(你好啊)}}
}应用插件
// main.js//引入Vue
import Vue from vue
//引入App
import App from ./App.vue//引入插件
import plugin from ./plugin//关闭Vue的生产提示
Vue.config.productionTip false//应用使用插件
Vue.use(plugin,1,2,3) // 也可以添加额外的参数,install函数能够收到//创建vm
new Vue({el:#app,render: h h(App)
})7. scoped样式 作用让样式在局部生效防止冲突。 写法style scoped
npm view webpack versions 可查看webpack的版本
npm view less-loader versions 可查看less-loader的版本
npm i less-loader7 安装less-loader的7版本 // Student.vue
templatediv classdemoh2 classtitle学生姓名{{name}}/h2h2 classatguigu学生性别{{sex}}/h2/div
/templatescriptexport default {name:Student,data() {return {name:张三,sex:男}}}
/scriptstyle langless scoped // 如果不写less,默认就是css // scoped表示下面的样式旨在当前vue文件中的模板中生效原理是添加了一个随机的属性值.demo{ // App.vue中一般不写scopedbackground-color: pink;.atguigu{font-size: 40px;}}
/style8. Todo-list 案例 组件化编码流程(通用)
总结TodoList案例
1、组件化编码流程
(1).拆分静态组件组件要按照功能点拆分命名不要与html元素冲突。
(2).实现动态组件考虑好数据的存放位置数据是一个组件在用还是一些组件在用
1).一个组件在用放在组件自身即可。
2). 一些组件在用放在他们共同的父组件上状态提升。
(3).实现交互从绑定事件开始。
2、props适用于
(1).父组件 子组件 通信
(2).子组件 父组件 通信要求父先给子一个函数
3、使用v-model时要切记v-model绑定的值不能是props传过来的值因为props是不可以修改的
4、props传过来的若是对象类型的值修改对象中的属性时Vue不会报错但不推荐这样做。 案例代码 main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//关闭Vue的生产提示
Vue.config.productionTip false//创建vm
new Vue({el:#app,render: h h(App)
})App.vue
templatediv idrootdiv classtodo-containerdiv classtodo-wrapMyHeader :addTodoaddTodo/MyList :todostodos :checkTodocheckTodo :deleteTododeleteTodo/MyFooter :todostodos :checkAllTodocheckAllTodo :clearAllTodoclearAllTodo//div/div/div
/templatescriptimport MyHeader from ./components/MyHeaderimport MyList from ./components/MyListimport MyFooter from ./components/MyFooter.vueexport default {name:App,components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader组件和MyFooter组件都在使用所以放在App中状态提升// todos:[// {id:001,title:抽烟,done:true},// {id:002,title:喝酒,done:false},// {id:003,title:开车,done:true}// ]todos:JSON.parse(localStorage.getItem(todos)) || []}},methods: {//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo){if(todo.id id) todo.done !todo.done})},//删除一个tododeleteTodo(id){this.todos this.todos.filter( todo todo.id ! id )},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo){todo.done done})},//清除所有已经完成的todoclearAllTodo(){this.todos this.todos.filter((todo){return !todo.done})}},watch: {todos:{deep:true,handler(value){localStorage.setItem(todos,JSON.stringify(value))}}}}
/scriptstyle/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
/style
MyHeader.vue
templatediv classtodo-headerinput typetext placeholder请输入你的任务名称按回车键确认 v-modeltitle keyup.enteradd//div
/templatescriptimport {nanoid} from nanoidexport default {name:MyHeader,//接收从App传递过来的addTodoprops:[addTodo],data() {return {//收集用户输入的titletitle:}},methods: {add(){//校验数据if(!this.title.trim()) return alert(输入不能为空)//将用户的输入包装成一个todo对象const todoObj {id:nanoid(),title:this.title,done:false}//通知App组件去添加一个todo对象this.addTodo(todoObj)//清空输入this.title }},}
/scriptstyle scoped/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
/styleMyList.vue
templateul classtodo-mainMyItem v-fortodoObj in todos:keytodoObj.id :todotodoObj :checkTodocheckTodo:deleteTododeleteTodo//ul
/templatescriptimport MyItem from ./MyItemexport default {name:MyList,components:{MyItem},//声明接收App传递过来的数据其中todos是自己用的checkTodo和deleteTodo是给子组件MyItem用的props:[todos,checkTodo,deleteTodo]}
/scriptstyle scoped/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
/styleMyItem.vue
templatelilabelinput typecheckbox :checkedtodo.done changehandleCheck(todo.id)/!-- 如下代码也能实现功能但是不太推荐因为有点违反原则因为修改了props --!-- input typecheckbox v-modeltodo.done/ --span{{todo.title}}/span/labelbutton classbtn btn-danger clickhandleDelete(todo.id)删除/button/li
/templatescriptexport default {name:MyItem,//声明接收todo、checkTodo、deleteTodoprops:[todo,checkTodo,deleteTodo],methods: {//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反this.checkTodo(id)},//删除handleDelete(id){if(confirm(确定删除吗)){//通知App组件将对应的todo对象删除this.deleteTodo(id)}}},}
/scriptstyle scoped/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
/styleMyFooter.vue
templatediv classtodo-footer v-showtotallabel!-- 比较普通的写法,可以实现 --!-- input typecheckbox :checkedisAll changecheckAll/ --!-- v-model还可以使用计算属性,用到input输入类型表单,并且双向绑定,结合计算属性的set/get很好的实现 --input typecheckbox v-modelisAll//labelspanspan已完成{{doneTotal}}/span / 全部{{total}}/spanbutton classbtn btn-danger clickclearAll清除已完成任务/button/div
/templatescriptexport default {name:MyFooter,props:[todos,checkAllTodo,clearAllTodo],computed: {//总数total(){return this.todos.length},//已完成数doneTotal(){//此处使用reduce方法做条件统计/* const x this.todos.reduce((pre,current){console.log(,pre,current)return pre (current.done ? 1 : 0) // pre是上次return的值,current是当前元素},0) *///简写return this.todos.reduce((pre,todo) pre (todo.done ? 1 : 0) ,0)},//控制全选框isAll:{//全选框是否勾选get(){return this.doneTotal this.total this.total 0},//isAll被修改时set被调用set(value){this.checkAllTodo(value)}}},methods: {/* checkAll(e){this.checkAllTodo(e.target.checked)} *///清空所有已完成clearAll(){this.clearAllTodo()}},}
/scriptstyle scoped/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
/style9. 浏览器本地缓存
1、存储内容大小一般支持5MB左右不同浏览器可能还不一样
2、浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3、相关API
1、xxxxxStorage.setItem(key, value); 该方法接受一个键和值作为参数会把键值对添加到存储中如果键名存在则更新其对应的值。
2、 xxxxxStorage.getItem(person);
该方法接受一个键名作为参数返回键名对应的值。
3、 xxxxxStorage.removeItem(key);
该方法接受一个键名作为参数并把该键名从存储中删除。
4、 xxxxxStorage.clear()
该方法会清空存储中的所有数据。
4、 备注
1、SessionStorage存储的内容会随着浏览器窗口关闭而消失。 2、LocalStorage存储的内容需要手动清除才会消失。 3、xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到那么getItem的返回值是null。 4、JSON.parse(null)的结果依然是null。
localStorage
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlelocalStorage/title/headbodyh2localStorage/h2button onclicksaveData()点我保存一个数据/buttonbutton onclickreadData()点我读取一个数据/buttonbutton onclickdeleteData()点我删除一个数据/buttonbutton onclickdeleteAllData()点我清空一个数据/buttonscript typetext/javascript let p {name:张三,age:18}function saveData(){localStorage.setItem(msg,hello!!!)localStorage.setItem(msg2,666)localStorage.setItem(person,JSON.stringify(p))}function readData(){console.log(localStorage.getItem(msg))console.log(localStorage.getItem(msg2))const result localStorage.getItem(person)console.log(JSON.parse(result))// console.log(localStorage.getItem(msg3))}function deleteData(){localStorage.removeItem(msg2)}function deleteAllData(){localStorage.clear()}/script/body
/htmlsessionStorage
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlesessionStorage/title/headbodyh2sessionStorage/h2button onclicksaveData()点我保存一个数据/buttonbutton onclickreadData()点我读取一个数据/buttonbutton onclickdeleteData()点我删除一个数据/buttonbutton onclickdeleteAllData()点我清空一个数据/buttonscript typetext/javascript let p {name:张三,age:18}function saveData(){sessionStorage.setItem(msg,hello!!!)sessionStorage.setItem(msg2,666)sessionStorage.setItem(person,JSON.stringify(p))}function readData(){console.log(sessionStorage.getItem(msg))console.log(sessionStorage.getItem(msg2))const result sessionStorage.getItem(person)console.log(JSON.parse(result))// console.log(sessionStorage.getItem(msg3))}function deleteData(){sessionStorage.removeItem(msg2)}function deleteAllData(){sessionStorage.clear()}/script/body
/html10. 组件自定义事件
1、一种组件间通信的方式适用于子组件 父组件
特别注意比较这种自定义事件与props传值方式的共性和使用上的区别
2、使用场景A是父组件B是子组件B想给A传数据那么就要在A中给B绑定自定义事件事件的回调在A中。
3、绑定自定义事件
1、第一种方式在父组件中Demo atguigutest/或 Demo v-on:atguigutest/
2、 第二种方式在父组件中
Demo refdemo/
......
mounted(){this.$refs.xxx.$on(atguigu,this.test)
}3、若想让自定义事件只能触发一次可以使用once修饰符或$once方法。
4、触发自定义事件this.$emit(atguigu,数据)
5、解绑自定义事件this.$off(atguigu)
6、组件上也可以绑定原生DOM事件需要使用native修饰符。
7、注意通过this.$refs.xxx.$on(atguigu,回调)绑定自定义事件时回调要么配置在methods中要么用箭头函数否则this指向会出问题
案例代码
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//关闭Vue的生产提示
Vue.config.productionTip false//创建vm
new Vue({el:#app,render: h h(App),/* mounted() {setTimeout((){this.$destroy()},3000)}, */
})App.vue
templatediv classapph1{{msg}}学生姓名是:{{studentName}}/h1!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 --School :getSchoolNamegetSchoolName/!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据第一种写法使用或v-on --!-- 这种通过给组件实例vc对象绑定自定义事件的方法与通过props函数(或也可传值)方式相比使用上更加的简洁因为还得用props接收一下 --!-- 给这个Student组件实例对象上绑定了一个名叫atguigu的自定义事件,当触发该Student组件实例对象的atguigu事件时,就会触发父组件定义的getStudentName函数的调用自定义事件后面也可以跟事件修饰符比如atguigu.once,表示只会触发一次 --Student atguigugetStudentName demom1/!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据第二种写法使用ref --!-- 下面组件实例如果写click其实并不会认为是dom原生的点击事件了,而是自定义事件但是如果写成click.native那么就是dom原生的点击事件了,并且将原生click绑定到Student组件最外层的div了--Student refstudent click.nativeshow//div
/templatescript
import Student from ./components/Student
import School from ./components/Schoolexport default {name:App,components:{School,Student},data() {return {msg:你好啊,studentName:}},methods: {getSchoolName(name){console.log(App收到了学校名,name)},getStudentName(name,...params){console.log(App收到了学生名,name,params)this.studentName name},m1(){console.log(demo事件被触发了)},show(){alert(123)}},mounted() {// this.$refs.student拿到的是student组件实例对象// 手动给student组件事件对象绑定名叫atguigu的自定义事件(比起直接在组件标签中直接绑定自定义事件灵活度高)// 并且,因为this.getStudentName函数本身就是挂载到了App组件实例对象身上,所以里面的this就是App组件实例对象this.$refs.student.$on(atguigu,this.getStudentName) /* this.$refs.student.$on(atguigu,function(){console.log(this) // 如果这样写这里的this就是student组件实例对象,而不是当前App组件// 因为就是student组件发生了atguigu事件,触发了这个函数的调用this指向事件源对象}) */this.$refs.student.$on(atguigu,() {console.log(this) // 如果这样写这里的this就是student当前App组件// 因为箭头函数没有自己的this,就往外面找,而mounted是vm的生命周期函数,// this指向App组件实例})//绑定自定义事件一次性// this.$refs.student.$once(atguigu,this.getStudentName) },
}
/scriptstyle scoped.app{background-color: gray;padding: 5px;}
/style
Student.vue
templatediv classstudenth2学生姓名{{name}}/h2h2学生性别{{sex}}/h2h2当前求和为{{number}}/h2button clickadd点我number/buttonbutton clicksendStudentlName把学生名给App/buttonbutton clickunbind解绑atguigu事件/buttonbutton clickdeath销毁当前Student组件的实例(vc)/button/div
/templatescriptexport default {name:Student,data() {return {name:张三,sex:男,number:0}},methods: {add(){console.log(add回调被调用了)this.number},sendStudentlName(){// 触发当前Student组件实例身上的名叫atguigu的自定义事件,并且可以添加其它的参数this.$emit(atguigu,this.name,666,888,900)// this.$emit(demo)// this.$emit(click)},unbind(){//从当前组件实例对象vc中解绑一个自定义事件this.$off(atguigu) //解绑多个自定义事件// this.$off([atguigu,demo]) //解绑所有的自定义事件// this.$off() },death(){// 销毁了当前Student组件的实例销毁后所有Student实例的自定义事件全都不奏效包括响应式也都不奏效了。// 但是请注意原生的绑定dom事件仍然还可用,比如click等当然还响应式也没了// 还有一点要注意,组件实例vc被销毁了,它里面所使用的子组件实例对象也会被销毁this.$destroy() }},}
/scriptstyle langless scoped.student{background-color: pink;padding: 5px;margin-top: 30px;}
/style
School.vue
templatediv classschoolh2学校名称{{name}}/h2h2学校地址{{address}}/h2button clicksendSchoolName把学校名给App/button/div
/templatescriptexport default {name:School,props:[getSchoolName],data() {return {name:尚硅谷,address:北京,}},methods: {sendSchoolName(){this.getSchoolName(this.name)}}}
/scriptstyle scoped.school{background-color: skyblue;padding: 5px;}
/style11. 全局事件总线
图解 1、一种组件间通信的方式适用于任意组件间通信。
2、安装全局事件总线
new Vue({......beforeCreate() {Vue.prototype.$bus this //安装全局事件总线$bus就是当前应用的vm},......
})3、使用事件总线
接收数据A组件想接收数据则在A组件中给$bus绑定自定义事件事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on(xxxx,this.demo)
}提供数据this.$bus.$emit(xxxx,数据)
4、最好在beforeDestroy钩子中用$off去解绑当前组件所用到的事件。
案例代码
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//关闭Vue的生产提示
Vue.config.productionTip false// 自己手动通过组件自定义事件实现事件总线(全局事件总线的本质,就是自定义事件)
const Demo Vue.extend({}) // 返回的是全新定义的VueComponent构造函数
const d new Demo() // 使用VueComponent构造函数,去创建一个组件实例对象
Vue.prototype.$x d // 将组件实例挂载到Vue的原型对象上的自定义属性$x上//创建vm
new Vue({el:#app,render: h h(App),beforeCreate() {Vue.prototype.$bus this //安装全局事件总线将vm挂载到构造函数Vue的原型对象上,这样每个vc都能访问到,包括vm},
})App.vue
templatediv classapph1{{msg}}/h1School/Student//div
/templatescriptimport Student from ./components/Studentimport School from ./components/Schoolexport default {name:App,components:{School,Student},data() {return {msg:你好啊,}}}
/scriptstyle scoped.app{background-color: gray;padding: 5px;}
/styleSchool.vue
templatediv classschoolh2学校名称{{name}}/h2h2学校地址{{address}}/h2/div
/templatescriptexport default {name:School,data() {return {name:尚硅谷,address:北京,}},mounted() {// console.log(School,this)this.$bus.$on(hello,(data){ // 原则其实就是数据在哪对数据的操作就在哪// 当然事件总线的回调函数就应该定义在哪console.log(我是School组件收到了数据,data)})},beforeDestroy() {this.$bus.$off(hello) // 别忘了,在组件销毁的时候,解绑事件。因为this.$bus是全局的!},}
/scriptstyle scoped.school{background-color: skyblue;padding: 5px;}
/styleStudent.vue
templatediv classstudenth2学生姓名{{name}}/h2h2学生性别{{sex}}/h2button clicksendStudentName把学生名给School组件/button/div
/templatescriptexport default {name:Student,data() {return {name:张三,sex:男,}},mounted() {// console.log(Student,this.x)},methods: {sendStudentName(){// 这里触发vm的hello事件后,可以触发所有绑定在hello这个事件的回调函数// 换句话说针对vm的hello事件允许有多个组件对此事件绑定回调this.$bus.$emit(hello,this.name)}},}
/scriptstyle langless scoped.student{background-color: pink;padding: 5px;margin-top: 30px;}
/style
12. 消息订阅与发布
1、一种组件间通信的方式适用于任意组件间通信。
2、 使用步骤 安装pubsubnpm i pubsub-js 引入: import pubsub from pubsub-js 接收数据A组件想接收数据则在A组件中订阅消息订阅的回调留在A组件自身。 methods(){demo(data){......}
}
......
mounted() {this.pid pubsub.subscribe(xxx,this.demo) //订阅消息
}提供数据pubsub.publish(xxx,数据) 最好在beforeDestroy钩子中用PubSub.unsubscribe(pid)去取消订阅。 案例代码
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//关闭Vue的生产提示
Vue.config.productionTip false//创建vm
new Vue({el:#app,render: h h(App),
})App.vue
templatediv classapph1{{msg}}/h1School/Student//div
/templatescriptimport Student from ./components/Studentimport School from ./components/Schoolexport default {name:App,components:{School,Student},data() {return {msg:你好啊,}}}
/scriptstyle scoped.app{background-color: gray;padding: 5px;}
/style
School.vue
templatediv classschoolh2学校名称{{name}}/h2h2学校地址{{address}}/h2/div
/templatescriptimport pubsub from pubsub-jsexport default {name:School,data() {return {name:尚硅谷,address:北京,}},mounted() {// console.log(School,this)/* this.$bus.$on(hello,(data){console.log(我是School组件收到了数据,data)}) */this.pubId pubsub.subscribe(hello,(msgName,data){ //第一个参数是消息的名字,第二个是消息内容console.log(this) // 写成箭头函数,由于箭头函数没有自己的this,就会找到mounted的this// 如果这里不写成箭头函数,那么这里的this是undefined// console.log(有人发布了hello消息hello消息的回调执行了,msgName,data)})},beforeDestroy() {// this.$bus.$off(hello)pubsub.unsubscribe(this.pubId) // 记得取消订阅},}
/scriptstyle scoped.school{background-color: skyblue;padding: 5px;}
/styleStudent.vue
templatediv classstudenth2学生姓名{{name}}/h2h2学生性别{{sex}}/h2button clicksendStudentName把学生名给School组件/button/div
/templatescriptimport pubsub from pubsub-jsexport default {name:Student,data() {return {name:张三,sex:男,}},mounted() {// console.log(Student,this.x)},methods: {sendStudentName(){// this.$bus.$emit(hello,this.name)pubsub.publish(hello,666)}},}
/scriptstyle langless scoped.student{background-color: pink;padding: 5px;margin-top: 30px;}
/style
13. $nextTick
1、语法this.$nextTick(回调函数) 2、作用在下一次 DOM 更新结束后执行其指定的回调。 3、什么时候用当改变数据后要基于更新后的新DOM进行某些操作时要在$nextTick所指定的回调函数中执行。 案例代码
MyItem.vue
templatelilabelinput typecheckbox :checkedtodo.done changehandleCheck(todo.id)/!-- 如下代码也能实现功能但是不太推荐因为有点违反原则因为修改了props --!-- input typecheckbox v-modeltodo.done/ --span v-show!todo.isEdit{{todo.title}}/spaninput typetext v-showtodo.isEdit :valuetodo.title blurhandleBlur(todo,$event)refinputTitle/labelbutton classbtn btn-danger clickhandleDelete(todo.id)删除/buttonbutton v-show!todo.isEdit classbtn btn-edit clickhandleEdit(todo)编辑/button/li
/templatescriptimport pubsub from pubsub-jsexport default {name:MyItem,//声明接收todoprops:[todo],methods: {//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反// this.checkTodo(id)this.$bus.$emit(checkTodo,id)},//删除handleDelete(id){if(confirm(确定删除吗)){//通知App组件将对应的todo对象删除// this.deleteTodo(id)// this.$bus.$emit(deleteTodo,id)pubsub.publish(deleteTodo,id)}},//编辑handleEdit(todo){if(todo.hasOwnProperty(isEdit)){ // 判断是否有todo对象上isEdit属性// 这里修改值后,页面还没有渲染,因此input框还没到页面,所以在下面是操作不到input框的todo.isEdit true }else{// console.log()this.$set(todo,isEdit,true) // 添加一个属性,并为之添加响应式的api}// vue会等到这里的方法块都执行完,才会重新解析模板,所以下面给input框获取焦点,必须要包在$nextTick中// 等到dom重新渲染结束后,再执行获取焦点的操作// (这样也是为了一个效率的问题,方法里面有可能多次修改数据,那不可能每次修改都重新解析一遍吧)this.$nextTick(function(){this.$refs.inputTitle.focus()})},//失去焦点回调真正执行修改逻辑handleBlur(todo,e){todo.isEdit falseif(!e.target.value.trim()) return alert(输入不能为空)this.$bus.$emit(updateTodo,todo.id,e.target.value)}},}
/scriptstyle scoped/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
/style14. 过渡与动画
1、作用在插入、更新或移除 DOM元素时在合适的时候给元素添加样式类名。
2、图示
3、写法
准备好样式 元素进入的样式 v-enter进入的起点 v-enter-active进入过程中 v-enter-to进入的终点 元素离开的样式 v-leave离开的起点 v-leave-active离开过程中 v-leave-to离开的终点 使用transition包裹要过度的元素谁要做动画给谁加并配置name属性 transition namehelloh1 v-showisShow你好啊/h1
/transition备注若有多个元素需要过度则需要使用transition-group且每个元素都要指定key值。
案例代码 Test.vue
(拿动画写)
templatedivbutton clickisShow !isShow显示/隐藏/button!-- 可以指定一个name,如果有指定,则会找{name}-enter-active/{name}-leave-active类名 如果没有指定name,则默认找v-enter-active/v-leave-active类名--!-- 也可以写成 :appeartrue表示一开始就使用动画 --transition namehello appear h1 v-showisShow你好啊/h1/transition/div
/templatescriptexport default {name:Test,data() {return {isShow:true}},}
/scriptstyle scopedh1{background-color: orange;}.hello-enter-active{animation: atguigu 0.5s linear;}.hello-leave-active{animation: atguigu 0.5s linear reverse;}keyframes atguigu {from{transform: translateX(-100%);}to{transform: translateX(0px);}}
/styleTest2.vue
(拿过渡写)
templatedivbutton clickisShow !isShow显示/隐藏/buttontransition-group namehello appearh1 v-show!isShow key1你好啊/h1h1 v-showisShow key2尚硅谷/h1/transition-group/div
/templatescriptexport default {name:Test,data() {return {isShow:true}},}
/scriptstyle scopedh1{background-color: orange;}/* 进入的起点、离开的终点 */.hello-enter,.hello-leave-to{transform: translateX(-100%);}.hello-enter-active,.hello-leave-active{transition: 0.5s linear;}/* 进入的终点、离开的起点 */.hello-enter-to,.hello-leave{transform: translateX(0);}/styleTest3.vue
(第三方动画)
第一步安装
npm install animate.css --save // 官网https://www.npmjs.com/package/animate.css、https://animate.style/第二步引入
import animate.css; // 直接在vue文件中引入即可示例 templatedivbutton clickisShow !isShow显示/隐藏/buttontransition-group appearnameanimate__animated animate__bounce enter-active-classanimate__swingleave-active-classanimate__backOutUph1 v-show!isShow key1你好啊/h1h1 v-showisShow key2尚硅谷/h1/transition-group/div
/templatescriptimport animate.css // 引入css不需要from啥的export default {name:Test,data() {return {isShow:true}},}
/scriptstyle scopedh1{background-color: orange;}
/style15. 配置代理服务器
方法一
在vue.config.js中添加如下配置
devServer:{proxy:http://localhost:5000
}说明
1、优点配置简单请求资源时直接发给前端8080即可。
2、缺点不能配置多个代理不能灵活的控制请求是否走代理。
3、工作方式若按照上述配置代理当请求了前端不存在的资源时那么该请求才会由代理服务器转发给服务器
注意这种配置方式它会优先匹配前端资源前端资源默认以public文件夹作为资源的根路径
方法二
编写vue.config.js配置具体代理规则
module.exports {devServer: {proxy: {/api1: {// 匹配所有以 /api1开头的请求路径target: http://localhost:5000,// 代理目标的基础路径changeOrigin: true,pathRewrite: {^/api1: } // 将请求路径前面的/api1替换为空,然后再把请求发给5000服务器},/api2: {// 匹配所有以 /api2开头的请求路径target: http://localhost:5001,// 代理目标的基础路径changeOrigin: true,pathRewrite: {^/api2: }}}}
}
/*changeOrigin设置为true时服务器收到的请求头中的host为localhost:5000changeOrigin设置为false时服务器收到的请求头中的host为localhost:8080changeOrigin默认值为true
*/说明
1、优点可以配置多个代理且可以灵活的控制请求是否走代理。
2、缺点配置略微繁琐请求资源时必须加前缀。
案例代码
安装axiosnpm install axios
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//关闭Vue的生产提示
Vue.config.productionTip false//创建vm
new Vue({el:#app,render: h h(App),beforeCreate() {Vue.prototype.$bus this},
})App.vue
templatedivbutton clickgetStudents获取学生信息/buttonbutton clickgetCars获取汽车信息/button/div
/templatescriptimport axios from axiosexport default {name:App,methods: {getStudents(){axios.get(http://localhost:8080/students).then(response {console.log(请求成功了,response.data)},error {console.log(请求失败了,error.message)})},getCars(){axios.get(http://localhost:8080/demo/cars).then(response {console.log(请求成功了,response.data)},error {console.log(请求失败了,error.message)})}},}
/scriptvue.config.js
module.exports {pages: {index: {//入口entry: src/main.js,},},lintOnSave:false, //关闭语法检查//开启代理服务器方式一/* devServer: {proxy: http://localhost:5000}, *///开启代理服务器方式二devServer: {proxy: {/atguigu: {target: http://localhost:5000,pathRewrite:{^/atguigu:},// ws: true, //用于支持websocket// changeOrigin: true //用于控制请求头中的host值},/demo: {target: http://localhost:5001,pathRewrite:{^/demo:},// ws: true, //用于支持websocket// changeOrigin: true //用于控制请求头中的host值}}}
}16. github搜索案例
案例代码
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//关闭Vue的生产提示
Vue.config.productionTip false//创建vm
new Vue({el:#app,render: h h(App),beforeCreate() {Vue.prototype.$bus this},
})App.vue
templatediv classcontainerSearch/List//div
/templatescriptimport Search from ./components/Searchimport List from ./components/Listexport default {name:App,components:{Search,List}}
/scriptSearch.vue
templatesection classjumbotronh3 classjumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search v-modelkeyWord/nbsp;button clicksearchUsersSearch/button/div/section
/templatescript
import axios from axios
export default {name:Search,data() {return {keyWord:}},methods: {searchUsers(){//请求前更新List的数据this.$bus.$emit(updateListData,{isLoading:true,errMsg:,users:[],isFirst:false})axios.get(https://api.github.com/search/users?q${this.keyWord}).then(response {console.log(请求成功了)//请求成功后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:,users:response.data.items})},error {//请求后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:error.message,users:[]})})}},
}
/script
List.vue
templatediv classrow!-- 展示用户列表 --div v-showinfo.users.length classcard v-foruser in info.users :keyuser.logina :hrefuser.html_url target_blankimg :srcuser.avatar_url stylewidth: 100px//ap classcard-text{{user.login}}/p/div!-- 展示欢迎词 --h1 v-showinfo.isFirst欢迎使用/h1!-- 展示加载中 --h1 v-showinfo.isLoading加载中..../h1!-- 展示错误信息 --h1 v-showinfo.errMsg{{info.errMsg}}/h1/div
/templatescriptexport default {name:List,data() {return {info:{isFirst:true,isLoading:false,errMsg:,users:[]}}},mounted() {this.$bus.$on(updateListData,(dataObj){// this.info dataObj // 这里为什么可以响应式? // 当info被修改时,肯定是可以被检测到的,因为这样赋值会触发对应的响应式setter方法this.info {...this.info,...dataObj} /* 属性重名的,后面展开的对象会覆盖前面的属性值 */})},}
/scriptstyle scoped.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
/style17. vue-resource
安装包npm install vue-resource
使用
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入插件
import vueResource from vue-resource
//关闭Vue的生产提示
Vue.config.productionTip false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:#app,render: h h(App),beforeCreate() {Vue.prototype.$bus this},
})Search.vue
templatesection classjumbotronh3 classjumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search v-modelkeyWord/nbsp;button clicksearchUsersSearch/button/div/section
/templatescript
export default {name:Search,data() {return {keyWord:}},methods: {searchUsers(){//请求前更新List的数据this.$bus.$emit(updateListData,{isLoading:true,errMsg:,users:[],isFirst:false})this.$http.get(https://api.github.com/search/users?q${this.keyWord}).then(response {console.log(请求成功了)//请求成功后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:,users:response.data.items})},error {//请求后更新List的数据this.$bus.$emit(updateListData,{isLoading:false,errMsg:error.message,users:[]})})}},
}
/script
18. 插槽
1、作用让父组件可以向子组件指定位置插入html结构也是一种组件间通信的方式适用于 父组件 子组件 。
2、分类默认插槽、具名插槽、作用域插槽
3、使用方式
默认插槽
父组件中Categorydivhtml结构1/div/Category子组件中templatediv!-- 定义插槽 --slot插槽默认内容.../slot/div/template具名插槽
父组件中Categorytemplate slotcenterdivhtml结构1/div/templatetemplate v-slot:footerdivhtml结构2/div/template/Category子组件中templatediv!-- 定义插槽 --slot namecenter插槽默认内容.../slotslot namefooter插槽默认内容.../slot/div/template作用域插槽
1、理解数据在组件的自身但根据数据生成的结构需要组件的使用者来决定。games数据在Category组件中但使用数据所遍历出来的结构由App组件决定
2、具体编码
父组件中Categorytemplate scopescopeData!-- 生成的是ul列表 --ulli v-forg in scopeData.games :keyg{{g}}/li/ul/template/CategoryCategorytemplate slot-scopescopeData!-- 生成的是h4标题 --h4 v-forg in scopeData.games :keyg{{g}}/h4/template/Category子组件中templatedivslot :gamesgames/slot/div/templatescriptexport default {name:Category,props:[title],//数据在子组件自身data() {return {games:[红色警戒,穿越火线,劲舞团,超级玛丽]}},}/script1. 默认插槽 App.vue
templatediv classcontainerCategory title美食 img srchttps://s3.ax1x.com/2021/01/16/srJlq0.jpg alt/Category!-- 它会把组件标签中的标签体全部内容当作一个整体塞到Category组件中的slot/slot标签中,并且如果Category组件中有多个slot/slot,那么每个slot/slot标签中都会塞一个这样的整体--Category title游戏 !-- 组件中的标签体内容是解析完成后,才传到Category组件的插槽中--ulli v-for(g,index) in games :keyindex{{g}}/li/ul/CategoryCategory title电影video controls srchttp://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4/video/Category/div
/templatescriptimport Category from ./components/Categoryexport default {name:App,components:{Category},data() {return {foods:[火锅,烧烤,小龙虾,牛排],games:[红色警戒,穿越火线,劲舞团,超级玛丽],films:[《教父》,《拆弹专家》,《你好李焕英》,《尚硅谷》]}},}
/scriptstyle scoped.container{display: flex;justify-content: space-around;}
/styleCategory.vue
templatediv classcategoryh3{{title}}分类/h3!-- 定义一个插槽挖个坑等着组件的使用者进行填充 --slot我是一些默认值当使用者没有传递具体结构时我会出现/slot/div
/templatescriptexport default {name:Category,props:[title]}
/scriptstyle scoped.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
/style2. 具名插槽 App.vue
templatediv classcontainerCategory title美食 !-- 指定当前标签体插到Category中指定名称的slot插槽中1. 多个标签体可以指定同一个插槽名,插入到同一个插槽中2. 没有指定插槽名的标签体将都会插入到Category组件中的不具名的slot插槽中3. 如果标签体指定的插槽名在Category中不存在则不会插入--img slotcenter srchttps://s3.ax1x.com/2021/01/16/srJlq0.jpg alta slotfooter hrefhttp://www.atguigu.com更多美食/a/CategoryCategory title游戏 ul slotcenterli v-for(g,index) in games :keyindex{{g}}/li/uldiv classfoot slotfootera hrefhttp://www.atguigu.com单机游戏/aa hrefhttp://www.atguigu.com网络游戏/a/div/CategoryCategory title电影video slotcenter controls srchttp://clips.vorwaerts-gmbh.de.mp4/video!-- 如果使用template标签,则可以使用新的语法: v-slot:插槽名 ,template标签不会被渲染--template v-slot:footerdiv classfoota hrefhttp://www.atguigu.com经典/aa hrefhttp://www.atguigu.com热门/aa hrefhttp://www.atguigu.com推荐/a/divh4欢迎前来观影/h4/template/Category/div
/templatescriptimport Category from ./components/Categoryexport default {name:App,components:{Category},data() {return {foods:[火锅,烧烤,小龙虾,牛排],games:[红色警戒,穿越火线,劲舞团,超级玛丽],films:[《教父》,《拆弹专家》,《你好李焕英》,《尚硅谷》]}},}
/scriptstyle scoped.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
/styleCategory.vue
templatediv classcategoryh3{{title}}分类/h3!-- 定义一个插槽挖个坑等着组件的使用者进行填充 --slot namecenter我是一些默认值当使用者没有传递具体结构时我会出现1/slotslot namefooter我是一些默认值当使用者没有传递具体结构时我会出现2/slot/div
/templatescriptexport default {name:Category,props:[title]}
/scriptstyle scoped.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
/style3. 作用域插槽 App.vue
templatediv classcontainerCategory title游戏!-- 这里使用作用域插槽必须要使用template包裹起来 --!-- 这里的特点就是: 使用者定义结构,数据由插槽提供 --!-- 就相当于原本在Category组件中的数据的作用域扩展到使用者中也可以使用了 --template scopeatguigu{{name}} !-- 这个name可以是App.vue组件中的数据 --ul!-- 注意这个数据: games不在当前App.vue组件中 --li v-for(g,index) in atguigu.games :keyindex{{g}}/li/ul/template/CategoryCategory title游戏template scope{games}{{name}}olli stylecolor:red v-for(g,index) in games :keyindex{{g}}/li/ol/template/CategoryCategory title游戏!-- 注意还可以写成slot-scope这种写法哦这是一种新的Api --template slot-scope{games}{{name}}h4 v-for(g,index) in games :keyindex{{g}}/h4/template/Category/div
/templatescriptimport Category from ./components/Categoryexport default {name:App,components:{Category},data:{return {name:zzhua}}}
/scriptstyle scoped.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
/style
Category.vue
templatediv classcategoryh3{{title}}分类/h3!-- 注意作用域插槽中也可以写name,如果这里写了name,那么template里也要写name规则同具名插槽 --slot :gamesgames msghello我是默认的一些内容/slot!-- 这里再写一个名叫test1的具名插槽 --slot nametest1/slot/div
/templatescriptexport default {name:Category,props:[title],data() {return {// 注意数据在这里而并不在App.vue组件中games:[红色警戒,穿越火线,劲舞团,超级玛丽],}},}
/scriptstyle scoped.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
/style19. Vuex
1. vuex 是什么
1、概念专门在 Vue 中实现集中式状态数据管理的一个 Vue 插件对 vue 应用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方式且适用于任意组件间通信。
2、Github 地址: https://github.com/vuejs/vuex 1. 什么时候使用 Vuex
1、多个组件依赖于同一状态
2、来自不同组件的行为需要变更同一状态
就是多个组件需要共享同一份数据
2. Vuex 工作原理图 2. 搭建vuex环境
1、安装vuexnpm install vuex
2、创建文件src/store/index.js
//引入Vue核心库
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex) // 因为必须在创建store实例之前应用Vuex插件,否则会报错//准备actions对象——响应组件中用户的动作
const actions {}
//准备mutations对象——修改state中的数据
const mutations {}
//准备state对象——保存具体的数据
const state {}//准备getters——用于将state中的数据进行加工(这个不是必须的)
const getters {}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters // (这个不是必须的)
})3、在main.js中创建vm时传入store配置项
......
//引入store
import store from ./store
......//创建vm
new Vue({el:#app,render: h h(App),store
})3. 基本使用
1、初始化数据、配置actions、配置mutations操作文件store.js
// src/store/index.js文件//引入Vue核心库
import Vue from vue
//引入Vuex
import Vuex from vuex
//引用Vuex
Vue.use(Vuex)const actions {//响应组件中加的动作(派发action返回的就是一个Promise对象,不管这个action是不是被async修饰)jia(context,value){ // context中包含: commit、dispatch、getters、rootGetters、rootState、state// 这些都可以使用(并且其中包含的dispatch也可以用来派发其它的action)// console.log(actions中的jia被调用了,miniStore,value)context.commit(JIA,value)},
}const mutations {//执行加JIA(state,value){// console.log(mutations中的JIA被调用了,state,value)state.sum value}
}//初始化数据 vuex存储的数据不是持久化的一旦刷新页面数据就没了
const state {sum:0
}//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10 // 依靠返回值}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})2、组件中读取vuex中的数据$store.state.sum
3、组件中修改vuex中的数据$store.dispatch(action中的方法名,数据)或 $store.commit(mutations中的方法名,数据)
4、组件中读取getters中的数据$store.getters.bigSum
备注若没有网络请求或其他业务逻辑组件中也可以越过actions即不写dispatch直接编写commit
4. 求和案例_vuex版 main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入插件
import vueResource from vue-resource
//引入store
import store from ./store /* 如果需要引入的是文件夹中的index.js,可以省略不写index.js *//* 所有的import不管写在哪里,都会按照书写放到最上方先执行 *///关闭Vue的生产提示
Vue.config.productionTip false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:#app,render: h h(App),store, /* 当安装Vuex插件后才可以配置store并且vm和vc身上都会有$store属性了 */beforeCreate() {Vue.prototype.$bus this}
})store/index.js
// src/store/index.js文件//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
// 如果有业务逻辑都写在actions中
const actions {/* jia(context,value){ // contxt中包含了commit、dispatch、getters、state等属性// 所以下面能从context中找到commitconsole.log(actions中的jia被调用了)context.commit(JIA,value) // 这里的这个commit就是store身上的commit(未分模块之前是完全相等的)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)}, */jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}
}
//准备mutations——用于操作数据state
// mutations只负责修改state其它业务逻辑在actions中处理
const mutations {JIA(state,value){ // state中的sum有匹配了响应式的setter和getterconsole.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value}
}
//准备state——用于存储数据
const state {sum:0 //当前的和
}//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10 // 依靠返回值}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})App.vue
templatedivCount//div
/templatescriptimport Count from ./components/Countexport default {name:App,components:{Count},mounted() {// console.log(App,this)},}
/scriptCount.vue
// src/components/count.vue
templatedivh1当前求和为{{$store.state.sum}}/h1h3当前求和放大10倍为{{$store.getters.bigSum}}/h3!-- 将收集到的n转为number类型, 也可以在下面option的value前加v-bind,这样也会是数字 --select v-model.numbern option value11/optionoption value22/optionoption value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptexport default {name:Count,data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit(JIA,this.n) /* 必须保证mutations中有JIA */},decrement(){this.$store.commit(JIAN,this.n) /* 必须保证mutations中有JIAN */},incrementOdd(){this.$store.dispatch(jiaOdd,this.n) /* 必须保证actions中有jiaOdd */},incrementWait(){this.$store.dispatch(jiaWait,this.n)/* 必须保证actions中有jiaWait */},},mounted() {console.log(Count,this)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style5. mapState与mapGettersmapMutations与mapActions[简写]
1、mapState方法用于帮助我们映射state中的数据为计算属性
computed: {//借助mapState生成计算属性sum、school、subject对象写法...mapState({sum:sum,school:school,subject:subject}),//借助mapState生成计算属性sum、school、subject函数写法...mapState({sum:statestate.sum})//借助mapState生成计算属性sum、school、subject数组写法...mapState([sum,school,subject]),
},2、mapGetters方法用于帮助我们映射getters中的数据为计算属性
computed: {//借助mapGetters生成计算属性bigSum对象写法...mapGetters({bigSum:bigSum}),//借助mapGetters生成计算属性bigSum数组写法...mapGetters([bigSum])
},3、mapActions方法用于帮助我们生成与actions对话的方法即包含$store.dispatch(xxx)的函数
methods:{//靠mapActions生成incrementOdd、incrementWait对象形式...mapActions({incrementOdd:jiaOdd,incrementWait:jiaWait})//靠mapActions生成incrementOdd、incrementWait数组形式...mapActions([jiaOdd,jiaWait])
}4、mapMutations方法用于帮助我们生成与mutations对话的方法即包含$store.commit(xxx)的函数
methods:{//靠mapActions生成increment、decrement对象形式...mapMutations({increment:JIA,decrement:JIAN}),//靠mapMutations生成JIA、JIAN对象形式...mapMutations([JIA,JIAN]),
}备注mapActions与mapMutations使用时若需要传递参数需要在模板中绑定事件时传递好参数否则参数是事件对象。
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入插件
import vueResource from vue-resource
//引入store
import store from ./store//关闭Vue的生产提示
Vue.config.productionTip false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:#app,render: h h(App),store,beforeCreate() {Vue.prototype.$bus this}
})
store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions {/* jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)}, */jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}
}
//准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value}
}
//准备state——用于存储数据
const state {sum:0, //当前的和school:尚硅谷,subject:前端
}
//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})App.vue
templatedivCount//div
/templatescriptimport Count from ./components/Countexport default {name:App,components:{Count},mounted() {// console.log(App,this)},}
/scriptCount.vue
templatedivh1当前求和为{{sum}}/h1h3当前求和放大10倍为{{bigSum}}/h3h3我在{{school}}学习{{subject}}/h3select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement(n)/buttonbutton clickdecrement(n)-/buttonbutton clickincrementOdd(n)当前求和为奇数再加/buttonbutton clickincrementWait(n)等一等再加/button/div
/templatescriptimport {mapState,mapGetters,mapMutations,mapActions} from vuexexport default {name:Count,data() {return {n:1, //用户选择的数字}},computed:{//靠程序员自己亲自去写计算属性/*he(){return this.$store.state.sum},xuexiao(){return this.$store.state.school},xueke(){return this.$store.state.subject}, *///借助mapState生成计算属性从state中读取数据。对象写法// ...mapState({he:sum,xuexiao:school,xueke:subject}),//借助mapState生成计算属性从state中读取数据。数组写法...mapState([sum,school,subject]),/* ******************************************************************** *//* bigSum(){return this.$store.getters.bigSum}, *///借助mapGetters生成计算属性从getters中读取数据。对象写法// ...mapGetters({bigSum:bigSum})//借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters([bigSum])},methods: {//程序员亲自写方法/* increment(){this.$store.commit(JIA,this.n)},decrement(){this.$store.commit(JIAN,this.n)}, *//*// 其实它生成的是这样的函数,如果不指定参数的话,这个e就是事件对象decrement(e){this.$store.commit(JIAN,e)}*///借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:JIA,decrement:JIAN}),//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(数组写法)// ...mapMutations([JIA,JIAN]),/* ************************************************* *///程序员亲自写方法/* incrementOdd(){this.$store.dispatch(jiaOdd,this.n)},incrementWait(){this.$store.dispatch(jiaWait,this.n)}, *///借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:jiaOdd,incrementWait:jiaWait})//借助mapActions生成对应的方法方法中会调用dispatch去联系actions(数组写法)// ...mapActions([jiaOdd,jiaWait])},mounted() {const x mapState({he:sum,xuexiao:school,xueke:subject})console.log(x)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style
6. 模块化命名空间
1、目的让代码更好维护让多种数据分类更加明确。
2、修改store.js
const countAbout {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
}const personAbout {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }
}const store new Vuex.Store({modules: {countAbout,personAbout}
})3、开启命名空间后组件中读取state数据
//方式一自己直接读取
this.$store.state.personAbout.list//方式二借助mapState读取
...mapState(countAbout,[sum,school,subject]),4、开启命名空间后组件中读取getters数据
//方式一自己直接读取
this.$store.getters[personAbout/firstPersonName]//方式二借助mapGetters读取
...mapGetters(countAbout,[bigSum])5、开启命名空间后组件中调用dispatch
//方式一自己直接dispatch
this.$store.dispatch(personAbout/addPersonWang,person)//方式二借助mapActions
...mapActions(countAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait})6、开启命名空间后组件中调用commit
//方式一自己直接commit
this.$store.commit(personAbout/ADD_PERSON,person)//方式二借助mapMutations
...mapMutations(countAbout,{increment:JIA,decrement:JIAN}),main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入插件
import vueResource from vue-resource
//引入store
import store from ./store//关闭Vue的生产提示
Vue.config.productionTip false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:#app,render: h h(App),store,beforeCreate() {Vue.prototype.$bus this}
})
store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
import countOptions from ./count
import personOptions from ./person
//应用Vuex插件
Vue.use(Vuex)//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
})store/count.js
//求和相关的配置
export default {namespaced:true, /* 开启命名空间,这样mapState()中就可以写命名了 */actions:{jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}},mutations:{JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value},},state:{sum:0, //当前的和school:尚硅谷,subject:前端,},getters:{bigSum(state){return state.sum*10}},
}store/person.js
//人员管理相关的配置
import axios from axios
import { nanoid } from nanoid
export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf(王) 0){context.commit(ADD_PERSON,value)}else{alert(添加的人必须姓王)}},addPersonServer(context){axios.get(https://api.uixsj.cn/hitokoto/get?typesocial).then(response {context.commit(ADD_PERSON,{id:nanoid(),name:response.data})},error {alert(error.message)})}},mutations:{ADD_PERSON(state,value){console.log(mutations中的ADD_PERSON被调用了)state.personList.unshift(value)}},state:{personList:[{id:001,name:张三}]},getters:{firstPersonName(state){ /* 这里获取的state就是当前person模块的state */return state.personList[0].name}},
}App.vue
templatedivCount/hrPerson//div
/templatescriptimport Count from ./components/Countimport Person from ./components/Personexport default {name:App,components:{Count,Person},mounted() {// console.log(App,this)},}
/script
Count.vue
templatedivh1当前求和为{{sum}}/h1h3当前求和放大10倍为{{bigSum}}/h3h3我在{{school}}学习{{subject}}/h3h3 stylecolor:redPerson组件的总人数是{{personList.length}}/h3select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement(n)/buttonbutton clickdecrement(n)-/buttonbutton clickincrementOdd(n)当前求和为奇数再加/buttonbutton clickincrementWait(n)等一等再加/button/div
/templatescriptimport {mapState,mapGetters,mapMutations,mapActions} from vuexexport default {name:Count,data() {return {n:1, //用户选择的数字}},computed:{//借助mapState生成计算属性从state中读取数据。数组写法...mapState(countAbout,[sum,school,subject]),...mapState(personAbout,[personList]),// ...mapState({bannerList:statestate.home.bannerList}) // 获取home模块下的bannerList//借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters(countAbout,[bigSum])},methods: {//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations(countAbout,{increment:JIA,decrement:JIAN}),//借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions(countAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait})},mounted() {console.log(this.$store)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/stylePerson.vue
templatedivh1人员列表/h1h3 stylecolor:redCount组件求和为{{sum}}/h3h3列表中第一个人的名字是{{firstPersonName}}/h3input typetext placeholder请输入名字 v-modelnamebutton clickadd添加/buttonbutton clickaddWang添加一个姓王的人/buttonbutton clickaddPersonServer添加一个人名字随机/buttonulli v-forp in personList :keyp.id{{p.name}}/li/ul/div
/templatescriptimport {nanoid} from nanoidexport default {name:Person,data() {return {name:}},computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum // 不同mapXXX,自己手动写法},firstPersonName(){return this.$store.getters[personAbout/firstPersonName]// 不同mapXXX,自己手动写法}},methods: {add(){const personObj {id:nanoid(),name:this.name}this.$store.commit(personAbout/ADD_PERSON,personObj) // 不同mapXXX,自己手动写法this.name },addWang(){const personObj {id:nanoid(),name:this.name}this.$store.dispatch(personAbout/addPersonWang,personObj)// 不同mapXXX,自己手动写法this.name },addPersonServer(){this.$store.dispatch(personAbout/addPersonServer)// 不同mapXXX,自己手动写法}},}
/script20. 路由 路由相关理解
vue-router 的理解
vue 的一个插件库专门用来实现 SPA 应用
对 SPA 应用的理解
1、单页 Web 应用single page web applicationSPA。
2、整个应用只有一个完整的页面。
3、点击页面中的导航链接不会刷新页面只会做页面的局部更新。
4、数据需要通过 ajax 请求获取。
路由的理解
1、什么是路由?
一个路由就是一组映射关系key - valuekey 为路径, value 可能是 function 或 component
2、路由分类
后端路由 理解value 是 function, 用于处理客户端提交的请求。 2) 工作过程服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。 前端路由 理解value 是 component用于展示页面内容。工作过程当浏览器的路径改变时, 对应的组件就会显示。
基本使用
1、安装vue-router命令npm i vue-router
2、应用插件Vue.use(VueRouter)
3、编写router配置项:
//引入VueRouter
import VueRouter from vue-router
//引入Luyou 组件
import About from ../components/About
import Home from ../components/Home//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}]
})//暴露router
export default router4、实现切换active-class可配置高亮样式
router-link active-classactive to/aboutAbout/router-link5、指定展示位置
router-view/router-view案例代码 main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router:router /* 当安装vue-router插件后才可以配置router */
})App.vue
template
divdiv classrowdiv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div/divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --!-- router-link最后也会渲染成a标签; active-class表示路由被激活时的样式; to表示要到的路由路径 --router-link classlist-group-item active-classactive to/aboutAbout/router-linkrouter-link classlist-group-item active-classactive to/homeHome/router-link/div/divdiv classcol-xs-6div classpaneldiv classpanel-body!-- 指定路由所匹配到的组件的呈现位置 --router-view/router-view/div/div/div/div
/div
/templatescript
export default {name:App,
}
/script
router/index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../components/About
import Home from ../components/Home//创建并暴露一个路由器
export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}]
})
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About}
/scriptHome.vue
templateh2我是Home的内容/h2
/templatescriptexport default {name:Home}
/script几个注意点
1、路由组件通常存放在pages文件夹一般组件通常存放在components文件夹。
2、通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载。
3、每个组件都有$route属性里面存储着当前的路由信息并且是同一个对象。
4、整个应用只有一个router每个组件都可以通过组件的$router属性获取到这一个router。
嵌套路由 1、配置路由规则使用children配置项
routes:[{path:/about, // 一级路由component:About,},{path:/home,component:Home,children:[ //通过children配置子级路由 {path:, // 可以设置一个空字符串/home默认跳到/home/newsredirect:news}, { // 二级路由, // 如果路径匹配到了二级路由,那么先渲染完一级路由所对应的组件,放到App组件的路由位置,// 然后, 渲染二级路由所对应的组件,放到父路由的路由位置可以通过路由钩子查看到顺序。// 这样先渲染完父级路由组件的好处是如果父级路由组件没有路由位置,则不需要创建子组件了// 如果父级路由组件有多个路由位置那么会多次创建子组件。// 如果路径只匹配到了父级路由组件,那么父级路由组件中如果有路由位置的话,也不会渲染出来。path:news, //此处一定不要写/news component:News},{path:message,//此处一定不要写/messagecomponent:Message}]}
]2、跳转要写完整路径
router-link to/home/newsNews/router-link案例代码 public/index.html
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0link relicon href% BASE_URL %favicon.icolink relstylesheet href% BASE_URL %bootstrap.csstitle% htmlWebpackPlugin.options.title %/title/headbodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div!-- built files will be auto injected --/body
/html
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router:router
})
router/index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About
import Home from ../pages/Home
import News from ../pages/News
import Message from ../pages/Message//创建并暴露一个路由器
export default new VueRouter({routes:[{path:/,redirect: /home // 当匹配到/时重定向到/home这里也可以直接写home前面不带/},{path:/about,component:About},{path:/home, /* 一级路由前面要加/ */component:Home,redirect: message // 当匹配到/home时重定向到/home/messagechildren:[{path:news, /* 子路由前面不要加/ */component:News,},{path:message,component:Message,}]}]
})app.vue
template
divdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --router-link classlist-group-item active-classactive to/aboutAbout/router-linkrouter-link classlist-group-item active-classactive to/homeHome/router-link/div/divdiv classcol-xs-6div classpaneldiv classpanel-body!-- 指定组件的呈现位置 --router-view/router-view/div/div/div/div
/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
pages/Home.vue
template
divh2Home组件内容/h2divul classnav nav-tabslirouter-link classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link classlist-group-item active-classactiveto/home/messageMessage/router-link/li/ulrouter-view/router-view/div
/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptpages/News.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptpages/Message.vue
templatedivullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div
/templatescriptexport default {name:Message}
/scriptpages/About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptcomponents/Banner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescriptexport default {name:Banner}
/script命名路由 作用可以简化路由的跳转。 如何使用 给路由命名 {path:/demo,component:Demo,children:[{path:test,component:Test,children:[{name:hello //给路由命名path:welcome,component:Hello,}]}]
}简化跳转 !--简化前需要写完整的路径 --
router-link to/demo/test/welcome跳转/router-link!--简化后直接通过名字跳转 --
router-link :to{name:hello}跳转/router-link!--简化写法配合传递参数 --
router-link :to{name:hello, // 要跳转的路由名称, 就可以不用写长长的路径了query:{id:666,title:你好}}
跳转/router-link路由的query参数
1、传递参数
!-- 跳转并携带query参数to的字符串写法 --
router-link :to/home/message/detail?id666title你好跳转/router-link!-- 跳转并携带query参数to的对象写法 --
router-link:to{path:/home/message/detail,query:{ // 此方式会将参数拼接成url?xxxyyyxxxyyy形式id:666,title:你好}}
跳转
/router-link2、接收参数
// 不只是路由组件能获取到路由参数其它非路由组件或者说其它组件也能正常获取到
// 所以上面使用query这种方式本质就是在url后面url?xxxyyyxxxyyy东西而已
$route.query.id
$route.query.title路由的params参数
1、配置路由声明接收params参数
{path:/home,component:Home,children:[{path:news,component:News},{component:Message,children:[{name:xiangqing,path:detail/:id/:title,//使用占位符声明接收params参数,占位符的名字就作为params对象中的keycomponent:Detail}]}]
}2、传递参数
!-- 跳转并携带params参数to的字符串写法 --
router-link :to/home/message/detail/666/你好跳转/router-link!-- 跳转并携带params参数to的对象写法 --
router-link:to{name:xiangqing,params:{id:666,title:你好}}
跳转/router-link特别注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置
3、接收参数
// 不只是路由组件能获取到路由参数其它非路由组件或者说其它组件也能正常获取到
// 所以上面使用params这种方式本质就是在后面拼接url/{id}/{title}而已
$route.params.id
$route.params.title路由的props配置
作用让路由组件更方便的收到参数
// router/index.js
{name:xiangqing,path:detail/:id,component:Detail,// 这3种写法只是为了方便在组件中更方便的收到参数,而不用一遍遍的写this.$route.。而是直接使用props接收//第一种写法props值为对象该对象中所有的key-value的组合最终都会通过props传给Detail组件,// // props:{a:900}//第二种写法props值为布尔值布尔值为true则会把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id: route.query.id,title: route.query.title}}// 第三种简化写法(不太推荐)/*props({query: {id,title}}){ // 双重解构赋值return {id:title}}*/
}// Detail.vue
export default {name:Detail,props:[id,title], // Detail组件用props配置项去接受即可使用
}router-link的replace属性
1、作用控制路由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录。路由跳转时候默认为push
3、如何开启replace模式router-link replace to/home/newsNews/router-link即添加replace属性即可
编程式路由导航
1、作用不借助router-link 实现路由跳转让路由跳转更加灵活
2、具体编码
//$router的两个API
this.$router.push({name:xiangqing,params:{id:xxx,title:xxx}
})this.$router.replace({name:xiangqing,params:{id:xxx,title:xxx}
})1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)3. this.$router.back(): 请求(返回)上一个记录路由
4. this.$router.forward(): 请求(前进)上一个记录路由5. this.$router.go(-1): 请求(返回)上一个记录路由
6. this.$router.go(1): 请求下一个记录路由缓存路由组件
1、作用让不展示的路由组件保持挂载不被销毁比如用户输入了内容路由切换了又切回来内容还在。
2、具体编码
keep-alive includeNews !-- 如果不写,则所有在此处渲染的组件都会被缓存; 写了,则只会缓存对应的组件 --router-view/router-view
/keep-alive!-- 这里写的是组件名。如果多个的话使用v-bind绑定组件名数组 --
keep-alive :include[News,Mesage]router-view/router-view
/keep-alive两个新的生命周期钩子
1、作用路由组件所独有的两个钩子函数用于捕获路由组件的激活状态。 2、具体名字
activated路由组件被激活时触发也就是组件被切中展示。deactivated路由组件失活时触发也就是组件被切走隐藏。
路由守卫
1、作用对路由进行权限控制
2、分类全局守卫、独享守卫、组件内守卫
3、全局守卫:
// 【全局前置守卫初始化时执行、每次路由切换前执行】
router.beforeEach((to,from,next){console.log(beforeEach,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){ //权限控制的具体规则next() //放行}else{alert(暂无权限查看)// next({name:guanyu}) // 如果不调用next()放行的话,是不会切换到新的路由的// next({path:/}) // 如果不调用next()放行的话,是不会切换到新的路由的}}else{next() //放行}
})//【全局后置守卫初始化时执行、每次路由切换后执行】
router.afterEach((to,from){ // 注意这里没有next参数哦console.log(afterEach,to,from)if(to.meta.title){document.title to.meta.title //修改网页的title}else{document.title vue_test}
})// 还可以在路由跳转的时候加上redirect给$route的query对象中,来保存用户未登录前想去的路由。等用户登录了,就跳过去。
// 例: next(login?redirect${to.path})// next(false) 取消当前的导航从哪来回哪去
// 即如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)那么 URL 地址会重置到 from 路由对应的地址4、路由独享守卫:
beforeEnter(to,from,next){console.log(beforeEnter,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){next()}else{alert(暂无权限查看)// next({name:guanyu})}}else{next()}
}5、组件内守卫
beforeRouteEnter(to, from) {// 在渲染该组件的对应路由被验证前调用// 不能获取组件实例 this // 因为当守卫执行时组件实例还没被创建
},beforeRouteUpdate(to, from) {// 在当前路由改变但是该组件被复用时调用// 举例来说对于一个带有动态参数的路径 /users/:id在 /users/1 和 /users/2 之间跳转的时候// 由于会渲染同样的 UserDetails 组件因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 因为在这种情况发生的时候组件已经挂载好了导航守卫可以访问组件实例 this
},beforeRouteLeave(to, from) {// 在导航离开渲染该组件的对应路由时调用// 与 beforeRouteUpdate 一样它可以访问组件实例 this
},全局(前置/后置)路由守卫
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About
import Home from ../pages/Home
import News from ../pages/News
import Message from ../pages/Message
import Detail from ../pages/Detail//创建并暴露一个路由器
const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{ // meta元数据,才能从路由$route中获取该meta数据isAuth:true,title:新闻}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next){console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统 // 在路由切换成功完成之后,修改网页title
})export default router独享路由守卫
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About
import Home from ../pages/Home
import News from ../pages/News
import Message from ../pages/Message
import Detail from ../pages/Detail//创建并暴露一个路由器
const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻},// 【独享路由守卫】beforeEnter: (to, from, next) {console.log(独享路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next){console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统
})export default router
组件内路由守卫
templateh2我是About的内容/h2
/templatescriptexport default {name:About,//通过路由规则进入该组件时被调用beforeRouteEnter (to, from, next) {console.log(About--beforeRouteEnter,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}},//通过路由规则离开该组件时被调用beforeRouteLeave (to, from, next) {console.log(About--beforeRouteLeave,to,from)next()}}
/script路由懒加载
// 将
// import UserDetails from ./views/UserDetails
// 替换成
const UserDetails () import(./views/UserDetails) // import函数返回的是一个Promiseconst router createRouter({// ...routes: [{ path: /users/:id, component: UserDetails }],
})// component (和 components) 配置接收一个返回 Promise 组件的函数Vue Router 只会在第一次进入页面时才会获取这个函数然后使用缓存数据。这意味着可以使用更复杂的函数只要它们返回一个 Promise
// 一般来说对所有的路由都使用动态导入路由器的两种工作模式
1、对于一个url来说什么是hash值—— #及其后面的内容就是hash值。
2、hash值不会包含在 HTTP 请求中即hash值不会带给服务器。
3、hash模式 1. 地址中永远带着#号不美观 。2. 若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法。3. 兼容性较好。4、history模式 1. 地址干净美观 。2. 兼容性和hash模式相比略差。3. 应用部署上线时需要后端人员支持解决刷新页面服务端404的问题。// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About
import Home from ../pages/Home
import News from ../pages/News
import Message from ../pages/Message
import Detail from ../pages/Detail//创建并暴露一个路由器
const router new VueRouter({mode:history, // 此处可以写history模式或hash模式, 如果使用history模式,需要解决打包部署刷新404的问题routes:[{name:guanyu,path:/about,component:About,meta:{isAuth:true,title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻},},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},}]}]}]
})export default router打包部署刷新页面404的问题
使用nginx
在文件中的nginx.conf文件中修改代码如下
server {listen YYYY; # 自己设置的端口号server_name 192.168.XXX.XXX; # 在黑窗口下ipconifg后出现的IPv4地址复制location / {root E:/website_wap/dist/; # 项目打包后的路径index index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新页面变成404问题的代码} # 匹配不到任何静态资源跳到同一个index.htmllocation /api {proxy_path http://39.38.123.211;}
}21. UI 组件库
移动端常用 UI 组件库
Vant https://youzan.github.io/vantCube UI https://didi.github.io/cube-uiMint UI http://mint-ui.github.io
PC 端常用 UI 组件库
Element UI https://element.eleme.cnIView UI https://www.iviewui
22. 配置
创建jsconfig.json文件
在与package.json同级目录下创建该jsconfig.json文件
{compilerOptions: {baseUrl: ./,paths: {/*: [src/*]}},exclude: [node_modules,dist]
}23. axios
1、安装axios
npm install axios --save2、创建ajax.js
在src/api文件夹下创建ajax.js
//对于axios进行二次封装
import axios from axios;import nprogress from nprogress;
//在当前模块中引入store
import store from /store;
//如果出现进度条没有显示一定是你忘记了引入样式了
import nprogress/nprogress.css;//底下的代码也是创建axios实例
let requests axios.create({//基础路径baseURL: /api,//请求不能超过5Stimeout: 5000,
});//请求拦截器----在项目中发请求请求没有发出去可以做一些事情
requests.interceptors.request.use((config) {//现在的问题是config是什么?配置对象//可以让进度条开始动if(store.state.detail.uuid_token){//请求头添加一个字段(userTempId):和后台老师商量好了config.headers.userTempId store.state.detail.uuid_token;}//需要携带token带给服务器if(store.state.user.token){config.headers.token store.state.user.token;}nprogress.start();return config;
});//响应拦截器----当服务器手动请求之后做出响应相应成功会执行的
requests.interceptors.response.use((res) {//进度条结束nprogress.done();//相应成功做的事情return res.data;},(err) {alert(服务器响应数据失败);}
);//最终需要对外暴露不对外暴露外面模块没办法使用
//这里的代码是暴露一个axios实例
export default requests;3、暴露请求接口方法
在src/api文件夹下创建index.js引入ajax.js暴露请求接口的方法给外界使用
//统一管理项目接口的模块//引入二次封装的axios带有请求、响应的拦截器
import requests from ./ajax;//三级菜单的请求地址 /api/product/getBaseCategoryList GET 没有任何参数
//对外暴露一个函数只要外部调用这个函数就想服务器发起ajax请求、获取咱们的三级菜单数据。当前咱们这个函数只需要把服务器返回结果返回即可。
export const reqgetCategoryList () requests.get(/product/getBaseCategoryList);
//切记:当前函数执行需要把服务器返回结果返回//获取搜索模块数据 地址:/api/list 请求方式:post 参数:需要带参数
//当前这个函数需不需要接受外部传递参数
//当前这个接口获取搜索模块的数据给服务器传递一个默认参数【至少是一个空对象】
export const reqGetSearchInfo (params)requests({url:/list,method:post,data:params});//获取产品详情信息的接口 URL: /api/item/{ skuId } 请求方式get
export const reqGoodsInfo (skuId)requests({url:/item/${skuId},method:get});//将产品添加到购物车中获取更新某一个产品的个数
///api/cart/addToCart/{ skuId }/{ skuNum } POST
export const reqAddOrUpdateShopCart (skuId,skuNum)requests({url:/cart/addToCart/${skuId}/${skuNum},method:post})//获取购物车列表数据接口
//URL:/api/cart/cartList method:get
export const reqCartList ()requests({url:/cart/cartList ,method:get});//删除购物产品的接口
//URL:/api/cart/deleteCart/{skuId} method:DELETE
export const reqDeleteCartById (skuId)requests({url:/cart/deleteCart/${skuId},method:delete});//修改商品的选中状态
//URL:/api/cart/checkCart/{skuId}/{isChecked} method:get
export const reqUpdateCheckedByid (skuId,isChecked)requests({url:/cart/checkCart/${skuId}/${isChecked},method:get});//获取验证码
//URL:/api/user/passport/sendCode/{phone} method:get
export const reqGetCode (phone)requests({url:/user/passport/sendCode/${phone},method:get});//注册
//url:/api/user/passport/register method:post phone code passwordexport const reqUserRegister (data)requests({url:/user/passport/register,data,method:post});//登录
//URL:/api/user/passport/login method:post phone password
export const reqUserLogin (data)requests({url:/user/passport/login,data,method:post});//获取用户信息【需要带着用户的token向服务器要用户信息】
//URL:/api/user/passport/auth/getUserInfo method:get
export const reqUserInfo ()requests({url:/user/passport/auth/getUserInfo,method:get});//退出登录
//URL:/api/user/passport/logout get
export const reqLogout () requests({url:/user/passport/logout,method:get});//获取用户地址信息
//URL:/api/user/userAddress/auth/findUserAddressList method:get
export const reqAddressInfo ()requests({url:/user/userAddress/auth/findUserAddressList,method:get});//获取商品清单
//URL:/api/order/auth/trade method:get
export const reqOrderInfo ()requests({url:/order/auth/trade,method:get});//提交订单的接口
//URL:/api/order/auth/submitOrder?tradeNo{tradeNo} method:postexport const reqSubmitOrder (tradeNo,data)requests({url:/order/auth/submitOrder?tradeNo${tradeNo},data,method:post});//获取支付信息
//URL:/api/payment/weixin/createNative/{orderId} GET
export const reqPayInfo (orderId)requests({url:/payment/weixin/createNative/${orderId},method:get});//获取支付订单状态
//URL:/api/payment/weixin/queryPayStatus/{orderId} get
export const reqPayStatus (orderId)requests({url:/payment/weixin/queryPayStatus/${orderId},method:get});//获取个人中心的数据
//api/order/auth/{page}/{limit} get
export const reqMyOrderList (page,limit)requests({url:/order/auth/${page}/${limit},method:get});4、使用
在vuex的home模块中使用
// 引入暴露的方法
import { reqCategoryList } from /apiconst state {categoryList:[]
}const mutations {CATEGORYLIST(state,val) {state.categoryList val}
}const actions {async categoryList({commit},val){//reqgetCategoryList返回的是一个Promise对象//需要用await接受成功返回的结果await必须要结合async一起使用CPlet result await reqCategoryList() // 这里添加了await: 该步骤结束后,才会执行下面这句commit(CATEGORYLIST,result.data)}
}const getters {}export default {namespaced:true,state,mutations,actions,getters
}template.../template
scriptimport { mapState } from vuex;export default {name: TypeNav,computed: {...mapState({categoryList: (state) state.home.categoryList.slice(0, 16),}),}}
/script
style.../style24. MockJs
使用mock发送请求会被浏览器拦截注意不会发出请求
1、安装mockJs
npm install mockjs --save2、编写mockServer.js文件
在src下创建mock文件夹编写mockServer.js文件文件内容如下
//先引入mockjs模块
import Mock from mockjs;//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露但是可以引入]
//webpack默认对外暴露的图片、JSON数据格式
import banner from ./banner.json;
import floor from ./floor.json;//mock数据:第一个参数请求地址 第二个参数请求数据
Mock.mock(/mock/banner,{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock(/mock/floor,{code:200,data:floor});引入的json文件如下
// banner.json文件
[{id: 1,imgUrl: /images/banner1.jpg},{id: 2,imgUrl: /images/banner2.jpg},{id: 3,imgUrl: /images/banner3.jpg},{id: 4,imgUrl: /images/banner4.jpg}
]
// floor.json文件
[{id: 001,name: 家用电器,keywords: [节能补贴,4K电视,空气净化器,IH电饭煲,滚筒洗衣机,电热水器],imgUrl: /images/floor-1-1.png,...}
]
3、创建mockAjax.js
在src的api文件夹下创建mockAjax.js并引入axios它的baseURL设置为/mock
//对于axios进行二次封装
import axios from axios;
import nprogress from nprogress;//如果出现进度条没有显示一定是你忘记了引入样式了
import nprogress/nprogress.css;//底下的代码也是创建axios实例
let requests axios.create({//基础路径baseURL: /mock,//请求不能超过5Stimeout: 5000,
});//请求拦截器----在项目中发请求请求没有发出去可以做一些事情
requests.interceptors.request.use((config) {//现在的问题是config是什么?配置对象//可以让进度条开始动nprogress.start();return config;
});//响应拦截器----当服务器手动请求之后做出响应相应成功会执行的
requests.interceptors.response.use((res) {//进度条结束nprogress.done();//相应成功做的事情return res.data;},(err) {alert(服务器响应数据失败);}
);//最终需要对外暴露不对外暴露外面模块没办法使用
//这里的代码是暴露一个axios实例
export default requests;4、暴露请求接口方法
在src/api文件夹下创建index.js引入mockAjax.js暴露请求接口的方法给外界使用
//统一管理项目接口的模块
//引入二次封装的axios带有请求、响应的拦截器
import mockRequests from ./mockAjax;//获取bannerHome首页轮播图接口
export const reqGetBannerList () mockRequests.get(/banner);//获取floor数据
export const reqFloorList () mockRequests.get(/floor);5、使用
store/home.js
import { reqgetCategoryList, reqGetBannerList, reqFloorList } from /api;//home模块的仓库
const state {//轮播图的数据bannerList: [],
};//mutions是唯一修改state的地方
const mutations {GETCATEGORYLIST(state, categoryList) {state.categoryList categoryList;},GETBANNERLIST(state, bannerList) {state.bannerList bannerList;},GETFLOORLIST(state,floorList){state.floorList floorList;}
};//action|用户处理派发action地方的可以书写异步语句、自己逻辑地方
const actions {//获取首页轮播图的数据async getBannerList({ commit }) {let result await reqGetBannerList();if (result.code 200) {commit(GETBANNERLIST, result.data);}},};export default {namespaced:true,state,mutations,actions,getters,
};ListContainer.vue
template.../template
scriptimport { mapState } from vuex;export default {name: ListContainer,mounted() {this.$store.dispatch(home/getBannerList);},computed: {...mapState({bannerList: (state) state.home.bannerList,}),},
};
/script
style.../style25. QRCode
安装插件npm install qrcode
import QRCode from qrcode// With promises
QRCode.toDataURL(I am a pony!) // 返回的是一个Promise对象可以使用then也可以使用下面的async和await组合.then(url {console.log(url)}).catch(err {console.error(err)})// With async/await
const generateQR async text {try {console.log(await QRCode.toDataURL(text))} catch (err) {console.error(err)}
}26. vue-lazyload
官网https://www.npmjs.com/package/vue-lazyload
安装插件npm i vue-lazyload -S
引入插件
import Vue from vue
import App from ./App.vue
import VueLazyload from vue-lazyloadVue.use(VueLazyload)// or with options
Vue.use(VueLazyload, {preLoad: 1.3,error: dist/error.png,loading: dist/loading.gif,attempt: 1
})new Vue({el: body,components: {App}
})template
ulli v-forimg in listimg v-lazyimg.src /li
/ul
