theme: channing-cyan
---vue3的创建和简单使用
vue ui 开始创建你的vue3项目
开始配置项目
1. 手动开始配置你想要的预设
2.选择开启你用的功能- [dart-sass,babel,typescript,router,vuex ] 这是我准备用的功能
3.选择vue.js项目版本默认是vue2,改成vue3
4.创建完成后 打开项目运行
这两个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的生命周期函数。