安徽省建设工程造价管理总站网站,做spa的网站怎么推广,中国的网站域名是什么,广州抖音seo公司1.Vue路由-404
作用#xff1a;当路径找不到匹配时#xff0c;给个提示页面
位置#xff1a;配在路由最后
语法#xff1a;path:*#xff08;任意路径#xff09;-前面不匹配就命中最后这个 2.Vue路由-模式设置
hash路由#xff08;默认#xff09; 例如#xff…1.Vue路由-404
作用当路径找不到匹配时给个提示页面
位置配在路由最后
语法path:*任意路径-前面不匹配就命中最后这个 2.Vue路由-模式设置
hash路由默认 例如http://localhost:8080/#/homehistory路由常用 http://localhost:8080/home以后上线需要服务器端支持
3.编程式跳转
查询参数传参
方式一适合单一传参 方式二适合传多个值 动态路由传参 4.基于vueCli自定义创建项目架子 5.ESlint代码规范
代码规范一套写代码的约定规则。
JavaScript Style规范说明 https://standardjs.com/rules-zhcn.html
6.Vuex
1.是什么
Vuex是一个vue的状态管理工具状态就是数据
大白话vuex是一个插件可以帮我们管理vue通用的数据多组件共享的数据
2.场景
①某个状态在很多个组件来使用个人信息
②多个组件共同维护一份数据购物车
3.优势
①共同维护一份数据数据集中化管理
②响应式变化
③操作简洁vuex提供了一些辅助函数 步骤
目标安装vuex插件初始化一个空仓库 安装 Vuex 库
可以使用 npm 或者 yarn 等包管理器来安装 Vuex 库。
npm install vuex
2.创建 store
在 Vue 3 中需要先创建一个 store 对象然后再将其传递给 Vue 的 createApp() 函数来创建 Vue 应用程序。
import { createStore } from vuexconst store createStore({state: {count: 0},mutations: {increment(state) {state.count}},actions: {incrementAsync({ commit }) {setTimeout(() {commit(increment)}, 1000)}}
})export default store3.将 store 对象注入到 Vue 应用程序
可以使用 app.use() 方法将 store 对象注入到 Vue 应用程序中。
import { createApp } from vue
import App from ./App.vue
import store from ./storeconst app createApp(App)
app.use(store)
app.mount(#app)4.在组件中使用 store
核心概念-state
使用数据
①通过store直接访问
1this.$store.state.count
2import 导入 store
在main.js文件中可以先导入store后使用this.$store.count
辅助函数-mapState
在组件中可以使用 computed 属性来获取 store 中的状态使用 methods 属性来调用 store 中的 mutations 和 actions。 mapState([count])得到的是一个对象可以使用展开运算符将展开的对象放到computed中
templatedivpCount: {{ count }}/pbutton clickincrementIncrement/buttonbutton clickincrementAsyncIncrement Async/button/div
/templatescript
import { mapState, mapMutations, mapActions } from vuexexport default {computed: {...mapState([count])},methods: {...mapMutations([increment]),...mapActions([incrementAsync])}
}
/script核心概念-mutations
目标明确vuex同样遵循单向数据流组件中不能直接修改仓库的数据。
错误代码this.$store.state.count
目标掌握mutations的操作流程来修改state数据。state数据的修改只能通过mutations
1.定义mutations对象对象中存放修改state的方法。 2.组件中调用mutations 传参
提交mutation是可以传递参数的 this.$store.commit(xxx,参数 如果想要传递多个参数的时候可以用对象传递
注意点mutation参数有且只能有一个如果需要多个参数包装成一个对象。 store和使用者的双向绑定 辅助函数mapMutations
目标掌握辅助函数maoMutations映射方法
mapMutations和mapState很像它是把位于mutations中的方法提取了出来映射到组件methods中 核心概念-actions
目标明确actions的基本语法处理异步操作
需求一秒钟之后修改state的count成666
说明:mutations必须是同步的便于监测数据变化记录调试 action中并不是直接修改store中的值而是通过commit提交mutation中的方法来修改值
辅助函数-mapActions
目标掌握辅助函数mapActions映射方法。
mapActions是把位于actions中的方法提取出来映射到组件methods中 核心概念-getters
目标掌握核心概念getters的基本语法类似于计算属性
说明除了state之外有时我们还需要从state中派生出一些状态这些状态是依赖state的此时会用到getters 2.访问getters
①通过store访问getters
{{$store.getters.filterList}}
②通过辅助函数mapGetters映射
computed:{
...mapGetters([filterList])
},
{{filterList}}
辅助函数-mapGetters 核心概念-模块module进阶语法
目标掌握核心概念module模块的创建
由于vuex使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store对象就是可能变得相当臃肿。当项目变得越来越大的时候Vuex会变得越来越难以维护。 访问模块中state
目标掌握模块中state的访问语法 尽管已经分模块了但其实子模块的状态还是会挂到根级别的state中属性名就是模块名。
使用模块中的数据
①直接通过模块名访问$route.store.模块名.xxx
②通过mapState映射
默认根级别的映射 mapState([xxx])
子模块的映射 mapState(模块名,[xxx])-需要开启命名空间 访问模块getters
目标掌握模块中getters的访问语法
使用模块中getters中的数据
①直接通过模块名访问$store.getters[模块名/xxx]
②通过mapGetters映射
默认根级别的映射mapGetters([xxx])
子模块的映射mapGetters模块名,[xxx]-需要开启命名空间 const getters {//分模块后state指代子模块的stateUpperCaseName(state) {return state.userInfo.name.toUpperCase()}
} 访问mutation的调用语法
注意默认模块中的mutation和actions会被挂载到全局需要开启命名空间才会挂载到子模块
调用子模块中mutation
①直接通过store调用$store.commit(模块名/xxx,额外参数)
②通过mapMutations映射
默认根级别的映射mapMutations([xxx])
子模块的映射mapMutations模块名,[xxx]-需要开启命名空间 访问action Vue3的优势 1.代码量变少了
2.分散式维护转为集中式维护更容易封装复用。
create-vue搭建Vue3项目
1.前提环境条件
已安装16.0或更高版本的Node.js
node -v
2.创建一个Vue应用
npm init vuelatest
这一指令将会安装并执行create-vue 项目文件简介 组件导入无需注册。
Vue3语法
组件导入无需注册。
new Vue()创建一个应用实例createApp()
createRouter()、createStore()
将创建实例进行封装保证每个实例的独立封闭性。
组合式API-setup 1. setup比beforeCreate生命周期函数还要早。
2.setup函数中获取不到this(this是undefined)vue3中基本上不会用到this 如果想要使用setup中的数据必须return 问题每次都要return好麻烦有什么解决方法吗
只需要在script中加上setup
