第一章：Vue概述

1.hello World

Vue：易学易用 性能出色 适用场景丰富的web前端框架vue是一款构建用户界面的JavaScript框架 它基于标准的html css JavaScript构建  并提供了一种声明式 组件化的编程模型 帮助你高效的开发 用户界面 无论是简单还是复杂的页面 vue都可以胜任vue特点：组件化开发  声明式的编程（命令行的方式）2.hello  Vue的书写方式一：在网页中直接使用<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"></div><script><!--2.编写vue代码-->//在写vue的时候一切皆组件
/*1.：创建一个根组件  在vue3中组件就是一个普通的js对象
* *///1.创建一个vue组件
const Root={template:"<h1>你好  Vue！</h1>"//这个就是模板样式在  希望在页面中呈现的样子};//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)//2.创建一个App实例（应用实例）const app=Vue.createApp(Root)//3.将实例在页面中挂载
app.mount("#root")</script>
</body>
</html>

2.data函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"></div><script><!--2.编写vue代码-->//在写vue的时候一切皆组件/*1.：创建一个根组件  在vue3中组件就是一个普通的js对象* *///1.创建一个vue组件const Root={data(){//在这里书写一个data  注意：data是一个函数 需要一个对象作为返回值return{message:"Vue 计算机科学与技术学院",  //data方法返回的对象 其中的属性会自动添加到组件的实例中button:"我是计算机科学与技术学院按钮"}},//在模板中科院直接访问组件实例中的属性//在模板中使用插值语法  {{属性名}} 来访问组件实例中属性template:"<h1>你好  Vue！{{message}} , {{button}}</h1>"//这个就是模板样式在  希望在页面中呈现的样子};//在使用过程中组件用来创建组件实例 组件是组件实例的模板  组件->组件生成组件实例->虚拟dom->dom(在页面中呈现)//2.创建一个App实例（应用实例）const app=Vue.createApp(Root)//3.将实例在页面中挂载app.mount("#root")
</script>
</body>
</html>

3.按钮练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"></div><script>
<!--组件是用来创建组件实例-->//练习：创建按钮  点击按钮时 显示按钮点击的时间const Root={data(){return{//定义一个变量 记录点击次数//data中的数据湖自动和使用它的视图绑定 数据发生变化视图会自动刷新count:0,message:"Vue 计算机科学与技术学院",}},template:" <button @click='count++'>点我一下</button> --点了{{count}}次"};const app=Vue.createApp(Root)//3.将实例在页面中挂载app.mount("#root")</script>
</body>
</html>

4.模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1.引入Vue--><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="root"><!--  方式二：如果追定义在网页中 此时模板必须符合html的规范如果我们在组件中定义template 则会优先使用template作为模板 同时根元素中的所有内容都会被替换
如果在组件中没有定义template 则会使用根元素innerHtml作为模板使用
--><button @click='count++'>点我一下</button> --点了{{count}}次
<p>我是{{count}}</p>
</div><script>const Root={data(){return{count:0,message:"Vue 计算机科学与技术学院",}},//template是模板  它决定了组件最终的样子//定义模板的方式有三种 1.在组件中通过template属性去指定  2.直接在网页的根元素中指定// 方式一： template:" <button @click='count++'>点我一下</button> --点了{{count}}次"//方式三：使用render()函数直接渲染};const app=Vue.createApp(Root)//3.将实例在页面中挂载app.mount("#root")</script>
</body>
</html>

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

1.打开终端 初始化项目 npm init -y2.安装vite依赖：npm add -D vite
2.安装vue依赖 ：npm add vue第一步创建html页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello Vue 计算机科学与技术学院！</title><script type="module" src="./src/index.js"></script></head>
<body><div id="app"></div>
</body>
</html>


//引入vue  这里引入的vue不支持template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler.js";//创建一个根组件
const App={data(){return{message:"计算机科学与技术学院欢迎你！"}},template:"<h1>{{message}}</h1>"}//创建应用挂载组件到页面
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页面代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算机科学与技术学院</title><script type="module" src="./src/index.js"></script></head>
<body>
<div id="root"></div>
</body>
</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:'<h1>{{msg}}</h1>' +'<button @click="count++">点我一下{{count}}</button>' +'<h1>{{count}}</h1>' +'<h2>{{count}}</h2>' +'<MyButton></MyButton>' +'<MyButton></MyButton>'
//组件与组件之间是互不影响的
}

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

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组件代码：<template><!--  在这里书写模板--><h1>{{msg}}</h1></template><script>/*在script标签里面可以编写组件的代码
*
* */
export default {data(){return{msg:"计算机科学与技术欢迎你！"}}
}
</script><style scoped></style>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:'<h1>{{msg}}</h1>' +'<button @click="count++">点我一下{{count}}</button>' +'<h1>{{count}}</h1>' +'<h2>{{count}}</h2>' +'<MyButton></MyButton>' +'<MyButton></MyButton>' +'<Vue></Vue>'
//组件与组件之间是互不影响的
}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  静态资源目录  一般是图标 <script>export default {//组件就是一个普通的js对象//组件：一个组件可以创建多个组件实例data(){//data是一个函数//在data中this this就是当前的组件实例化//如果使用箭头函数就无法通过this来访问组件实例//data会返回一个对象作为返回值 vue会对该对象进行代理 从而将其转换为响应式数据//响应式数据会直接通过组件实例化return{msg:"计算机科学与技术学院"}}
}</script><template><h1>{{msg}}</h1></template>

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/2.Vue教程/05.使用vite/3.Vuetest/src/main.js"></script></body>
</html>

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详细介绍

