Vue技术教程（2023-1-9）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
第一章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 -y
2.安装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 vue
npm 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:"男"
}
}
},
// 注册一下MyButton
components:{
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:true
let 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))
}
}
})
21节 ref对象解包