第一章：Vue概述

1.hello World

Vue：易学易用 性能出色 适用场景丰富的web前端框架vue是一款构建用户界面的JavaScript框架 它基于标准的html css JavaScript构建  并提供了一种声明式 组件化的编程模型 帮助你高效的开发 用户界面 无论是简单还是复杂的页面 vue都可以胜任vue特点：组件化开发  声明式的编程（命令行的方式）2.hello  Vue的书写方式一：在网页中直接使用

2.data函数

3.按钮练习

4.模板

点我一下 --点了{{count}}次
我是{{count}}

6.使用构建工具去书写Vue

1.打开终端 初始化项目 npm init -y2.安装vite依赖：npm add -D vite
2.安装vue依赖 ：npm add vue第一步创建html页面：

//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";//创建一个根组件
const App={data(){return{message:"计算机科学与技术学院欢迎你！"}},template:"
{{message}}
"}//创建应用挂载组件到页面
createApp(App).mount("#app")1.直接在网页中使用：//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";2.使用vite npm add vite -D
3.代码：//组件：就是一个普通的js对象const App={}//创建应用
const app=createApp(App)//挂载到页面
app.mount("#root")

第二章：组件化编程

1.Vue组件化

html页面代码：

index程序入口代码：
import {createApp} from "vue/dist/vue.esm-bundler.js";
import App from "../../1.helloVue/src/App";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")

子组件App代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";//2.在组件中注册子组件
export default
//创建与根组件
{data(){return{msg:"计算机科学与技术学院",count:0}},//2.在这里使用  就在这里注册组件  注册组件使用components注册components:{MyButton:MyButton//属性名：属性值},template:'
{{msg}}
' +'点我一下{{count}}' +'
{{count}}
' +'
{{count}}
' +'' +''
//组件与组件之间是互不影响的
}

子组件MyButton代码：
/*封装一个自定义的按钮组件
*
* */export default {data(){return{count:0}},template:'{{count}}'
}

2.单文件组件

当前template是用字符串的形式去编写模板  1.这些字符串会在项目运行时 在浏览器中会被编译为js的函数(性能不太好)2.在字符串中编写代码 体验感差为了我解决这种问题  vue为我们提供了一种单文件组件  单文件组件的格式就是vue  后缀名为vue在Vscode中要装 Vue language Features插件vue文件用来编写单文件组件 vue本省不能被浏览器识别  所以要用构建工具打包才可以使用同时vue文件在打包时 构建工具会直接将template替换为函数 无需再浏览器中中去编译 要想使用 需要安装插件：终端输入：npm add -D @vitejs/plugin-vue开始配置 vite.config.js文件vue.vue组件代码：App.js代码：
/*
* 使用组件：
*
*       --1.引入组件
* */
import MyButton from "../../2.helloVue/src/MyButton";
import vue from "../../2.helloVue/src/vue";//2.在组件中注册子组件
export default
//创建与根组件
{data(){return{msg:"计算机科学与技术学院",count:0}},//2.在这里使用  就在这里注册组件  注册组件使用components注册components:{MyButton:MyButton,//属性名：属性值Vue:vue},template:'
{{msg}}
' +'点我一下{{count}}' +'
{{count}}
' +'
{{count}}
' +'' +'' +''
//组件与组件之间是互不影响的
}index.js组件代码：import {createApp} from "vue/dist/vue.esm-bundler.js";
// import App from "../../1.helloVue/src/App";
import vue from "./vue";
//创建应用并挂载
//mount（）的返回值是根组件的实例
const vm=createApp(App).mount("#root")vite.config.js配置文件：import vue from "@vitejs/plugin-vue";export default {plugin:[vue()]}

3.自动创建项目

每次手动创建项目会很麻烦：因此我们使用自动工具来创建：命令：npm create vuenpm init vue@latest(推荐)
选择完成后  自动创建完成vue项目

4.代码分析

目录分析：--public  静态资源目录  一般是图标 

import App from "./App";
import {createApp} from 'vue'createApp(App).mount('#app')/*
* App.vue是根组件  createApp(App) 将组件关联到应用上
*           --会返回一个应用的实例化
*
*           app.mount("#app")将应用挂载到页面中 会返回一个根组件的实例  组件的实例的通常命名为vm
*
* */

5.响应式原理

//创建一个对象
const obj={name:"孙悟空",age:19
}/*
* 如果追修改对象的属性 那么就是仅仅修改了属性 没有去选择其他的事情 这种操作只会影响对象自身 不会导致元素的重新渲染
*
*   我们希望在修改一个属性的同时 可以运行一些其他的操作 比如重新触发元素重新渲染
* 要实现这个目的  必须呀对对象进行改造  Vue3中使用的是代理模式来完成对象的改造
*
* *//*console.log("之前的名字：",obj.name)
obj.name="无邪"
console.log(obj.name)
*///来为对象创建一个代理
const handler={//    在里面可以传入一个方法  get方法用来指定读取数据的写 它的返回值就是最终读取到的值get(target,prop,receiver){/*在Vue中data()返回的对象会被vue代理  vue代理后 当我们通过代理去读取属性时 返回值之前 它会先做义工跟踪的操作//track()跟踪谁用了我这个属性* *//*三个参数：target 被代理的对象prop:读取的属性*           receiver;代理对象* */console.log(target,prop,receiver)//指定get后 在通过道理读取对象的属性时 就会调用get方法来获取值return '计算机科学与技术学院'},set(target,prop,value,receiver){//    set会在代理修改对象时 调用console.log(target,prop,value,receiver)}};//用来处理代理的行为//创建代理
const proxy=new Proxy(obj,handler)
console.log(proxy)//修改代理的属性
console.log(proxy.name)
proxy.age=10;
console.log(proxy.age)
//因为proxy是对象的代理 所以它可以读取到对象里面的内容注意：设置代理时 不会对原对象产生影响vm.$data是设计的代理对象 通过vm可以直接访问到$data中的属性
vm.$data.msg等价于vm.msg
可以通过vm.$data多态的向组件中添加响应式数据created(){//会在组件创建完成后调用this.$data.name='计算机'
}

6.data详细介绍

7.methods介绍

8.计算属性

9.安装Vue调试工具

在edg浏览器里面输入：https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl 安装扩展 Vue.js调试程序

10.组合式API简介

11.setup

12.响应式代理

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue({//在这里设置为TRUE就可以自动转换解包reactivityTransform:true})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

21节 ref对象解包