This article is just a simple study and introduction of the Vue framework. For detailed Vue learning, please go to the Vue3 tutorial .
Table of contents
1. Overview of Vue
Let's analyze the composition of the page first: a complete html page includes views and data, and the data is obtained from the background through requests, which means that we need to present the data obtained from the background to the page. Obviously, this requires We use DOM manipulation. Because of this development process, we have introduced a front-end development idea called MVVM (Model-View-ViewModel) , which allows our developers to pay more attention to data rather than the mechanical operation of data binding to views.
MVVM: In fact, it is the abbreviation of Model-View-ViewModel. There are 3 words. The specific explanation is as follows:
- Model: Data model, specifically refers to the data obtained from the background through requests in the front end
- View: View, the page used to display data, can be understood as a page built by our html+css, but without data
- ViewModel: Data is bound to the view, responsible for displaying the data (Model) to the view (View) through the JavaScript DOM technology
As shown in the figure is the meaning of MVVM development ideas:
Vue.js (pronounced /vjuː/, similar to view ) is a progressive framework for building user interfaces . Unlike other heavyweight frameworks, Vue is designed to be developed incrementally from the bottom up. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. The goal of Vue.js is to enable responsive data binding and composed view components with the simplest API possible .
A framework is a semi-finished software, which is a set of reusable, general-purpose, software-based code models. Framework-based development is faster and more efficient.
Two, Vue quick start
- Create a new HTML page and import the Vue.js file
<script src="js/vue.js"></script>
- In the JS code area, create the Vue core object and define the data model
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data: {
//定义数据模型
message: "Hello Vue!"
}
})
</script>
When creating a vue object, there are several commonly used attributes:
- el: Used to specify which tags are managed by Vue.
#appThe value of this attributeappneeds to be the id attribute value of the managed label - data: used to define the data model
- methods: Used to define functions.
- write view
<div id="app">
<input type="text" v-model="message">
{
{ message }}
</div>
Among them, { {}} is an interpolation expression, which is used to display the model defined in the vue object to the page
- Form: { { expression }}.
- Content can be:
- variable
- ternary operator
- function call
- arithmetic operation
Three, Vue command
v-model, this is the command of vue .
Directives: special attributes prefixed with v- on HTML tags, different directives have different meanings. For example: v-if, v-for...
In Vue, a large number of instructions are used to realize the common instructions of Vue that data is bound to the view, as shown in the following table:
| instruction | effect |
|---|---|
| v-bind | Bind attribute values for HTML tags, such as setting href, css style, etc. |
| v-model | Create two-way data bindings on form elements |
| v-on | Binding events for HTML tags |
| v-if | Render an element conditionally, render when the judgment is true, otherwise not render |
| v-else | Render an element conditionally, render when the judgment is true, otherwise not render |
| v-else-if | Render an element conditionally, render when the judgment is true, otherwise not render |
| v-show | Display an element according to the condition, the difference is that the value of the display attribute is switched |
| v-for | List rendering, traversing the elements of the container or the properties of the object |
3.1 v-bind和v-model
-
v-bind: Bind attribute values for HTML tags, such as setting href, css styles, etc. When the data model in the Vue object changes, the attribute value of the tag will change accordingly.
-
v-model: Creates two-way data bindings on form elements. What is bidirectional?
- When the data in the data attribute of the vue object changes, the view display will change together
- When the view data changes, the data in the data attribute of the Vue object will also change accordingly.
- The role of two-way binding: the value of the form data can be obtained and then submitted to the server
We know that the data in the data attribute can be changed by assignment, but why does the view data change? Only form item labels! So two-way binding must be used on form item tags .
code show as below:
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
url: "https://www.baidu.com"
}
})
</script>
3.2 v-on
v-on: Used to bind events to html tags. It should be noted that the following 2 points :
-
The function bound to the event of the label by v-on syntax must be a function declared by the vue object
-
When binding events with v-on syntax, the event name is compared to the event name in js, without on
For example: in js, event binding demo function
<input onclick="demo()">In vue, event binding demo function
<input v-on:click="demo()">
code show as below:
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
handle: function(){
alert("你点我了一下...");
}
}
})
</script>
3.3 v-if和v-show
The effect of v-show and v-if is the same, but the principle is different. In the v-if instruction, the label codes that do not meet the conditions are gone, and in the v-show instruction, the codes that do not meet the conditions still exist, but the css style is added to control the label not to be displayed.
<body>
<div id="app">
年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>
<br><br>
年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
age: 20
},
methods: {
}
})
</script>
3.4 v-for
v-for: This command is used to traverse. Its syntax format is as follows:
<标签 v-for="变量名 in 集合模型数据">
{
{变量名}}
</标签>
It should be noted that the label needs to be looped, and the v-for instruction is written on that label .
Sometimes we need to use indexes when traversing, so the syntax format of v-for instruction traversal is as follows:
<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{
{索引变量 + 1}} {
{变量名}}
</标签>
code show as below:
<body>
<div id="app">
<div v-for="addr in addrs">{
{addr}}</div>
<hr>
<div v-for="(addr,index) in addrs">{
{index + 1}} : {
{addr}}</div>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
addrs:["北京", "上海", "西安", "成都", "深圳"]
},
methods: {
}
})
</script>
3.5 Comprehensive case
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user,index) in users">
<td>{
{index + 1}}</td>
<td>{
{user.name}}</td>
<td>{
{user.age}}</td>
<td>
<span v-if="user.gender == 1">男</span>
<span v-if="user.gender == 2">女</span>
</td>
<td>{
{user.score}}</td>
<td>
<span v-if="user.score >= 85">优秀</span>
<span v-else-if="user.score >= 60">及格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
users: [{
name: "Tom",
age: 20,
gender: 1,
score: 78
},{
name: "Rose",
age: 18,
gender: 2,
score: 86
},{
name: "Jerry",
age: 26,
gender: 1,
score: 90
},{
name: "Tony",
age: 30,
gender: 1,
score: 52
}]
},
methods: {
},
})
</script>
</html>
The browser effect is as follows:
4. Vue life cycle
Vue's life cycle: refers to the process of Vue objects from creation to destruction. The life cycle of vue includes 8 stages: every time a life cycle event is triggered, a life cycle method is automatically executed, and these life cycle methods are also called hook methods. Its complete life cycle is shown in the following figure:
| state | stage cycle |
|---|---|
| beforeCreate | before creation |
| created | after creation |
| beforeMount | before mount |
| mounted | mount complete |
| beforeUpdate | before update |
| updated | Updated |
| beforeDestroy | before destruction |
| destroyed | after destruction |
mounted：The mounting is complete, Vue is initialized successfully, and the HTML page is rendered successfully. In the future, we generally use it for page initialization and automatic ajax request background data
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
},
mounted () {
alert("vue挂载完成,发送请求到服务端")
}
})
</script>
The figure below shows the entire process from creating Vue to effecting Vue objects and the hook functions corresponding to each stage provided by Vue official website:
