1 创建vue3项目
补充:链式调用
2 setup函数
3 ref函数
4 reactive函数
补充:element-plus
5 计算和监听属性
6 vue3的生命周期
7 torefs的使用
8 vue3 setup写法
1 创建vue3项目
# 两种方式
- vue-cli:vue脚手架---》创建vue项目---》构建vue项目--》工具链
跟之前一样
- vite :https://cn.vitejs.dev/
-npm create vue@latest
// 或者
-npm create vite@latest
一路选择即可
# 运行vue3项目
-vue-cli跟之前一样
-vite 创建的:npm install npm run dev
# vite为什么这么快
-冷启动
-热加载
-按需编译
补充:链式调用
# 编程语言的链式调用
对象.changeName('lin').printName().showAge()
# python 如何实现链式调用
class Person:
def changeName(self,name):
self.name=name
return self
def printName(self):
print(self.name)
return self
2 setup函数
# 使用 vue-cli创建的项目讲
setup的两个注意点
# setup执行的时机
在beforeCreate之前执行一次,this是undefined。
# setup的参数
props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
context:上下文对象
attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。
# 总结:
setup执行是在beforeCreate,没有this对象,以后不要用this了
如果写setup函数,想接收父组件自定义属性传入的值,需要
export default {
setup(props) {
console.log(props.msg)
},
props: ['msg']
}
如果是vue3的最新写法,想接收父组件自定义属性传入的值,需要
<script setup>
defineProps(['msg'])
</script>
<template>
<div class="home">
<p>我的名字是:{{ name }}</p>
<p>我的年龄是:{{ age }}</p>
<button @click="handleClick">点我看信息</button>
</div>
</template>
<script>
export default {
setup() {
// 1 定义数据
const name = 'lqz'
let age = 19
// 2 定义方法
const showInfo = () => {
alert(`姓名是:${name},年龄是:${age}`)
}
return {name, age, showInfo}
},
// 注意:不要混用
// methods: {
// handleClick() {
// alert(`姓名是:${this.name},年龄是:${this.age}`)
// }
// }
}
</script>
3 ref函数
<template>
<div class="home">
<p>我的名字是:{{ name }}</p>
<p>我的年龄是:{{ age }}</p>
<button @click="handleAdd">点我年龄+1</button>
<button @click="handleChangeName">点我秒变彭于晏</button>
</div>
</template>
<script>
// 变量要具备响应式---》页面内容变化,变量和变,变量变化,页面也变
// 普通变量,通过ref绑定响应式
// 引用类型变量:通过reactive 绑定响应式
import {ref} from 'vue'
export default {
setup() {
// 1 定义数据
let name = ref('lin')
let age = ref(19)
// 2 定义方法
const handleAdd = () => {
age.value += 1
console.log(typeof age)
}
const handleChangeName = () => {
name.value = '彭于晏'
}
return {name, age, handleAdd,handleChangeName}
}
}
</script>
4 reactive函数
<template>
<div class="home">
<p>我的名字是:{{ data.name }}</p>
<p>我的年龄是:{{ data.age }}</p>
<p>我的爱好是:{{ hobby }}</p>
<button @click="addAge">点我年龄+1</button>
<br>
{{ obj.hobby }}
<br>
<button @click="changeHobby">点我把保龄球换成足球</button>
<hr>
<HelloWorld msg="asdfasdfasdfasdf"></HelloWorld>
</div>
</template>
<script>
// 变量要具备响应式---》页面内容变化,变量和变,变量变化,页面也变
// 普通变量值类型,通过ref绑定响应式 数字,字符串
// 引用类型变量:通过reactive 绑定响应式 对象,数组
import {reactive, ref} from 'vue'
export default {
setup(props) {
let hobby = ref('篮球')
let obj = ref({
age: 99,
hobby: '保龄球'
})
const changeHobby = () => {
console.log(obj)
obj.value.hobby = '足球'
}
let data = reactive({
name: '彭于晏',
age: 19
})
const addAge = () => {
//data.age++
console.log(typeof data)
console.log(data) // 是一个代理对象,无法拿出原来对象,但是操作起来跟操作源对象一样
data.age++
}
return {hobby, data, addAge, obj, changeHobby}
}
}
</script>
-------------------------------------------------------------------------
ref
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
JS中操作数据: xxx.value
模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
备注:
接收的数据可以是:基本类型(值类型)、也可以是对象(引用类型)类型。
reactive
作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
reactive定义的响应式数据是“深层次的”,无论套多少层,都具备响应式
# 总结:
如果用基本数据类型:数字,字符串,布尔,用ref做响应式
如果是对象类型,用ref和reactive都可以,但是建议使用reactive
如果使用ref包裹对象类型,多了一层value
补充:element-plus
1.官网
https://element-plus.org/
2.安装
npm install element-plus --save
3.使用
import { xxx } from 'element-plus'
5 计算和监听属性
<template>
<div class="home">
<input type="text" v-model="name.firstName">
<input type="text" v-model="name.lastName">
<br>
<input type="text" v-model="fullName">
<button @click="age++">点我年龄加</button>
</div>
</template>
<script>
import {computed, watch, reactive, ref,watchEffect} from 'vue'
export default {
name: 'HomeView',
setup() {
// 计算属性:computed
let name = reactive({
firstName: 'lin',
lastName: 'dj'
})
let fullName = computed({
get() {
return name.firstName + '-' + name.lastName
},
set(value) {
const nameArr = value.split('-')
name.firstName = nameArr[0]
name.lastName = nameArr[1]
}
})
let age = ref(19)
// 监听属性
// 监听基本类型
watch(age, (newValue, oldValue) => {
console.log(oldValue)
console.log(newValue)
})
// 监听对象
watch(() => name.firstName, (newValue, oldValue) => {
console.log(oldValue)
console.log(newValue)
})
// watchEffect函数
watchEffect(() => {
const x1 = age.value
const x2 = name.firstName
console.log('watchEffect配置的回调执行了')
})
return {name, fullName, age}
}
}
/*
ref
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
JS中操作数据: xxx.value
模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
备注:
接收的数据可以是:基本类型(值类型)、也可以是对象(引用类型)类型。
reactive
作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
reactive定义的响应式数据是“深层次的”,无论套多少层,都具备响应式
# 总结:
如果用基本数据类型:数字,字符串,布尔,用ref做响应式
如果是对象类型,用ref和reactive都可以,但是建议使用reactive
如果使用ref包裹对象类型,多了一层value
*/
</script>
6 vue3的生命周期
# vue2 生命周期---8个
# vue3 变了
-想把生命周期写下setup函数中
-把生命周期写在配置项中
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
<template>
<div class="home">
<h1>八个生命周期钩子</h1>
</div>
</template>
<script>
import axios from 'axios'
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from "vue";
export default {
// setup()函数
setup() {
// 生命周期
// 第一个beforeCreate
console.log('我是beforeCreate, 我和setup函数融合了')
let name = ref('lin')
// 第二个Created
console.log('我是Created, 我也和setup函数融合了')
axios.get('http://localhost:8080/').then(res => {
name.value = res.data.name
})
let t = setInterval(() => {
console.log('lin')
}, 3000)
// 第三个onBeforeMount
onBeforeMount(() => {
console.log('挂载了')
})
// 第四个onMounted
onMounted(() => {
console.log('挂载完成了')
})
// 第五个onBeforeUpdate
onBeforeUpdate(() => {
console.log('更新数据')
})
// 第六个onUpdated
onUpdated(() => {
console.log('数据更新完成')
})
// 第七个onBeforeUnmount
onBeforeUnmount(() => {
console.log('在组件卸载之前执行的操作')
clearInterval(t)
t = null
})
// 第八个onUnmounted
onUnmounted(() => {
console.log('组件卸载完成')
})
return {}
}
}
</script>
7 torefs的使用
<template>
<div class="home">
<h1>演示toRefs</h1>
<!-- {{userinfo.name}}是{{userinfo.age}}岁了-->
{{name}}是{{age}}岁了
</div>
</template>
<script>
import {reactive, toRefs} from "vue";
export default {
// setup()函数
setup() {
// let userinfo = reactive({
// name: 'lin',
// age: 20
// })
//
// return {userinfo}
// 或者
let data = reactive({
name: 'lin',
age: 20
})
return {...toRefs(data)}
}
// 对象的解压
let data ={'name':'lin',age:19}
let dict={...data,hobby:'篮球'}
console.log(dict)
</script>
8 vue3 setup写法
# 以后vue3推荐,把setup函数的代码,直接写在script中
<script setup>
定义变量
写函数
不用return,在html中直接使用
</script>
# 使用组件,直接导入,不需要配置,直接用即可
import HelloWorld from "../components/HelloWorld.vue";
在html中直接用:<HelloWorld msg="hello"></HelloWorld>
# 自定义属性,在子组件中接收
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>
<template>
<hello-world msg="hello"></hello-world>
{{name}}
<p><button @click="changeName">点我看是谁</button></p>
</template>
<script setup>
import HelloWorld from "../components/HelloWorld.vue"
import {ref} from 'vue'
let name = ref('lin')
let changeName = () => {
name.value = '彭于晏'
}
</script>