vue3从入门到不敲代码

355

theme: channing-cyan

---vue3的创建和简单使用

 vue ui 开始创建你的vue3项目
开始配置项目

1. 手动开始配置你想要的预设

2.选择开启你用的功能- [dart-sass,babel,typescript,router,vuex ] 这是我准备用的功能

3.选择vue.js项目版本默认是vue2,改成vue3

4.创建完成后 打开项目运行

QQ截图20211122133944.png
这两个code插件适用vue3,

<template>
  <div id="nav">
   <input type="text" v-model="num">
      <button @click="clickFn">点击</button >
  </div>

</template>

<script>
import {ref,reactive} from 'vue'
export default {
  setup(props) {
const num=ref(1)
const clickFn= ()=>{
  console.log(num)
  num =num.value++
}
   return {
num,clickFn
    }
  }
}
</script>

需要用到哪个生命周期函数,就将对应函数的import进来,接着在setup中调return 返回,在template中的写法跟vue2一样,给元素添加个ref=''

我这里报错 Uncaught TypeError: "num" is read-only at _readOnlyError是因为num =num.value++这里改成 num.value++双向绑定。

<template>
  <div id="nav">
    <router-view></router-view> 
      <input type="text" v-model="num">
      <p>name:{{obj.name}}</p>
      <p>sex:{{obj.sex}}</p>
      <p>age:{{obj.age}}</p>
      <button @click="clickFn">点击</button >
  </div>

</template>

<script>
import {ref,reactive} from 'vue'
export default {
  setup(props) {
const num=ref(1)
const obj=reactive({
  name:"张麻子",
  age:21,
  sex:"男"
})
const clickFn= ()=>{
  console.log(num)
  num.value++;
  console.log(obj)
 obj.name='张三 '
 obj.sex="女"
}
     
    return {
num,clickFn,obj
    }
  }
}
</script>

复杂数据类型用reactive来绑定

vue3相比较vue2的生命周期进行名字上的改动,

  `beforeCreate`-> 使用 `setup()`
  `created` -> 使用 `setup()`
  `beforeMount` -> `onBeforeMount`
  `mounted`-> `onMounted`
  `beforeUpdate` -> `onBeforeUpdate`
  `updated`-> `onUpdated`
  `beforeUnmount` -> `onBeforeUnmount`
  `unmounted` -> `onUnmounted`
  `errorCaptured`-> `onErrorCaptured`
   `renderTracked`-> `onRenderTracked`
   `renderTriggered` -> `onRenderTriggered`
   `activated`-> `onActivated`
   `deactivated`-> `onDeactivated`

VUE3中对VUE2的写法是完全兼容的,你也可以在setup之外写VUE2.0的生命周期函数。