新开的公司做网站多少钱,微官网制作平台有哪些,办公室空间装修设计,网站维护多少钱自定义创建项目#xff1a;基于VueCli自定义创建项目架子
安装脚手架-创建项目-选择自定义-Babel/Router/CSS/Linter
路由配置项很多#xff0c;希望创建项目时就把架子搭好
hash模式和history模式 页面跳转和加载模式
Vue为单页面#xff0c;只有一个HTML…自定义创建项目基于VueCli自定义创建项目架子
安装脚手架-创建项目-选择自定义-Babel/Router/CSS/Linter
路由配置项很多希望创建项目时就把架子搭好
hash模式和history模式 页面跳转和加载模式
Vue为单页面只有一个HTML物理文件。通过路由系统将项目组件与URL路径绑定。一个HTML物理文件切换页面时既需要让访问的URL路径变又不能触发HTML物理文件重新加载就使得VueRouter的跳页模式不能使用普通的超链接方式。
hash模式使用锚点技术重写URL访问路径在原有URL路径后拼接/#/xxx
显示新Dom对象隐藏旧dom对象 hash模式是纯静态路由
history模式直接重写url视觉上更美观 不是纯静态路由
Use history node for router?n
ESLintStandard config无分号规范
Lint on save保存时校验
In dedicated config file放在单独的文件里便于管理
ESLint自动修复
设置-右上角打开设置
//当保存的时候ESLint自动帮我们修复错误
editor.codeActionsOnSave:{source.fixAll:true
},
//保存代码不自动格式化
editor.formatOnSave:false
vuex状态管理工具 管理vue通用的数据多组件共享的数据
场景某个状态在很多个组件来使用个人信息多个组件共同维护一份数据
优势共同维护一份数据数据集中化管理响应式变化操作简洁vuex提供了辅助函数
基于脚手架创建项目构建vuex多组件数据共享环境
创建项目创建三组件
安装Vuex插件初始化一个空仓库安装vuex3都是小写
-新建store文件夹/index.js专门放Vuex
-Vue.use(Vuex)创建仓库new Vuex.Store()
-main.js中导入挂载 检验App.vue中打印this.$store
类似于配置VueRouter多了.Store
state状态
给仓库提供数据store中state提供唯一的公共数据源
//创建仓库
const storenew Vuex.store({//state状态即数据类似与vue组件中的data//区别data是组件自己的数据;state:所有组件共享的数据state:{count:101}
})
使用仓库数据
1通过store直接访问
获取store
(1)this.$store
(2)import导入store
模板中{{$store.state.xxx}}
组件逻辑中this.store.state.xxx
JS模块中store.state.xxx
2通过辅助函数简化
{{count}}
computed:{count(){retune this.$store.state.count}
}
mapState是辅助函数帮我们把store中数据自动映射到组件的计算属性中
导入import {mapState} from vuex
-数组方式引入state mapState([count,title])
-展开运算映射符 在computed{}中写...mapState([count,title])页面中使用直接{{count}}
mutations修改数据
通过strict:true可以开启严格模式利于初学者检测代码上线时需要关闭
vuex遵循单项数据流组件中不能直接修改数据state数据只能通过mutations来修改
所有mutations函数第一个参数都是state mutations{对数据操作的函数state,其他参数如n state.countn}
子组件调用时this.$store.commit(函数名字n)
mutations练习输入框值和state值双向绑定
1输入框内容渲染value
2监听输入获取内容input“handleInput”
3封装mutations处理函数 mutations{changeCountstatenewCount{}}
4调用传参commit调用 handleInpute{this.$store.commit(changeCount,num)}
辅助函数mapMutations(类似于mapState)
导入import {mapState,mapMutations} from vuex
-数组方式引入state mapMutations([subCount])
-展开运算映射符 在methods{}中写...mapMutations([subCount])页面中使用直接this.subCount(10)调用
actions处理异步操作
mutations必须是同步的便于监测数据变化记录调试
1提供actions方法不能直接操作state
//context上下文(此处未分模块可以当成store仓库)
actions{setAsynCount (context,num){//一秒后给一个数去修改numsetTimeout((){context.commit(changeCount,num)},1000)}
}
2页面中dispatch调用
this.$store.dispatch(setAsyncCount,200)
mapActions
导入import {mapState,mapMutations,mapActions} from vuex
-数组方式引入state mapActions([changeCountAction])
-展开运算映射符 在methods{}中写...mapActions([changeCountAction])页面中使用直接this.changeCountAction(666)调用
getters(类似于计算属性)
1定义getters
getters:{//getters函数第一个参数是state,必须要有返回值filterList(state)//过滤{return state.list.filter(itemitem5)}
}
2访问getters
通过store访问getters
{{$store.getters.filterList}}
通过辅助函数mapGetters映射
computed:{...mapGetters([filterList])},
{{filterList}}
模块module进阶语法
vuex使用单一状态树应用的所有状态会集中到一个较大的对象。store对象可能变得臃肿。
user模块store/modules/user.js
const state{userInfo:{name}
}
const mutations{}
const actions{}
const getters{}
export default{state,mutations,actions,getters
}
import users from ./modeuls/user
const store new Vuex.store({modules:{user}
})
1直接通过模块名访问
多个参数封装成对象传递{id,newCount},接收时额外参数就是obj
$store.state.模块名.xxx
$store.getters[模块名/xxx]
$store.commit(模块名/xxx,额外参数)//mutations
$store.dispatch(模块名/xxx,额外参数)//action
2通过mapState映射
子模块的映射...mapState(模块名[xxx])、...mapGetters(模块名[xxx])、...mapMutations(模块名、...mapActions(模块名[xxx])[xxx])需要开启命名空间在模块内导出部分export default{}加上namespacedtrue
