第一章：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))}}
})

13.ref对象解包

14.模板的语法

15.v-bbind指令

16.style-scoped

17.样式

18.类和内联样式

练习

19.props介绍

20.props-1

21.props的配置

子组件：

父组件：

22.v-if指令

23.动态组件(第33节)

24.网页渲染

浏览器在渲染页面的时候：---1.加载页面的html和css(源码)---2.html转换为dom css会转换为cssOM---3.将DOM和CSSOM构建成一颗渲染树---4.对渲染树进行reflow (回流 重载)  就是计算元素的位置---5.对网页进行一个绘制 repaint(重绘)渲染树：Render Tree--从根元素楷书检查那些元素可见  以及他们的样式--忽略那些不可见的元素(display:none) 重排 回流计算渲染树中元素的大小和位置当页面中的元素大小或位置发生变化时 便会触发元素的重排注意：每次修改这类样式都会触发一次重排 所以n次修改多个样式就会重排n次  而重排是非常消耗系统资源的操作所以重排次数过多后 会导致网页的显示性能变差所以在开发时 我们应该尽量减少重排的次数可以通过class来简介的影响样式 来减少重排的次数
重绘：绘制页面当页面发生变化时  浏览器就会对页面进行重新的绘制在现代的前端框架中 这些东西都已经被框架优化过了  所以在使用react和Vue这些开开发时  就不需要考虑这些问题  唯独需要注意的是 尽量减少在框架中追操作dom

38节课