vue3 基础使用
文章目录
1、vue3介绍
2、vue3创建项目的两种方式
vue-cli:创建vue2和vue3
跟vue2一样
vite:创建vue3,创建最新
npm init vue@latest
vite创建另一种方式:创建vue3.0.4版本
npm init vite-app <project-name>
- 进入工程目录
cd <project-name>
- 安装依赖
npm install
- 运行
npm run dev
以后在页面中的this,已经不是vue2中的vc对象了,是一个代理对象
3、setup函数
vue 心怎的setup配置项函数
在里面可以定义变量
定义函数
必须return 变量和函数,在模板中才能使用
<template>
<h2>{{ name }}</h2>
<h3>{{ age }}</h3>
<button @click="handleClick">点我看美女</button>
<br>
<button @click="handleAdd">点我,age+1</button>
</template>
<script>
export default {
name: 'App',
setup() { // setup中没有this了
// 以后所有的变量定义函数编写,都写在这个函数中
// 定义变量 如果这么写,变量渲染没问题,但是没有响应式,页面变了,变量不会变
let age = 19
let name = 'lqz'
// 定义函数
function handleClick() {
alert('美女~~~')
}
let handleAdd = () => {
console.log('我要开始加了')
age=age+1
console.log(age)
}
// 函数必须有返回值
return {
age, name, handleClick, handleAdd
}
}
}
</script>
setup 函数可以接收参数 context
接收上下文 当父传子 传来的值 会在context中 弥补this的作用
4、ref和reactive
导入使用:import {ref, reactive} from ‘vue’
总结
基本数据类型(数字,字符串,布尔)如果要加响应式:使用ref包裹,在模板中之间使用,js中通过对象.value取值
对象,数组引用使用reactive,ref可以包对象类型,但是用的时候必须.value
<template>
<h2>{{ name }}</h2>
<h3>{{ age }}</h3>
<br>
<button @click="handleAdd">点我,age+1</button>
<br>
<button @click="handleChangeName">点我name变化</button>
</template>
<script>
import {ref, reactive} from 'vue'
export default {
name: 'App',
setup() {
let age = ref(19) // age 已经不是数字了,是RefImpl的对象
let name = ref('lqz')
let handleAdd = () => {
console.log('我要开始加了,age是', age)
age.value = age.value + 1
console.log('我要开始加了,age是', age.value)
}
function handleChangeName(){
name.value=name.value+'?'
console.log(name)
}
return {
age, name, handleClick, handleAdd,handleChangeName
}
}
}
</script>
5、计算和监听属性
5.1、计算属性
export default {
name: 'App',
//普通写法
setup(){
let firstname = ref('')
let lastname = ref('')
//对象写法
let person=reactive({
firstname:'赵',
lastname:'日天'
})
// let fullName = computed(() => {
// return firstName.value + lastName.value
// })
let fullName = computed(()=>{
return person.firstname+person.lastname
})
// 计算属性 反向 通过更爱计算出的 值 改变原数据
person.fullName = computed({
get() {
return person.firstName + '-' + person.lastName
},
set(value) {
console.log(value)
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
return{firstname,lastname,person,fullName}
}
}
5.2、监听属性
import {computed, watch, ref, reactive, watchEffect} from 'vue'
export default {
name: 'App',
setup() {
// 1 计算属性案例1
let name = ref('lqz')
// 定义监听属性
watch(name, (newValue, old) => {
console.log('name变了')
// console.log(old)
// console.log(newValue)
})
// vue3 多的watchEffect,只要函数中使用的变量发生变化,它就会触发
watchEffect(() => {
// 只要该函数中使用的变量发生变化,它就会触发
// let a = name.value + '?'
console.log('watchEffect配置的回调执行了')
})
return {
name
}
}
}
6、生命周期
vue3.0 中可以继续使用vue2.x 中的生命周期钩子
beforeDestory 改名为beforeUnmount
destroyed改名为unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
7、hooks
hook:本质是一个函数,把setup函数中使用Composition API进行了封装
类似于 vue2.x中的mixin
自定义hook的优势:复用代码,让setup中的逻辑更清除易懂
7.1、hook/usePoint.js
import {onMounted, onUnmounted, reactive} from "vue";
export default function () {
let p = reactive({
x: 0,
y: 0
})
function getPoint(event) {
console.log(event)
p.x = event.pageX
p.y = event.pageY
}
// 声明周期钩子的onMounted,当页面挂载就会执行
onMounted(() => {
// 给数鼠标点击增加监听,当点击鼠标,就会执行这个函数
window.addEventListener('click', getPoint)
})
// 组件被销毁时,把功能去掉
onUnmounted(() => {
window.removeEventListener('click', getPoint)
})
return p
}
7.2、在想使用的组件中引入使用即可
<template>
<h2>x坐标是:{{ p.x }},y坐标是:{{ p.y }}</h2>
</template>
<script>
import {reactive, onMounted, onUnmounted} from 'vue'
import usePoint from '../hook/uesPoint.js'
export default {
name: "Point",
setup() {
let p = usePoint()
return {p}
}
}
</script>
<style scoped>
</style>
8、toRefs
setup函数,return {…toRefs(data)}可以解压复制
export default {
name: 'App',
setup() {
let data = reactive({
name: 'lqz',
age: 19,
isShow: true
})
function handleShow() {
console.log('ssdaf')
data.isShow = !data.isShow
data.age++
}
return {
...toRefs(data),
handleShow
// data
}
}
}
9、后台管理模板
vue-admin-template-master
跑起来
package.json 第7行加入
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve"
# java版的若依,带权限控制的后台管理模块
# python :django-vue-admin
# python flask-vue-admin
# go:gin-vue-admin