Vue3学习

1. 安装
2. 目录结构
3. 创建应用
4. 插值方式
5. 响应式
6. 计算属性
7. 类和行内样式

---

安装

安装最新的vue

npm init vite@latest或npm  init vue@latest

都是使用vite构建的 安装依赖

npm install

运行

npm run dev

目录结构

public-会复制到根目录
src
    assets-会被打包进assets目录并修改名字
    components-组件文件夹
index.html-文档
package.json-npm配置
README.md-说明
vite.config.js-vite配置

创建应用

vue3中可以使用组合api使用什么api就引入什么api

import {createApp} from "vue"//引入createApp
import App from "./App.vue"//使用构造器的老老实实这样写吧，不使用构造器可以使用组件选项进行代替

createApp(App).mount("#app")//挂载到id为app的元素上

createApp 的作用是 创建根组件，创建完还需要 挂载(mount) 到dom上 mount参数可以是css选择器也可以是dom元素

插值方式

在dom中可以使用文本插值 ( {{ }} ) 的方式插值，双大括号内可以写变量或简单的表达式，在标签内可以使用v-bind:(缩写 : )绑定数据具体使用如下：

<template>
    <div>
        {{"文本插值方式"}}
        <p v-bind:title="'值'">使用v-bind:绑定属性title</p>
        <p :title="'值'">使用缩写:方式绑定title</p>
    </div>
</template>

在vue中可以使用v-html和v-text两种插入和JavaScript中的dom语法innerHTML和innerText对应 使用方式： ```html ``` v-html会把值按html方式生成，v-text只会输出字符串

响应式

<script setup>
import {reactive} from "vue" //导入reactive
const state=reactive({//创建响应式对象
	count:0
})
</script>

<template>
	{{state}}
	<button @click="state.count++" v-text="state.count"></button>
</template>

使用reactive创建的对象的属性值始终保持响应式,reactive的响应式是深层次的,不能追踪非对象数据；
ref可以深层次检测所有数据可以赋值给值的value属性替换整个对象，reactive是根据属性追踪的，只能修改属性不应该直接替换整个对象
可以使用shallowRef和shallowReactive创建浅层的响应式，shallowRef和shallowReactive只能检测一层如:

shallowReactive({
	count:0,
	countObj:{
		count:0
	}
})

vue只能检测到外层的count的变化而检测不到count的变化

ref使用的注意事项
ref只会自动解套最外层的值，如果在对象内有值需要加.value或解构出来直接使用

ref语法糖$ref不需要使用.value 在vite.config.js里的vue插件函数上打开这个功能并重启

{
	reactivityTransform: false
}

计算属性

import {computed,ref} from "vue"//导入计算属性函数
let num=ref(1)
const computed1=computed(()=>{//第一种只读方式
	return num.value*3
})

const computed2=computed({//第二种读写方式
	get(){
		return num.value*2
	},
	set(val){
		num.value++
	}
})

计算属性是响应式的有缓存的，多次读写不会重新计算
可以使用$computed访问时就不需要加value了

类和行内样式

绑定类和普通类可以同时存在，类名绑定的方式有

1. 使用布尔变量觉得是否生成这个类
2. 使用对象保存类名对象
3. 使用数组保存字符串或类名对象

行内样式和普通样式可以同时存在，样式绑定的方式有

1. 使用字符串样式 样式名加变量属性值
2. 使用对象形式，以属性名为键，属性值为值
3. 使用数组形式，数组里可以同时保存1和2两种形式

<script>
	import {reactive,ref,shallowReactive,shallowRef,computed} from "vue" 
	const action=ref(true)//布尔值，用来控制类名是否存在
	const classStyle=reactive({
	text:action
	})//类对象，直接传个:class
	const classArr=ref([classStyle])//类数组，直接传个:class
	const red=ref("red")//字符串属性值，传给需要属性值的地方
	const styleObj=reactive({//样式对象
		color:red
	})
	const styleArr=reactive([styleObj])//样式数组，可以保存对象和字符串两种形式
</script>
<template>
	<div :class="{text:action}">1</div>
	<div :class="classStyle">2</div>
	<div :class="classArr">3</div>
	<div :style="{color:red}">1</div>
	<div :style="[{color:red}]">2</div>
	<div :style="styleObj">3</div>
	<div :style="styleArr">4</div>
</template>
<style>
.text{
  color: red;
}
</style>

还有其他内容还没学习...