一、vite快速创建Vue3项目
网址:https://vitejs.cn/vite3-cn/guide/#overview
npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app – --template vue
按照提示快速安装vue项目。
二、创建新应用
<div id="app">
<button @click="count++">{{ count }}</button>
</div>
import { createApp } from 'vue'
const app = createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
三、Vue3响应式基础
1. ref(可以申明任意数据类型)
引入ref,ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回,但在模板中使用ref,不需要使用.value
<template>
<button @click="increment">
{{ count }}
</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
function increment() {
count.value++
}
</script>
ref深层响应
import { ref } from 'vue'
const obj = ref({
nested: { count: 0 },
arr: ['foo', 'bar']
})
function mutateDeeply() {
// 以下都会按照期望工作
obj.value.nested.count++
obj.value.arr.push('baz')
}
注:每次我们都需要引入ref,我们可以安装插件,省略引入步骤
npm install -D unplugin-auto-import
具体详见:https://blog.csdn.net/poppingJ/article/details/125429506?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170046369616800182720462%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=170046369616800182720462&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2alltop_positive~default-1-125429506-null-null.142v96pc_search_result_base1&utm_term=vue3%20reactive&spm=1018.2226.3001.4187
2. reactive(主要用来申明数组和对象)
reactive定义引用数据类型(以对象和数组举例),它能够将复杂数据类型的内部属性或者数据项声明为响应式数据,所以reactive的响应式是深层次的,其底层是通过ES6的Proxy来实现数据响应式,相对于Vue2的Object.defineProperty,具有能监听增删操作,能监听对象属性的变化等优点
使用reactive定义对象数据类型举例
const paginationConfig = reactive({
pageNum: 1,
pageSize: 10
}) // 定义
const onChange = () => {
paginationConfig.pageNum = 2 // js使用
paginationConfig.pageSize = 20 // js使用
}
<a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>
若用reactive定义基本数据类型,Vue3会报警告错误
四、计算属性computed
<script setup>
import { reactive, computed } from 'vue'
const author = reactive({
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
})
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})
</script>
<template>
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</template>
计算属性默认是只读的。当你尝试修改一个计算属性时,你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性,你可以通过同时提供 getter 和 setter 来创建:
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
// getter
get() {
return firstName.value + ' ' + lastName.value
},
// setter
set(newValue) {
// 注意:我们这里使用的是解构赋值语法
[firstName.value, lastName.value] = newValue.split(' ')
}
})
</script>
现在当你再运行 fullName.value = ‘John Doe’ 时,setter 会被调用而 firstName 和 lastName 会随之更新。
五、监听属性watch
import { watch } from "vue"
watch( name , ( curVal , preVal )=>{ //业务处理 }, options ) ;
共有三个参数,分别为:
name:需要帧听的属性;
(curVal,preVal)=>{ //业务处理 } 箭头函数,是监听到的最新值和本次修改之前的值,此处进行逻辑处理。
options :配置项,对监听器的配置,如:是否深度监听。
例:
<template>
<div>
<div>值:{{count}}</div>
<button @click="add">改变值</button>
</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup(){
const count = ref(0);
const add = () => {
count.value ++
};
watch(count,(newVal,oldVal) => {
console.log('值改变了',newVal,oldVal)
})
return {
count,
add,
}
}
}
</script>
详见:https://blog.csdn.net/ZYS10000/article/details/124535467
五、类和样式
1.绑定对象
const isActive = ref(true)
const hasError = ref(false)
<div class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
渲染的结果会是:<div class="static active"></div>
或
const classObject = reactive({
active: true,
'text-danger': false
})
<div :class="classObject"></div>
//这将渲染:<div class="active"></div>
1.绑定数组
const activeClass = ref('active')
const errorClass = ref('text-danger')
<div :class="[activeClass, errorClass]"></div>