外贸优秀网站,seo010,WordPress同步某个表,html网站搭建一、Vue快速上手
1、Vue概念
vue 是一个用于构建用户界面的渐进式框架#xff0c;由数据驱动
vue 的两种使用方式
vue 核心包开发#xff1a;局部模块改造vue 核心包与 vue 插件 工程化开发#xff1a;整站 开发
2、 创建实例 1、准备容器
div idapp由数据驱动
vue 的两种使用方式
vue 核心包开发局部模块改造vue 核心包与 vue 插件 工程化开发整站 开发
2、 创建实例 1、准备容器
div idapp/div2、导包
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script3、创建Vue实例
const vue new Vue()4、指定配置项 渲染数据
const vue new Vue({// el:配置选择器el: #app,// data:提供数据data: {msg: hello vue,h: VUE!}
})div idapph1{{ h }}/h1{{ msg }}
/div3、插值表达式
插值表达式语法{{ 表达式 }}
利用表达式插值渲染到页面
p{{ title }}/p4、响应式特性
数据的响应式处理数据变化视图自动更新。数据驱动视图更新
访问数据 “实例.属性名”修改数据 “实例.属性名” “新值” 二、Vue指令
1、常用指令
指令Directives是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
内容渲染指令v-html、v-text条件渲染指令v-show、v-if、v-else、v-else-if事件绑定指令v-on属性绑定指令 v-bind双向绑定指令v-model列表渲染指令v-for
2、内容渲染指令
v-text类似innerText将 uame 值渲染到 p 标签中覆盖 p 标签原有内容
p v-textunamehello/pv-html类似 innerHTML将 intro 值渲染到 p 标签中能够将HTML标签的样式呈现出来。
p v-htmlintrohello/p3、条件渲染指令
条件判断指令用来辅助开发者按需控制 DOM 的显示与隐藏。
v-show控制元素显示隐藏切换 display:none 控制显示隐藏。
v-if条件渲染基于条件判断是否创建 或 移除元素节点。
语法v-show “表达式”v-if “表达式”。表达式值为 true 显示 false 隐藏。
v-else 和 v-else-if
作用辅助v-if进行判断渲染语法v-else v-else-if“表达式”需要紧接着v-if使用
4、事件绑定指令
button v-on:事件名内联语句按钮/button
button v-on:事件名处理函数按钮/button
button v-on:事件名处理函数(实参)按钮/buttonv-on: 简写为
1内联语句
button clickcnt/button
div{{ cnt }}/div
button clickcnt--/button2处理函数
事件处理函数写在methods中methods中的函数内部的this都指向Vue实例
div idappbutton clickhd切换/buttonh3 v-showhidemethod函数切换显示和隐藏/h3
/div
scriptconst app new Vue({el: #app,data: {hide: true},methods: {hd() {this.hide !this.hide}}})
/script3调用传参
如果不传递任何参数则方法无需加小括号methods方法中可以直接使用 e 当做事件对象 如果传递了参数则实参 $event 表示事件对象固定用法 div idappdiv classboxh3小黑自动售货机/h3button clickfn(5)可乐5元/button/divp银行卡余额{{ money }}元/p
/divconst app new Vue({el: #app,data: {money: 100},methods: {fn(i) {this.money - i}}
})5、属性绑定指令
动态设置html的标签属性 比如src、url、title
语法**v-bind:**属性名“表达式”**v-bind:**可以简写成 :
img :srcimg6、列表渲染指令
v-for 列表渲染指令用来基于一个数组来循环渲染一个列表结构。
p v-for(item, index) in arr /pv-for 的语法
item 是数组中的每一项index 是每一项的索引可以省略arr 是被遍历的数组
ulli v-for(item, index) in list{{ index -- item}}/li
/ulv-for中的key给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
Vue 的默认行为会尝试原地修改元素就地复用
ulli v-for(item, index) in booksList :keyitem.idspan{{ item.name }}/spanspan{{ item.author }}/spanbutton clickdel(item.id)删除/button/li
/ul7、双向绑定指令
1、数据变化 视图自动更新
2、视图变化 数据自动更新
**语法**v-model“变量”
姓名input typetext v-modelusernamev-model绑定其他表单元素
输入框 input:text value文本域 textarea value复选框 input:checkbox checked单选框 input:radio checked下拉菜单 select value
8、指令修饰符
所谓指令修饰符就是通过.指明一些指令后缀不同的后缀封装了不同的处理操作 简化代码
keyup.enter 当点击enter键的时候才触发v-model.trim 去除首位空格v-model.number 转数字事件名.stop 阻止冒泡事件名.prevent 阻止默认行为事件名.stop.prevent 可以连用 即阻止事件冒泡也阻止默认行为
9、v-bind操作class
1数组
div classbox :class[ 类名1, 类名2, 类名3 ]/div2对象
当class动态绑定的是对象时键就是类名值就是布尔值如果值是true就有这个类否则没有这个类
div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div10、v-bind操作style
div classbox :style{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }/div三、computed计算属性
1、计算属性概述
基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
声明在 computed 配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名 }}
2、计算属性与方法区别
computed计算属性封装了一段对于数据的处理求得一个结果。methods计算属性给Vue实例提供一个方法调用以处理业务逻辑。
计算属性的优势 缓存特性提升性能计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变化了会自动重新计算并再次缓存 methods没有缓存特性
3、计算属性的完整写法
计算属性默认的简写只能读取访问不能 “修改” 四、watch侦听器
1、watch侦听器
监视数据变化执行一些业务逻辑或异步操作
watch同样声明在跟data同级的配置项中
简单写法简单类型数据直接监视完整写法添加额外配置项
data: { words: 苹果,obj: {words: 苹果}
},watch: {// 该方法会在数据变化时触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}2、侦听器完整语法
deep:true 对复杂类型进行深度监听immdiate:true 初始化 立刻执行一次
data: {obj: {words: 苹果,lang: italy},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}五、生命周期
1、Vue生命周期
生命周期四个阶段① 创建 ② 挂载 ③ 更新 ④ 销毁
创建阶段创建响应式数据挂载阶段渲染模板更新阶段修改数据更新视图销毁阶段销毁Vue实例 2、Vue生命周期钩子
Vue生命周期过程中会自动运行一些函数被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码 六、工程化开发
1、工程化开发和脚手架
核心包传统开发模式基于html / css / js 文件直接引入核心包开发 Vue。工程化开发模式基于构建工具例如webpack的环境中开发Vue。 工程化开发模式优点提高编码效率比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
脚手架Vue CLI Vue CLI 是Vue官方提供的一个全局命令工具
## 1、全局安装只需安装一次即可
vue create project-nameyarn global add vue/cli
## npm i vue/cli -g## 2、查看vue/cli版本
vue --version## 3、创建项目架子
vue create project-name## 4、启动项目
yarn serve
## npm run serve2、项目目录与运行流程 main.js 入口文件App.vue App根组件index.html 模板文件 3、组件化开发
组件化一个页面可以拆分成一个个组件每个组件有着自己独立的结构、样式、行为。
好处便于维护利于复用 → 提升开发效率。
组件分类普通组件、根组件。 Vue的三部分
template结构 有且只能一个根元素script: js逻辑style 样式 (可支持less需要装包) templatediv classAppdiv classbox clickfn/div/div
/templatescript
// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {created () {console.log(我是created)},methods: {fn () {alert(你好)}}
}
/scriptstyle langless
/* 让style支持less1. 给style加上 langless2. 安装依赖包 less less-loaderyarn add less less-loader -D (开发依赖)
*/
.App {width: 400px;height: 400px;background-color: pink;.box {只能在注册的组件内使用width: 100px;height: 100px;background-color: skyblue;}
}
/style4、普通组件的注册使用
1局部注册
特点只能在注册的组件内使用
创建.vue文件三个组成部分在使用的组件内先导入再注册当成html标签使用即可 组件名/组件名
组件名规范必须大驼峰命名法
// 导入需要注册的组件
import 组件对象 from .vue文件路径
import HmHeader from ./components/HmHeaderexport default { // 局部注册components: {组件名: 组件对象,HmHeader:HmHeaer,HmHeader}
}2全局注册
特点全局注册的组件在项目的任何组件中都能使用
创建.vue组件三个组成部分main.js中进行全局注册当成HTML标签直接使用
// 导入需要全局注册的组件
import HmButton from ./components/HmButton
Vue.component(HmButton, HmButton)5、scoped解决样式冲突 全局样式: 默认组件中的样式会作用到全局任何一个组件中都会受到此样式的影响 局部样式: 可以给组件加上scoped 属性可以让样式只作用于当前组件
templatediv classbaseBase/div
/templatescript
export default {}
/scriptstyle scoped
/stylescoped原理
当前组件内标签都被添加data-v-hash值 的属性css选择器都被添加 [data-v-hash值] 的属性选择器 6、data是一个函数
一个组件的 data 选项必须是一个函数。
目的保证每个组件实例维护独立的一份数据对象。每次创建新的组件实例都会新执行一次data 函数得到一个新对象。 script
export default {data: function () {return {count: 100,}},
}
/script七、组件通信
1、组件通信
1组件之间如何通信 2通信解决方案 2、父子通信
1父子通信
父组件通过 props 将数据传递给子组件子组件利用 $emit 通知父组件修改更新 父传子 给子组件以添加属性的方式传值子组件内部通过props接收模板中直接使用 props接收的值
**子传父**子组件利用 $emit 通知父组件进行修改更新 $emit触发事件给父组件发送消息通知父组件监听$emit触发的事件提供处理函数在函数的性参中获取传过来的参数
2props概述
Props组件上 注册的一些 自定义属性
作用向子组件传递数据
可以 传递 任意数量 的prop可以 传递 任意类型 的prop
3props校验
为组件的 prop 指定验证要求不符合要求控制台就会有错误提示。帮助开发者快速发现错误。
类型校验
props: {校验的属性名: 类型
},完整写法
props: {校验的属性名: {type: 类型, // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},5propsdata、单向数据流
data 的数据是自己的 → 随便改prop 的数据是外部的 → 不能直接改要遵循 单向数据流
单向数据流父级 props 的数据更新会向下流动影响子组件。这个数据流动是单向的
原则谁的数据谁负责 3、非父子通信
1event bus 事件总线
1、创建一个都能访问的事件总线 空Vue实例
import Vue from vue
const Bus new Vue()
export default Bus2、A组件接受方监听Bus的 $on事件
created () {Bus.$on(sendMsg, (msg) {this.msg msg})
}3、B组件发送方触发Bus的$emit事件
Bus.$emit(sendMsg, 这是一个消息)2provideinject
作用跨层级共享数据
1、父组件 provide 提供数据
export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}2、子、孙组件 inject 获取数据
export default {inject: [color,userInfo],created () {console.log(this.color, this.userInfo)}
}provide提供的简单类型的数据不是响应式的复杂类型数据是响应式。推荐提供复杂类型数据子/孙组件通过inject获取的数据不能在自身组件内修改
八、进阶语法
1、v-model进阶
1v-model原理
v-model本质上是一个语法糖。例如应用在输入框上就是value属性 和 input事件 的合写
input v-modelmsg typetextinput :valuemsg inputmsg $event.target.value typetext数据变视图跟着变 :value视图变数据跟着变 input $event 用于在模板中获取事件的形参 2表单类组件封装
v-model其实就是 :value和input事件的简写
子组件props通过value接收数据事件触发 input父组件v-model直接绑定数据
子组件
select :valuevalue changehandleChangeoption value1yx1/optionoption value2yx2/option
/selectscript
export default {props: [value],methods: {handleChange(e) {this.$emit(input, e.target.value)}}
}
/script父组件
VmolelTest v-modelselect/VmolelTest2、.sync修饰符
.sync可以实现 子组件 与 父组件数据 的 双向绑定
本质.sync修饰符 就是 :属性名 和 update:属性名 合写
父组件
//.sync写法
BaseDialog :visible.syncisShow /
--------------------------------------
// 完整写法
BaseDialog :visibleisShow update:visibleisShow $event
/子组件
props: {visible: Boolean
},this.$emit(update:visible, false)3、ref和$refs
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
1、给要获取的盒子添加ref属性
div refyx我真是伊煊/div
button clickchange/button2、通过 $refs 获取 this.\$refs.chartRef 获取
export default {methods: {change() {this.$refs.yx.innerText 其实我是扑流萤}}
}只用document.querySelect(‘.box’) 获取的是整个页面中的盒子 4、异步更新 与 $nextTick
Vue 是异步更新DOM (提升性能)
$nextTick等 DOM更新后才会触发执行此方法里的函数体
语法 this.$nextTick(函数体)
this.$nextTick(() {this.$refs.inp.focus()
})$nextTick 内的函数体 一定是箭头函数这样才能让函数内部的this指向Vue实例 九、自定义指令
1、基本语法
自定义指令封装一些DOM操作扩展额外的功能
全局注册
//在main.js中
Vue.directive(指令名, {inserted (el) {// 可以对 el 标签扩展额外功能el.focus()}
})局部注册
//在Vue组件的配置项中
directives: {指令名: {inserted (el) {// 可以对 el 标签扩展额外功能el.focus()}}
}在使用指令的时候一定要先注册再使用否则会报错
使用指令语法 v-指令名。
input typetext v-focus/ 注册指令时不用加v-前缀但使用时一定要加v-前缀
2、自定义指令传参
在绑定指令时可以通过“等号”的形式为指令 绑定 具体的参数值
div v-colorcolor我是内容/div通过 binding.value 可以拿到指令值指令值修改会 触发 update 函数
directives: {color: {inserted (el, binding) {el.style.color binding.value},update (el, binding) {el.style.color binding.value}}
}十、插槽
1、默认插槽
让组件内部的一些 结构 支持 自定义
组件内需要定制的结构部分改用slot/slot占位使用组件时 MyDialog/MyDialog标签内部, 传入结构替换slot给插槽传入内容时可以传入纯文本、html标签、组件
2、后备内容默认值
封装组件时可以为预留的 slot 插槽提供后备内容默认内容。
外部使用组件时不传东西则slot会显示后备内容外部使用组件时传东西了则slot整体会被换掉
templatediv classdialog-testslot我是默认内容/slot/div
/templatetemplatediv idappDialogTest我是自定义内容/DialogTestDialogTest/DialogTest/div
/template3、具名插槽
一个组件内有多处结构需要外部传入标签进行定制
多个slot使用name属性区分名字template配合v-slot:名字来分发对应标签
v-slot的简写 v-slot — #
templatediv classdialog-test2divname:slot namename/slot/div/div
/templateDialogTest2template #name伊煊/template
/DialogTest24、作用域插槽
定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据将来 使用组件时可以用
1、给 slot 标签, 以 添加属性的方式传值
slot :iditem.id msg测试文本/slot2、所有添加的属性, 都会被收集到一个对象中
{ id: 3, msg: 测试文本 }3、在template中, 通过 #插槽名 obj 接收默认插槽名为 default
MyTable :listlisttemplate #defaultobjbutton clickdel(obj.id)删除/button/template
/MyTable十一、路由
1、单页应用程序介绍
单页应用程序SPA是指所有的功能都在一个html页面上实现 网易云音乐 https://music.163.com/ 单页应用类网站系统类网站 / 内部网站 / 文档类网站 / 移动端站点多页应用类网站公司官网 / 电商类网站
优点页面按需更新
Vue中的路由路径和组件的映射关系
2、路由的基本使用
路由作用修改地址栏路径时切换显示匹配的组件
VueRouter的使用52
固定5个固定的步骤
1、下载 VueRouter 模块到当前工程版本3.6.5
yarn add vue-router3.6.52、main.js中引入VueRouter
import VueRouter from vue-router3、安装注册
Vue.use(VueRouter)4、创建路由对象
const router new VueRouter()5、注入将路由对象注入到new Vue实例中建立关联
new Vue({render: h h(App),router:router
}).$mount(#app)两个核心步骤
1、创建需要的组件views目录配置路由规则 2、配置导航配置路由出口(路径匹配的组件显示的位置)
div classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
div classtoprouter-view/router-view
/div3、组件的存放目录
.vue文件 本质无区别分类开来的目的就是为了 更易维护 src/views文件夹页面组件 - 页面展示 - 配合路由用 src/components文件夹复用组件 - 展示数据 - 常用于复用
4、路由的封装抽离
拆分模块利于维护 脚手架环境下 指代src目录可以用于快速引入组件
5、声明式导航
1导航链接
vue-router 提供了一个全局组件 router-link (取代 a 标签)
能跳转配置 to 属性指定路径(必须) 。本质还是 a 标签 to 无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式
divdiv classfooter_wraprouter-link to/find发现音乐/router-linkrouter-link to/my我的音乐/router-linkrouter-link to/friend朋友/router-link/divdiv classtop!-- 路由出口 → 匹配的组件所展示的位置 --router-view/router-view/div
/div实现高亮
当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active
router-link-active模糊匹配router-link-exact-active精确匹配
自定义类名
用于定制默认的两个类名
const router new VueRouter({routes: [...],linkActiveClass: 类名1,linkExactActiveClass: 类名2
})2查询参数传参
传递参数
router-link to/path?参数名值/router-link接受参数
this.$route.query.参数名3动态路由传参 动态路由后面的参数可以随便起名但要有语义 配置动态路由
const router new VueRouter({routes: [...,{ path: /search/:words, component: Search }]
})配置导航链接
router-link to/path/参数值/router-link对应页面组件接受参数
this.$route.params.参数名params后面的参数名要和动态路由配置的参数保持一致 4动态路由参数的可选符
/search/:words 表示必须要传参数。如果不传参数也希望匹配可以加个可选符?
const router new VueRouter({routes: [...,{ path: /search/:words?, component: Search }]
})8、Vue路由
1重定向
网页打开时 url 默认是 / 路径未匹配到组件时会出现空白
重定向 → 匹配 / 后, 强制跳转 /home 路径
{ path: 匹配路径, redirect: 重定向到的路径 },
// 比如
{ path:/ ,redirect:/home }2404
当路径找不到匹配时给个提示页面。一般都配置在其他路由规则的最后面。
import NotFind from /views/NotFindconst router new VueRouter({routes: [...{ path: *, component: NotFind } // 最后一个]
})3路由模式设置
路由的路径看起来不自然, 有个#
hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home 以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题 const router new VueRouter({mode:history, //默认是hashroutes:[]
})9、编程式导航
1path路径跳转
不传参
// 简单写法
this.$router.push(路由路径)// 完整写法
this.$router.push({path: 路由路径
})传参
// 1、query传参
// 简单写法
this.$router.push(/路径?参数名1参数值1参数2参数值2)
// 完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})// 2、动态路由传参
// 简单写法
this.$router.push(/路径/参数值)
// 完整写法
this.$router.push({path: /路径/参数值
})2name命名路由
适合 path 路径长的场景
不传参
路由规则必须配置name配置项
{ name: 路由名, path: /path/xxx, component: XXX },通过name来进行跳转
this.$router.push({name: 路由名
})传参
// 1、query传参
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})// 2、动态路由传参
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})10、二级路由
const router new VueRouter({routes: [{path: /,component: Layout,children:[//children中的配置项 跟一级路由中的配置项一模一样 { path:xxxx, component:xxxx.vue },{ path:xxxx, component:xxxx.vue },]}]
})这些二级路由对应的组件渲染到哪个一级路由下children就配置到哪个路由下边
配置了嵌套路由一定配置对应的路由出口否则不会渲染出对应的组件
11、组件缓存
keep-alive 是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。
keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件中。
templatediv classh5-wrapperkeep-aliverouter-view/router-view/keep-alive/div
/templatekeep-alive的三个属性
include组件名数组只有匹配的组件会被缓存exclude组件名数组任何匹配的组件都不会被缓存max最多可以缓存多少组件实例
keep-alive的两个生命周期钩子
activated 当组件被激活使用的时候触发 → 进入这个页面的时候触发deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
十二、代码规范
1、VueCli 自定义创建项目
1、安装脚手架
npm i vue/cli -g2、创建项目
vue create demo3、选自定义 4、选择配置 5、选择vue的版本 6、选择是否使用history模式 7、选择css预处理 8、选择eslint的风格 9、选择校验的时机 10、选择配置文件的生成方式 11、不保存预设 2、ESlint代码规范及手动修复
ESLint是一个代码检查工具用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时我们使用的是 JavaScript Standard Style 代码风格的规则。
根据错误提示来一项一项手动修正。
如果你不认识命令行中的语法报错是什么意思你可以根据错误代码去 ESLint 规则列表中查找其具体含义。
打开 ESLint 规则表使用页面搜索Ctrl F这个代码查找对该规则的一个释义。
3、通过eslint插件来实现自动修正
eslint会自动高亮错误显示通过配置eslint会自动帮助我们修复错误
十三、Vuex
1、Vuex 概述
Vuex 是一个 Vue 的 状态管理工具状态就是数据。 Vuex 是一个插件可以帮我们管理 Vue 通用的数据 多组件共享的数据 优点
共同维护一份数据数据集中化管理响应式变化操作简洁 (vuex提供了一些辅助函数) 2、Vuex的使用
1、安装vuex
yarn add vuex3
## npm i vuex32、新建 store/index.js 专门存放 vuex
为了维护项目目录的整洁在src目录下新建一个store目录其下放置一个index.js文件。 3、创建仓库 store/index.js
// 导入 vue
import Vue from vue// 导入 vuex
import Vuex from vuex// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库 store
const store new Vuex.Store()// 导出仓库
export default store4、在 main.js 中导入挂载到 Vue 实例上
import Vue from vue
import App from ./App.vue
import store from ./storeVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app)3、state 状态
State提供唯一的公共数据源所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件在state对象中可以添加我们要共享的数据。
// 创建仓库 store
const store new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {count: 101}
})访问Vuex中的数据
1、模板中使用
h1state的数据 - {{ $store.state.count }}/h12、组件逻辑中使用
this.$store.state.xxx3、js文件中使用
//main.jsimport store from /storeconsole.log(store.state.count)4、提供计算属性
h1state的数据 - {{ count }}/h1// 把state中数据定义在组件内的计算属性中
computed: {count () {return this.$store.state.count}
}4、辅助函数mapState
mapState是辅助函数帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法 1、导入mapState (mapState是vuex中的一个函数)
import { mapState } from vuex2、采用数组形式引入state属性
mapState([count]) 上面代码的最终得到的是 类似于 count () {return this.$store.state.count
}3、利用展开运算符将导出的状态映射给计算属性
computed: {...mapState([count])
}div state的数据{{ count }}/div5、严格模式和Vuex的单项数据流
明确 vuex 同样遵循单向数据流组件中不能直接修改仓库的数据
通过 strict: true 可以开启严格模式开启严格模式后直接修改state中的值会报错。
state数据的修改只能通过mutations并且mutations必须是同步的 6、mutations
1mutations
mutations是一个对象对象中存放修改state的方法。mutations必须是同步的。
1、定义mutations
const store new Vuex.Store({// 定义mutationsmutations: {}
})2、组件中提交 mutations
this.$store.commit(addCount)2带参数的 mutations
1、定义mutations带参数
const store new Vuex.Store({addCount (state, count) {state.count count}
})2、组件中提交 mutations
this.$store.commit(addCount, 10)提交的参数只能是一个如果有多个参数要传可以传递一个对象
this.$store.commit(addCount, {count: 10
})3mapMutations
mapMutations类似于mapState把位于mutations中的方法提取了出来
import { mapMutations } from vuex
methods: {...mapMutations([addCount])
}7、actions
1actions
state是存放数据的mutations是同步更新数据 (便于监测数据的变化更新视图等方便于调试工具查看变化)
actions则负责进行异步操作
1、
mutations: {changeCount (state, newCount) {state.count newCount}
}actions: {setAsyncCount (context, num) {// 一秒后, 给一个数, 去修改 numsetTimeout(() {context.commit(changeCount, num)}, 1000)}
}2、组件中通过dispatch调用
setAsyncCount () {this.$store.dispatch(setAsyncCount, 666)
}2mapActions
mapActions 是把位于 actions中的方法提取了出来映射到组件methods中
import { mapActions } from vuex
methods: {...mapActions([changeCountAction])
}8、getters
1getters
除了state之外有时我们还需要从state中筛选出符合条件的一些数据类似于computed计算属性这些数据是依赖state的此时会用到getters
1、定义getters
getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList: state state.list.filter(item item 5)
}2、使用getters
div{{ $store.getters.filterList }}/div2mapGetters
computed: {...mapGetters([filterList])
}div{{ filterList }}/div9、module模块化
1module
由于使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。 如果把所有的状态都放在state中当项目变得越来越大的时候Vuex会变得越来越难以维护 1、准备user模块 modules/user.js
const state {userInfo: {name: zs,age: 18}
}const mutations {}const actions {}const getters {}export default {state,mutations,actions,getters
}2、在store/index.js文件中的modules配置项中注册模块
import user from ./modules/userconst store new Vuex.Store({modules:{user}
})数据的访问
this.$store.state.模块名.xxx2state模块化
尽管已经分模块了但其实子模块的状态还是会挂到根级别的 state 中属性名就是模块名 直接通过模块名访问 $store.state.模块名.xxx通过 mapState 映射 默认根级别的映射 mapState([ xxx ])子模块的映射 mapState(模块名, [xxx]) 需要开启命名空间namespaced:true
export default {namespaced: true,...
}3getters模块化
直接通过模块名访问 $store.getters[模块名/xxx ]通过 mapGetters 映射 默认根级别的映射 mapGetters([ xxx ]) 子模块的映射 mapGetters(模块名, [xxx]) 需要开启命名空间
4mutations模块化
直接通过 store 调用 $store.commit(模块名/xxx , 额外参数)通过 mapMutations 映射 默认根级别的映射 mapMutations([ xxx ])子模块的映射 mapMutations(模块名, [xxx])需要开启命名空间
5actions模块化
直接通过 store 调用 $store.dispatch(模块名/xxx , 额外参数)通过 mapActions 映射 默认根级别的映射 mapActions([ xxx ])子模块的映射 mapActions(模块名, [xxx]) 需要开启命名空间
10、补json-server
json-server用于模拟后端接口服务环境
1、安装全局工具 json-server 全局工具仅需要安装一次
yarn global add json-server
npm i json-server -g2、代码根目录新建一个 db 目录
3、将资料 index.json 移入 db 目录
4、进入 db 目录执行命令启动后端接口服务 (使用–watch 参数 可以实时监听 json 文件的修改)
json-server --watch index.json十四、打包优化
1、publicPath
默认情况下需要放到服务器根目录打开如果希望双击运行需要配置 publicPath 配成相对路径
module.exports {// 设置获取.js,.css文件时是以相对地址为基准的。// https://cli.vuejs.org/zh/config/#publicpathpublicPath: ./
}2、路由懒加载
当打包构建应用时Javascript 包会变得非常大影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块然后当路由被访问的时候才加载对应组件这样就更加高效了。
const ProDetail () import(/views/prodetail)
const Pay () import(/views/pay)
const MyOrder () import(/views/myorder)
