day1
1.挂载路由导航守卫(router/index.js)
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数,表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login') return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
2.主流逐渐库(vue3.0版本)
- element-plus (opens new window)基于 Vue 3.0 的桌面端组件库
- vant (opens new window)vant3.0版本,有赞前端团队开源移动端组件库
- ant-design-vue (opens new window)Ant Design Vue 2.0版本,社区根据蚂蚁 ant design 开发
setup函数
setup
组件初始化之前执行,它返回的数据和函数可在模版使用。
生命周期钩子函数
setup
创建实例前onBeforeMount
挂载DOM前onMounted
挂载DOM后onBeforeUpdate
更新组件前onUpdated
更新组件后onBeforeUnmount
卸载销毁前onUnmounted
卸载销毁后
reactive函数
通常是用来定义响应式对象数据
toRef函数
有一个响应式对象数据,但是模版中只需要使用其中一项数据。
toRefs函数
剥离响应式对象(解构|展开),想使用响应式对象中的多个或者所有属性做为响应式数据。
ref函数
- 当你明确知道需要的是一个响应式数据 *对象* 那么就使用 reactive 即可
- 其他情况使用ref
computed函数(计算属性)
- 给computed传入函数,返回值就是计算属性的值
- 给computed传入对象,get获取计算属性的值,set监听计算属性改变。
watch函数(侦听器)
// 当你需要监听数据的变化就可以使用watch
// 1. 监听一个ref数据
// 1.1 第一个参数 需要监听的目标
// 1.2 第二个参数 改变后触发的函数
// watch(count, (newVal,oldVal)=>{
// console.log(newVal,oldVal)
// })
// 2. 监听一个reactive数据
watch(obj, ()=>{
console.log('数据改变了')
})
watch(()=>obj.brand, ()=>{
console.log('brand数据改变了')
},{
// 5. 需要深度监听
deep: true,
// 6. 想默认触发
immediate: true
})
// 3. 监听多个数据的变化
// watch([count, obj], ()=>{
// console.log('监听多个数据改变了')
// })
// 4. 此时监听对象中某一个属性的变化 例如:obj.name
// 需要写成函数返回该属性的方式才能监听到
// watch(()=>obj.name,()=>{
// console.log('监听obj.name改变了')
// })
3.创建vue应用基本步骤
- 在main.js中导入createApp函数
- 定义App.vue组件,导入main.js
- 使用createApp函数基于App.vue组件创建应用实例
- 挂载至index.html的#app容器
落地代码:
App.vue
<template>
<div class="container">
我是根组件
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
main.js
// 创建一个vue应用
// 1. 导入createApp函数
// 2. 编写一个根组件App.vue,导入进来
// 3. 基于根组件创建应用实例
// 4. 挂载到index.html的#app容器
import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
4.git建立远程连接
git remote add origin [地址] 本地和远程建立连接
git push origin -u master