Table of contents
- 1. The preface of vue3
- 2. Course Outline:
- 3. Content of the first day
-
- 3.1 How to use vue
- 3.2 Vue import method:
-
- 3.2.1 Method 1: Introduce in the page through CDN (Content Delivery Network)
- 3.2.2 Method 2: Download the javascript file of vue and manually import it by yourself
- 3.2.3 Method 3: Install and use it through the npm package management tool (webpack is talking about it)
- 3.2.4 Method 4: Create a project directly through vue CLI and use it
- 3.3 Counter case (native js code vs vue code)
- 3.4 Programming ideas
- 3.5 Explanation of the attributes of the object passed in by creatApp
- 3.4 How to view the source code of vue
1. The preface of vue3
On September 79, 2020, the much-anticipated vue3 finally released the official version, named "One Piece", which brought many new features: better performance, smaller package size, better TypeScript integration, and more Excellent API design.
1.1 Progressive framework
Vue is a progressive framework, what is a progressive framework? In layman's terms, we can introduce and use vue a little bit in the project, instead of using all vue to develop the entire project
1.2 Changes compared to vue2
source code
- The source code is managed in the form of monorepo
- The source code is rewritten using TypeScript
performance
- Data hijacking using proxy
- Removed some unnecessary APIs
- Includes compilation optimizations
new API
- From Options API to Composition API
- The hooks function increases code reusability
2. Course Outline:
- Encounter experience vue3
- Vue3 basic syntax
- Vue3 component development
- Vue CLI detailed explanation
- vue core syntax
- vue-routerrouting
- vuex state management
- TypeScript project combat
- Automated Deployment
3. Content of the first day
3.1 How to use vue
Vue is essentially a javascript library, which can be imported into the project
3.2 Vue import method:
3.2.1 Method 1: Introduce in the page through CDN (Content Delivery Network)
<div id = "app"></div>
<!--
1、新建这个html时，啥都没有，这时输入！点击回车就有了html基本的标签
2、引入vue的js，写上如下的代码
<script src="https://unpkg.com/vue@next"></script>
3、打开这个网址便是vue3的源代码
4、创建App,并挂载到div上
-->
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
template:'<h2>Hello vue3</h2>'
});
app.mount("#app")
</script>
Supplement: CDN server concept map understanding
3.2.2 Method 2: Download the javascript file of vue and manually import it by yourself
第一步：打开https://unpkg.com/vue@next，ctrl+A，复制到js/vue.js中
第二步：
<div id = "app"></div>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template:'<h2>Hello 李银河</h2>'
}).mount("#app");
</script>
3.2.3 Method 3: Install and use it through the npm package management tool (webpack is talking about it)
3.2.4 Method 4: Create a project directly through vue CLI and use it
3.3 Counter case (native js code vs vue code)
The native js code is as follows:
<h2 class="counter"></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>
The vue code is as follows
<div id = "app"></div>
<script src="../js/vue.js"></script>
<script>
//一个app中有template，data(),methods,
Vue.createApp({
template:`
<div>
<h2>{
{message}}</h2>
<h2>{
{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>`//模板字符串可以换行
,
//vue3中data不能是一个对象了，而必须是一个函数
data:function(){
return {
message:"hello world",
counter:100
}
},
//定义各种各样的方法
methods: {
increment(){
console.log("点击了+1");
//this取出data中的数据，（实际上是proxy代理的，以后再讲）
this.counter++;
},
decrement(){
console.log("点击了-1");
this.counter--;
}
},
}).mount("#app");
3.4 Programming ideas
The above case is imperative programming vs declarative programming.
Imperative programming draws on the programming idea of MVC.
Declarative programming draws on the programming idea of MVVM.
MVVM:
M: model: is an object including data and methods
V: view: dom label
VM: view -modal: code logic for handling the relationship between view and modal
3.5 Explanation of the attributes of the object passed in by creatApp
3.5.1 template
It represents the template information that vue needs to help us render. It is inconvenient to write and there is no prompt. Vue provides two solutions:
3.5.1.1 template optimization method 1
Use the script tag and mark it with type x-template
<script type="x-template" id="lyjtemplate">
<div>
<h2>{
{message}}</h2>
<h2>{
{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>
</script>
<script>
//一个app中有template，data(),methods,
Vue.createApp({
template:"#lyjtemplate",
....
}).mount("#app");
</script>
3.5.1.2 template optimization method 2
Use any tag (usually use tempalte tag, because it will not be rendered, note that this tag is available in html, not only vue, this tag is not rendered in html, it is for js), set id
<template id="lyjtemplate">
<div>
<h2>{
{message}}</h2>
<h2>{
{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>
</template>
<script>
//一个app中有template，data(),methods,
Vue.createApp({
template:"#lyjtemplate"
...
}).mount("#app");
</script>
//如果把<template>换成<div>,也是可以的，但是！页面上会有两部分这个内容！
//一个是vue挂载的，一个是html解析的
3.5.2 data
In vue2, an object can also be passed in. In vue3, it must be a function, otherwise an error will be reported in the browser
3.5.3 methods
The methods defined in it will be bound to the template template.
You can use the this keyword to directly access the object properties returned in data.
There is such a description in the official document:
Note that you should not use arrow functions to define method functions (for example: plus: ()=>this.a++)
Question 1: Why can't arrow functions be used?
Question 2: What exactly does this point to when the arrow function is not used? (an interview question)
3.5.3 props, computed, watch, emits, setup, etc.
Subsequent explanation
3.4 How to view the source code of vue
Check back after watching all the videos...