VUE3

VUE3

一、创建一个vue实例

1.1传统开发方式

打开官网，点击快速上手，在html文件中引入vue.global.js文件

在body标签里:首先是容器，在script标签里用 Vue.createApp方法，用setup配置项存放数据和方法，setup里需要返回值。在Vue.createApp后面将内容挂载在容器内用mount("#id")

    
{{msg}}

如果想创建一个复杂的数据类型，可以使用reactive,并且将其返回return

setup() {
    const web = Vue.reactive({
        title: "你好"
    })
    return {
        msg: '阿衡',
        web
    }
}

简写：不写Vue，可以使用解构赋值

const { createApp, reactive } = Vue

1.2模块化开发

同样，在官网找到vue.esm-browser.js文件并引入

import { createApp, reactive } from './vue.esm-browser.js'

二、基础内容

2.1ref和reactive

1.ref用于存储基本数据类型，在修改值时，需要.value，并且记得要返回

引入

import { createApp, reactive, ref } from './vue.esm-browser.js'

定义和修改（setup里）

const num = ref(11)
num.value = 122

返回

return {
     num
}

2.reactive用于复杂的数据类型，在修改值时可以直接修改

2.2事件绑定

在标签中用v-on或者@绑定事件

 按钮

在setup里写函数

const edit = () => {
                    web.url = "22222"
                }

返回值

2.3v-show

在标签里用v-show

{{web.url}}

2.4v-if

在标签里使用v-if或v-else或v-else-if

2.5动态属性绑定v-bind

可以对value，src，class进行绑定，简写形式是：value

    
    
    
    
    
    
你好

​

2.6v-for

对于数组，可以v-for="value in data.number"；对于对象，可以v-for="(value,key,index) in data.user"；

在使用过程中，尽量加上:key="value.id"

    

        

            {{value}}
        
    
    

        

            {{index}}->{{value}}
        
    
    

        

            {{key}}->{{value}}->{{index}}
        
    
    

        

            {{index}}->{{value.name}}
        
    

​

2.7双向数据绑定v-model

可以对input类型的text，radio，checkbox和select进行双向数据绑定，都是通过value进行存储

在setup里的数据里，写一个复杂数据类型存储

    
    选项1
    选项2
    多选1
    多选2
    多选3
    
        11
        22
        33
    

​

2.8v-model的修饰符

.lazy是失去焦点或按下回车后渲染

.number是将输入框的值转化为数字类型

.trim是去掉首尾空格

2.9v-text和v-html

在setup里

const data = reactive({
    title: "阿衡",
    html: "www.baidu.com"
})

2.10计算属性

首先引入computed

在利用属性将计算属性挂载上去，用computed(()=>{}）箭头函数的形式

    
{{add}}

​

2.11监听器watch

导入watch

import { createApp, reactive, watch } from './vue.esm-browser.js'

监听某个数据

const data = reactive({
    year: "2023"
})
watch(data, (newValue, oldValue) => {
    console.log()
})

监听某个对象的属性（范围更小）

const data = reactive({
    year: "2023"
})
watch(() => data.year, (newValue, oldValue) => {
    console.log()
})

综合：
import { createApp, reactive, watch } from './vue.esm-browser.js'
createApp({
    setup() {
        const data = reactive({
            year: "2023"
        })
        watch(data, (newValue, oldValue) => {
            console.log()
        })
        watch(() => data.year, (newValue, oldValue) => {
            console.log()
        })
        return ({
            data
        })
    }
}).mount(".id")

2.12自动监听

同样还是先引入watchEffect，在setup里直接使用watchEffect即可

import { createApp, reactive, watchEffect } from './vue.esm-browser.js'
createApp({
    setup() {
        const data = reactive({
            year: "2023"
        })
        watchEffect(()=>{
            // 操作数据
        })
        return ({
            data
        })
    }
}).mount(".id")

三、vite

3.1.创建一个vite项目

打开命令行，进入到所需要创建的文件夹里

创建

npm create vite@latest

命名项目名

Project name: ... demo

进入项目文件夹

cd demo

安装

npm install

运行

 npm run dev

最后常用的是

npm run dev

之后删除一些没用的文件

1.style.css

2.components下的组件

3.打开main.js，删除style.css 的引入

4.打开App.vue，删除所有，只留下模板

ps：v3是快捷键

3.2将原来的文件变成vue文件

将导入和setup里的内容直接搬过来即可，不要return

将html结构直接放在template标签里即可

​

​

四、组件间的通信

4.1父传子

在父组件：

在使用子组件标签时，如果只是普通的字符串，直接传过去就可以

如果是一个对象，则利用v-bind绑定数据，在script里创建对象，推荐reactive

​

​

在子组件：

普通的字符串，用defineProps里的数组接收

如果是对象，要对对象的那个属性进行限制

​

​

​
​

​

​

4.2子传父

在子组件中：

首先声明一下需要传递的数据的名称，用defineEmits

然后再传递数据，用emits，第一个参数与声明时的相对应，第二个参数写需要传递的参数

ps：在可以通过自定义事件来决定传递数据的时机

​

​

在父组件中：

在使用子组件标签时，增加自定义事件，属性名是传递过来的数据名称，属性值是父组件内自己定义的函数，用来处理数据

在自定义函数中，用箭头函数的参数接收传递过来的数据

​

​

4.3跨组件通信-依赖注入

此方法只能用于父类(或祖先类)组件向子类(孙子类)组件传递参数

在父类(或祖先类)组件中：

可以传递响应式数据，ref，函数等

传递数据的一方需要引入provide，并定义好需要传递的数据，再通过provide("传递名",传递的数据)

​

​

在子类(孙子类)组件中：

先引入inject，再用inject("传递名")来获取数据

​

​

4.4插槽

作用：我们再子组件中可以将父组件所定义的一些模板片段插入到子组件的特定位置

在父组件中：

不需要引入其他文件，只需要在使用子组件标签的时候，用子组件标签包裹需要传递的代码片段（html代码）

1.匿名插槽

2.具名插槽（简写形式：#）

需要用一个template标签包裹，并且用v-slot:或者#取名

在子组件中：

同样不需要引入其他文件，只需要在template标签里，找到需要放的位置，用slot标签引用即可

1.匿名插槽