<script>
import MyButton from "./components/MyButton";
export default {data(){//data()返回的对象会被Vue所代理return{//Vue在构建响应式对象时 会同时将对象中的属性也做成响应式属性//深层响应式对象//有些情况下可以通过shallowReactive()来创建一个浅层的响应式属性msg:'计算机科学与技术学院欢迎你！',stu:{name:'吴邪',age:18,gender:"男"}}},//  注册一下MyButtoncomponents:{MyButton}}</script><template><h1>{{msg}}</h1><MyButton></MyButton>
</template>

7.methods介绍


<script >
export default {//data  用来指定实例对象中的响应式属性data(){return{msg:'计算机科学与技术学院'}},//  2.methods:  用来指定实例对象中的方法
//  ----它是一个对象  可以在里面定义多个方法
//  ----这些方法最终将会会被挂载到组件实例上
//  --可以直接通过组件实例来调用这些方法
//  ---所有组件实例上的属性都可以在模板中直接访问
//  methods中的this会被自动绑定为组件实例methods:{test(){alert("计算机科学与技术学院")},hello(){console.log("我是计算机科学与技术学院的hello")},sum(a,b){return a+b}}}</script><template><h1>{{msg}}</h1><h2>{{sum(12,34)}}</h2>
</template>

8.计算属性

<script >
export default {data(){return{msg:'计算机科学与技术学院',stu:{name:'吴邪',gender:'男',age:'18'}}},methods:{//methods中的方法每次组件重新渲染都会调用updateAge(){if (this.stu.age===18){this.stu.age=17}else {this.stu.age=18}console.log("我执行了~~~")}},/** 计算属性：computed 用来指定计算属性**     {*   属性名:getter**      }*   ---计算属性：只在其依赖的数据变化发送变化时 才会重新执行  会对数据进行缓存** */computed:{info:function (){return '计算机科学与技术学院'}}}
</script><template><h1>{{msg}}</h1><h2>{{stu.name}}--{{stu.age}}--{{stu.gender}}</h2><h3>评语：{{stu.age >=19? "你是一个成年人 !":"你是一个未成年人"}}</h3><button @click="updateAge">减</button><h1>{{msg}}</h1><h4>{{info}}</h4>
</template>

9.安装Vue调试工具

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

10.组合式API简介

<script >//先导入reactive
import {reactive} from 'vue'
export default {setup(){//  setup是一个钩子函数  可以通过这个钩子函数向外暴露组件的配置   在这里可以写任何类型的方法//  setup中可以通过返回值指定那些内容可以暴露给外部//  定义一个变量let msg="静态天气真不错！"let count=0//可以通过reactive()来创建一个响应式的对象const stu=reactive({name:"吴邪",age:18,gender:'男'})function f() {stu.age=stu.age++}//在组合式api中声明的变量 就是一个普通的变量 不是 响应式属性//    修改这些属性时 不会在视图中产生效果return{//暴露后的内容就可以在模板里面使用msg,count,stu,f}}}</script><template><h1>演示组合式api</h1>
<h2>{{msg}}</h2><h2>{{stu.age}}</h2><button @click="f">点我</button><!--  在这里看看可以显示出响应数据-->
<h1>{{stu.name+stu.age +stu.gender}}</h1>
</template>

11.setup

<!--加了setup后就告诉了浏览器 我们使用纯组合式api  就不需要之前的那种麻烦了-->
<script setup>
//条例 需要响应式数据也是
import {reactive} from 'vue'//      在这里书写的 就不需要之前的那种return返回 才可以暴露出去 而是默认就暴露出去了
const msg="计算机科学与技术学院"
const count=0
const stu=reactive({name:'孙悟空'
})</script><template><h1>组合api</h1><h2>{{count}}</h2><h3>{{stu.name}}</h3></template>

12.响应式代理

<script setup>
import {reactive, ref} from 'vue'
import {$ref} from 'vue/macros'const stu=reactive({name:'吴邪'
})/*
* 响应式 reactive()--返回一个对象的响应式代理
*   返回的是一个深层的响应式对象
*   也可以使用shallowReactive()创建一个浅层的响应式对象
*     缺点：只能返回对象的响应式代理  不能处理原始值 因此Vue提供了ref
*
*     ref() --修改了一个任意值 并返回响应式代理
*   ---访问ref对象时  必须通过  对象.value来访问其中的值
*
*
*     在模板中ref对象会被自动解包
*   vue给我们提供了一个语法糖 使得ref对象在script标签中可以自动解包
* *///自动解包要$符号
let x=$ref(0)//$是实验性的  需要在vite创建中做一些配置      reactivityTransform:truelet count=ref(0)//生成一个0的响应式
count=10//改不量只会影响到不了自己 在js中 无法实现对一个变量的代理
//ref()原理：在生成响应式代理时 它是将值包装为了一个对象</script><template>
<h1>计算机科学与技术学院</h1></template>

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))}}
})