vue学习笔记

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