vue3学习文档

vue3 学习文档

https://www.zhihu.com/search?type=content&q=vue3学习——必会知识点(1)

1.vue3 安装

1)下载 vue.js 文件到本地，然后再 public 文件下的 index.html

中引入

2}vue3 项目 npm 的版本要大于 3.0 vue cli 4.xx 版本，

1.升级npm
npm -v
cnpm install npm -g(升级npm)
npm install cnpm -g(升级按装cnpm)

2.升级vue-cli

全局安装vue-cli
yarn global add@vue/cli
或
cnpm install -g @vue/cli

安装后查看版本
vue -version

2.用 vite 构建工具创建项目

npm init vite@latest my-vue-app -- --template

//npm 6.X npm init vite@latest my-vue-app --template vue //npm 7+ npm init
vite@latest my-vue-app -- --template vue //yarn yarn create vite my-vue-app
--template vue //pnpm pnpm create vite my-vue-app -- --template vue

3.注册全局组件

createApp(App).component('组件名'，组件)

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

const app = createApp(App)
// 引入全局组件
import total from './components/total.vue'
//注册全局组件
app.component('total', total)

app.mount('#app')

4.计算属性

简写：变量=computed(()=>{})

完整写法：变量=computed({

get(){},

set(){}

})

get 的作用：用一些什么值，得到这个计算属性的变量比如用 data 中的 num+1 来得到 newnum

set 的作用：计算属性变化了用新的值干点啥

<script setup>
import { reactive, computed } from 'vue'
const obj = reactive({
  firstName: '韩',
  lateName: '兄台',
})
1）计算属性的简写（只读）
obj.fullName = computed(() => {
  return obj.firstName + '-' + obj.lateName
})
2）计算属性的完整语法
obj.fullName = computed({
  get() {
    return obj.firstName + '-' + obj.lateName
  },
  set(value) {
    const nameArr = value.split('-')
    obj.firstName = nameArr[0]
    obj.lateName = nameArr[0]
  },
})
</script>

<template>
  <div>
    姓：<input type="text" v-model="obj.firstName" /> <br />
    名：<input type="text" v-model="obj.lateName" /><br />
    <h2>姓名:{{ obj.fullName }}</h2>
    姓名:<input type="text" v-model="obj.fullName" />
  </div>
</template>

<style scoped></style>

5.监听属性

watch(变量，（newValue,oldValue）=>{})

<template>
  <div>
    千米：<input type="text" v-model="kilometer" @focus="type = '千米'" /><br />
    米:<input type="text" v-model="meter" @focus="type = '米'" /><br />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const kilometer = ref(0)
const meter = ref(0)
const type = ref('千米')
watch(kilometer, (newValue, oldValue) => {
  if (type.value == '千米') {
    kilometer.value = newValue
    meter.value = newValue * 1000
  }
})
watch(meter, (newValue, oldValue) => {
  console.log(newValue, 'newValue')
  console.log(type.value, '米/千米')
  if (type.value == '米') {
    kilometer.value = newValue / 1000
    meter.value = newValue
  }
})
</script>

<style lang="scss" scoped></style>

6.自定义指令

directives:{指令名：{mouted(el，binding){console.log(el)}}}

binding 是组件上绑定的值，通过 binding.value.xxx 获取

<script>
export default {
  directives: {
    // 指令名
    change: {
      // 生命周期
      mounted(el, binding) {
        // 处理DOM的逻辑
        el.style.backgroundColor = binding.value.color
        el.style.width = binding.value.width
      },
    },
  },
}
</script>
<template>
  <button v-change="{ color: 'red', width: '400px' }">改变颜色</button>
</template>
<style scoped>
button {
  width: 200px;
  height: 40px;
  background-color: blue;
  color: white;
}
</style>

7.路由

1.安装(cnpm install vue-router@4)

2.router/index.js

import HelloWorld from '../components/HelloWorld.vue'
import computed from '../components/computed.vue'
import watch from '../components/watch.vue'
import directives from '../components/directive.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  { path: '/', component: HelloWorld },
  { path: '/computed', component: computed },
  { path: '/watch', component: watch },
  { path: '/directives', component: directives },
]
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router).mount('#app')

8.混入

全局混入：app.mixin({})
局部混入：mixins:[myMixin]

9.组件通信

1.父子通信
父组件中定义变量和接收修改变量的方法
子组件中 props 接受变量，用 props.xxx 获取变量
用 emit('事件名',参数)修改变量

父组件.vue

<template>
  <div>
    <h1>父组件</h1>
    <br />
    <Son :money="money" @change-money="changeMoney" />
  </div>
</template>

<script>
import { ref } from 'vue'
import Son from './son.vue'
export default {
  components: {
    Son,
  },
  setup() {
    const money = ref(1000)
    const changeMoney = (lastMoney) => {
      console.log(lastMoney, 'lastMoney')
      money.value = lastMoney
    }
    return { money, changeMoney }
  },
}
</script>

子组件.vue

<template>
  <div>
    <h1>子组件</h1>
    <br />
    <button @click="setMoney">{{ money }}</button>
  </div>
</template>

<script>
export default {
  props: {
    money: {
      type: Number,
      default: 1000,
    },
  },
  setup(props, { emit }) {
    console.log(props, props.money)

    const setMoney = () => {
      emit('change-money', 3000)
    }

    return { setMoney }
  },
}
</script>

跨组件通信
顶层组件在 setup 方法中使用provide函数提供数据 provide(' 变量命名', 变量)
任何底层组件**在 setup 方法中使用inject函数获取数据 inject('变量命名')

父组件.vue

<template>
  <father></father>
</template>

<script>
import Father from '@/components/Father'
import { provide } from 'vue'
export default {
  components: {
    Father
  },
  setup() {
    let name = '顶层数据'
    // 使用provide配置项注入数据 key - value
    provide('name', name)
  }
}
</script>

子组件.vue

<template>
  我是子组件
  {{ name }}
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const name = inject('name')
    return {
      name
    }
  }
}
</script>

10.ref 操作 dom,获取组件实例

使用 ref 函数传入 null 创建 ref 对象 => const 常量名称 = ref(null)
模板中通过定义 ref 属性等于 1 中创建的 ref 对象常量名称建立关联 => <h1 ref="常量名称"></h1>
setup 函数中必须返回：return {常量名称}
使用 => 常量名称.value

<template>
  <div class="box">
    <div ref="drag" class="box_drag">我会被拖动</div>
  </div>
</template>

<script setup> // vue3的语法糖，等同于在setup里面编写
import { onMounted, ref } from 'vue'
const drag = ref() //核心，如果这里是ts的话。这个ref是一个泛型ref<你的类型>()
onMounted(() => {
  console.log(drag.value)
})
</script>

vue3生命周期

1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

vue2           ------->      vue3
 
beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})
errorCaptured  -------->      onErrorCaptured(()=>{})

onMounted的用法

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      //todo
    })
  }
}

vue3中ref和reactive的使用
1.reactive函数不能传入简单类型
2.不能=号赋值修改
3.reactive解构出来的数据会丢失响应性，torefs()方法为它们添加响应性
4.在setup函数中使用ref结果，需要通过.value 访问

posted @ 2022-11-07 10:39 崛起崛起阅读(519) 评论(0) 收藏举报

刷新页面返回顶部

崛起崛起