1 创建vue3项目?
# 两种方式
- vue-cli:vue脚手架---》创建vue项目---》构建vue项目--》工具链
跟之前一样
- vite :https://cn.vitejs.dev/
-npm create vue@latest
一路选择即可
# 运行vue3项目
-vue-cli跟之前一样
-vite 创建的:npm install npm run dev
# vite为什么这么快
-冷启动
-热加载
-按需编译
补充?
# 编程语言的链式调用
对象.changeName('lqz').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('lqz')
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'
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: 'HomeView',
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}
},
components: {
HelloWorld
}
}
/*
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>
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: 'liu',
lastName: 'qz'
})
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 生命周期?
# 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 {
computed,
watch,
reactive,
ref,
watchEffect,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from 'vue'
export default {
name: 'HomeView',
setup() {
// 第一个beforeCrete
console.log('我是beforeCrete')
// 第二个Creted
let name = ref('lqz')
console.log('Creted')
// axios.get().then(res => {
// name.value = res.data.name
// })
// 直接启动定时器
let t = setInterval(() => {
console.log('lqz')
}, 3000
)
// 第三个:onBeforeMount
onBeforeMount(() => {
console.log('挂载了')
})
onBeforeUnmount(() => {
clearInterval(t)
t = null
})
return {}
},
}
</script>
7 torefs?
<template>
<div class="home">
<h1>首页</h1>
{{ name }}---{{ age }}
</div>
</template>
<script>
import axios from "axios";
import {
reactive,
toRefs
} from 'vue'
export default {
name: 'HomeView',
setup() {
let data = reactive({
name: 'lqz',
age: 19
})
return {...toRefs(data)}
},
}
// 对象的解压
let data ={'name':'lqz',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="NB"></HelloWorld>
# 自定义属性,在子组件中接收
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>