Table of contents
1_ Know Vue
Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces.
The full name is Vue.js or Vuejs;
it is built on standard HTML, CSS and JavaScript, and provides a set of declarative and componentized programming models; it
helps you develop user interfaces efficiently, no matter the task is simple or complex;
Progressive framework?
It means that Vue can be introduced and used a little bit in the project, and it is not necessarily necessary to use Vue to develop the entire project;
Vue has the highest market share in the domestic market; almost all front-end positions will require Vue;
2_vue usage and installation
The essence of Vue is a JavaScript library:
-
At the beginning, you don’t need to imagine it to be very complicated;
-
It can be understood as a packaged library;
-
It can be imported and used in the project.
How to install and use Vue?
(1) Method 1: Introduce in the page through CDN;
<body>
<h2>我是标题</h2>
<p>我是内容</p>
<div id="app"></div>
<!-- CDN地址 -->
<script src="https://unpkg.com/vue@next"></script>
<script>
// 使用Vue
const app = Vue.createApp({
template: `<h2>Hello World</h2><span>引入vue</span>`
})
// 挂载
app.mount("#app")
</script>
</body>
(2) Method 2: Download the JavaScript file of Vue and manually import it by yourself;
You can directly open the link of CDN. Download the source code of Vue:
- Open the link and copy all the codes in it;
- Create a new file, say vue.js, and copy the code into it;
- Through the script tag, import the file just now:
<script src="../js/vue.js"></script>
case:
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
template: `<h1>Hello Vue</h1>`
})
// 2.挂载app
app.mount("#app")
</script>
</body>
(3) Method 3: Install and use it through the npm package management tool;
(4) Method 4: Create a project directly through Vue CLI and use it;
Vue counter case
Click +1, then the content will display the number +1;
click -1, then the content will display the number -1;
Compare the difference between native and Vue implementations.
native implementation
<body>
<h2>当前计数: <span class="counter"></span></h2>
<button class="add">+1</button>
<button class="sub">-1</button>
<script>
// 1.获取dom
const h2El = document.querySelector("h2")
const counterEl = document.querySelector(".counter")
const addBtnEl = document.querySelector(".add")
const subBtnEl = document.querySelector(".sub")
// 2.定义一个变量记录数据
let counter = 0
counterEl.textContent = counter
// 2.监听按钮的点击
addBtnEl.onclick = function() {
counter++
counterEl.textContent = counter
}
subBtnEl.onclick = function() {
counter--
counterEl.textContent = counter
}
</script>
</body>
The Vue way
<body>
<div id="app">
<h2>当前计数: {
{
counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<!-- 引入，已经下载好Vue -->
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function() {
return {
counter: 0
}
},
methods: {
increment: function() {
this.counter++
},
decrement: function() {
this.counter--
}
}
})
app.mount("#app")
</script>
</body>
3_ Declarative and imperative programming
The modes and characteristics of native development and Vue development will be found to be completely different. In fact, two different programming paradigms are involved here:
- Imperative programming and declarative programming;
- Imperative programming focuses on "how to do" to complete the entire how process by yourself;
- Declarative programming focuses on "what to do", and the process of "how" is completed by the framework (machine);
How does it work in the native implementation process?
- Every time an operation is completed, a code needs to be written through JavaScript to give the browser an instruction;
- This process of writing code is called imperative programming;
- In the early development process of native JavaScript and jQuery, the code was written in this imperative way;
How does it work during the implementation of Vue?
- The required content will be declared in the object passed in by createApp, such as template template, data data, and method methods;
- This process of writing code is called declarative programming;
- The current programming mode of Vue, React, Angular, and applets is called declarative programming;
4_MVVM model
Both MVC and MVVM are a software architecture
- MVC is the abbreviation of Model-View-Controller, and it is an architectural pattern that was often used in the early stage, such as iOS and front-end;
- MVVM is the abbreviation of Model-View-ViewModel, which is a very popular architectural pattern at present;
Usually, Vue is also called an MVVM framework. The Vue official actually stated that although Vue does not fully comply with the MVVM model, the entire design is inspired by it.
5_data attribute
The data attribute is passed in a function, and the function needs to return an object:
- In Vue2.x, an object can also be passed in (although the official recommendation is a function);
- In Vue3.x, a function must be passed in, otherwise an error will be reported directly in the browser;
The object returned in data will be hijacked by Vue's responsive system, and subsequent modification or access to the object will be processed in the hijacking:
- So access the counter through {{counter}} in the template or app , and you can get the data from the object;
- So when modifying the value of counter, {{counter}} in the app will also change;
6_methods attribute
The methods attribute is an object, usually many methods are defined in this object:
- These methods can be bound into templates;
- In this method, you can use the this keyword to directly access the properties of the object returned in data;
The following questions are extensions:
Question 1: Can't use arrow functions?
In methods, to use data to return the data in the object, this must have a value, and the data in the data return object can be obtained through this.
Can this be window?
- It cannot be window, because the data in the data return object cannot be obtained in window;
- But if you use the arrow function, then this this will be window;
Why this is window after using the arrow function?
- The arrow function uses the lookup rules of this, and it will look up this in its upper layer;
- In the end, what I just found is the this that the script acts on, so it is window;
Question 2: What exactly does this point to?
In the source code of Vue, all functions in methods are traversed, and this is bound through bind