一、初识Vue
1、Vue 的读音是什么?对于 Vue 的官方定位是什么?
- 读音:view。
- 官方定位:是一套基于构建用户界面的渐进式JavaScript框架。
2、什么是【渐进式】框架?
- 表示我们可以在项目中一点点来引入和使用 Vue,而不一定需要全部使用 Vue 来开发整个项目。
3、目前前端最流行的三大框架是什么?如何从数据对比它们的流行程度(主要是思路)?
- Vue、React、Angular
- 可以从 百度指数、谷歌指数 对比流行度
- 可以从 npm 安装量对比流行度
4、Vue3 对于 Vue2 的一些重要变化(了解即可)?
image.pngimage.png
5、Vue3 + TS 的学习大纲?
image.png6、Vue 的本质是什么?
- Vue 的本质,就是一个 JavaScript 的库
二、Vue 的基本使用
1、Vue 的引入方式?
image.png2、什么是 CDN?(要解释清楚这个概念最佳角度----从【不使用】和【使用】CDN 这两个模式分析)
-CND:称之为内容分发网络(Content Distribution Network)
image.png image.png3、使用 【CND 的方式】引入 Vue,并体验下 vue 的基础用法?
image.png4、直接拷贝 vue 的 JavaScript 文件,并且自己【手动引入】?
image.png5、计数器实现-【原生代码】?
<body>
<h2 class="counter">0</h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<script>
// 1.获取所有的元素
const counterEl = document.querySelector(".counter");
const incrementEl = document.querySelector(".increment");
const decrementEl = document.querySelector(".decrement");
// 2.定义变量
let counter = 100;
counterEl.innerHTML = counter;
// 3.监听按钮的点击
incrementEl.addEventListener("click", () => {
counter += 1;
counterEl.innerHTML = counter;
});
decrementEl.addEventListener("click", () => {
counter -= 1;
counterEl.innerHTML = counter;
});
</script>
</body>
6、计数器实现-【Vue实现】?
<body>
<div id="app">哈哈哈哈啊/div>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template: `<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>`,
data: function () {
return {
counter: 100
}
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
}).mount("#app");
</script>
</body>
7、对比【原生实现计数器】和【Vue 实现计数器】,理解什么是命令式编程?什么是声明式编程?(超级重点)
- 命令式编程关注的是“how to do”;
- 声明式编程关注的是“what to do”,由框架(机器)完成“how”的过程;
- 目前 Vue,React、Angular 的编程模式,我们称之为声明式编程;
8、从【MVC模型】【MVVM模型】的角度,Vue 更遵守哪个?谁是 【M】【V】【VM】?
- 通常情况下,我们经常称 Vue 是一个 MVVM 的框架。
- 【V】是 【view】
- 【M】是 【model】
- 【VM】是【Vue 框架】
三、Vue 在 createApp 时传入对象的【属性解析】
1、Vue 的 template 属性有什么用?是如何生效的?
- 【template 属性】:表示的是 Vue 需要帮助我们渲染的模板信息
- 【生效过程】:会用 【template内容】 替换掉 mount("app") 中 app 标签的 【innerHTML 内容】
2、Vue 提供了两种方式挂载 template,掌握【最常用】的那种即可?
- 使用任意标签(通常使用 template 标签,因为不会被浏览器渲染),设置 id
- template 元素是一种用于保护客户端内容的机制,该内容在加载页面时不会被呈现,但随后可以在运行时使用 JavaScript 实例化;
<body>
<div id="app">
</div>
<template id="why">
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</template>
<script src="../js/vue.js"></script>
<script>
document.querySelector("#why")
Vue.createApp({
template: '#why',
data: function() {
return {
message: "Hello World",
counter: 100
}
},
// 定义各种各样的方法
methods: {
increment() {
console.log("点击了+1");
this.counter++;
},
decrement() {
console.log("点击了-1");
this.counter--;
}
}
}).mount('#app');
</script>
</body>
3、data 属性需要传入什么?为什么修改 data 中的对象,会在 view 上自动相应?
- 在 Vue3.x 的时候,必须传入一个【返回一个对象的函数】,否则就会直接在浏览器中报错;
- data 中返回的对象会被【Vue 的响应式系统】劫持,之后对改对象的修改或访问都会在劫持中被处理;
- 所以我们在 template 中通过{{counter}}访问 counter,可以从对象中获取到数据;
- 所以我们修改 counter 值时,template 中的{{counter}}也会发生改变;
4、methods 属性需要传入什么?以及为什么不能使用箭头函数?
- methods 属性时一个对象,通常我们会在这个对象中定义很多方法;
- 这些方法可以被【绑定到 template 模板中】
- 在该方法中,我们可以使用 this 关键字来直接访问到 data 中返回的对象属性;
四、Vue3.x 源码
1、如何下载 Vue3.x 的源码,并且进行 debug?
- ①下载 3.0.11tag 的 Vue3 zip 包
- ②执行
git init
、git add ./
、git commit -m "12"
等命令,构建 git 环境 - ③执行
yarn install
安装依赖库 - ④执行
yarn dev
生成dist目录下的 vue.global.js
- ⑤在
/vue-next-3.0.11/packages/vue/examples/why
目录下,编写带有断点的 html 代码 - ⑥浏览器中进行断点调试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<div>
<div>aaaa</div>
<div>{{counter}}</div>
<hello :counter='counter'></hello>
<button @click="changeMessage">Counter++</button>
</div>
</template>
<template id="hello">
<div>{{counter}}</div>
</template>
<script src="../../dist/vue.global.js"></script>
<script>
debugger;
Vue.createApp({
template: '#my-app',
components: {
'Hello': {
template: "#hello",
props: {
counter: Number
}
}
},
data() {
return {
counter: 0
}
},
setup() {
const info = Vue.reactive({
name: "why"
})
return {
info
}
},
methods: {
changeMessage() {
this.counter++;
console.log(this.info);
}
}
}).mount('#app')
</script>
</body>
</html>
image.png
image.png
2、 在浏览器中发现,debug 的时候,代码断点全部在一个文件中,如何映射到源码文件中?
- 修改 package.json 文件
"scripts": {
"dev": "node scripts/dev.js --sourcemap",
- 重新
yarn dev
image.png
3、遗留问题【this 指针】后面有空再研究
- 猜测下面代码的打印结果
网友评论