1. First experience of Vue program
We don't need to understand the development history of the Vue framework, what are the characteristics of the Vue framework, and who developed Vue. These will not play a big role in our writing Vue programs, not to mention that after talking about some features, we have no There is a way to thoroughly understand it, so we can learn to use it first, and after using it for a period of time, we will come back to familiarize ourselves with the Vue framework and its features. Just need to know that Vue is a framework implemented based on JavaScript (JS). To use it, you need to get the Vue js file first.
1.1 Download and install vue.js
Step 1: Open the Vue2 official website and click "Start" as shown in the figure below:
Step 2: Continue to click "Install" as shown in the figure below
Step 3: Scroll down on the "Installation" page until you see the location shown in the image below:
Step 4: Click on the development version and download it, as shown in the figure below:
Step 5: Install Vue:
Use the script tag to import the vue.js file. Like this: <script src=”xx/vue.js”></script>
1.2 The first Vue program
The integrated development environment uses VSCode, if you don’t have one, you can install one
The first Vue program is as follows:
<!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>第一个Vue程序</title>
<!-- 安装vue.js -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
// 第一步：创建Vue实例
const vm = new Vue({
template : '<h1>Hello Vue!</h1>'
})
// 第二步：将Vue实例挂载到指定位置
vm.$mount('#app')
</script>
</body>
</html>
running result:
Explain the first program:
- When using script to import vue.js, Vue will be registered as a global variable. Just like after jQuery is introduced, jQuery will also be registered as a global variable.
- We must new a Vue instance, because we can see the existence of this through the source code.
-
- The constructor parameter of Vue is an options configuration object. There are a large number of Vue predefined configurations in the configuration object. Each configuration item is a key:value structure. A key:value is a Vue configuration item.
- template configuration item: value is a template string. Write code that conforms to Vue's grammatical rules here (Vue has its own set of grammatical rules). The string written here will be compiled by the Vue compiler and converted into HTML code that the browser can recognize. template is called a template.
- The $mount method of the Vue instance: This method completes the mount action and mounts the Vue instance to the specified location. That is to say, the HTML code compiled by Vue is rendered to the specified position of the page. Note: The element at the specified position is replaced.
- The syntax of '#app' is similar to the id selector syntax in CSS. Indicates to mount the Vue instance to the element position with id='app'. Of course, it is also possible to write native JS: vm.$mount(document.getElementById('app'))
- '#app' is the id selector, and other selectors can also be used, such as the class selector: '.app'. A class selector can match multiple elements (positions). At this time, Vue will only select the first position to mount (first from top to bottom).
1.3 Vue's data configuration items
Observe the first Vue program, you will find that to complete this function, we don't need to use Vue at all, just write the following code directly in the body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没必要使用Vue呀</title>
</head>
<body>
<h1>Hello Vue!</h1>
</body>
</html>
There is a data configuration item in Vue, which can help to dynamically render the page code as follows:
<!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>Vue选项data</title>
<!-- 安装vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue代码 -->
<script>
new Vue({
data : {
message : 'Hello Vue!'
},
template : '<h1>{
{message}}</h1>'
}).$mount('#app')
</script>
</body>
</html>
The result of the operation is as follows:
Explain the above procedure:
- data is the data object of the Vue instance. And this object must be a pure object (contains zero or more key/value pairs).
- { {message}} is a syntax created by the Vue framework itself, called interpolation syntax (or beard syntax), which can get the value from the data according to the key, and insert the value into the corresponding position.
- data can be in the following situations, but not limited to these situations:
data : { name : '老杜', age : 18 } //取值： { {name}} { {age}} data : { user : { name : '老杜', age : 18 } } //取值： { {user.name}} { {user.age}} data : { colors : ['红色', '黄色', '蓝色'] } //取值： { {colors[0]}} { {colors[1]}} { {colors[2]}} -
The above program execution principle: the Vue compiler compiles the template, fetches data from data when it encounters a mustache { {}}, and then inserts the fetched data into the corresponding position. Generate a piece of HTML code, and finally render the HTML to the mount location and present it.
-
When the data changes, the template template will be recompiled and re-rendered.
1.4 Vue's template configuration item
template can have only one root element. Please see the following code:
<!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>Vue选项template</title>
<!-- 安装vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
new Vue({
template : '<h1>{
{message}}</h1><h1>{
{name}}</h1>',
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
</script>
</body>
</html>
Results of the
Console error message: Component templates should only contain one root element. So if template is used, there can only be one root element. The code is modified as follows:
new Vue({
template : '<div><h1>{
{message}}</h1><h1>{
{name}}</h1></div>',
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
operation result
When the template is compiled and rendered, the elements at the mount location will be replaced.
If the code behind the template needs to be changed, it is recommended to write the code in the `` symbol, and it is not recommended to use + to concatenate strings. The code is modified as follows:
new Vue({
template : `
<div>
<h1>{
{message}}</h1>
<h1>{
{name}}</h1>
</div>
`,
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')operation result
The template configuration item can be omitted and written directly into the HTML code. code show as below:
<!-- 指定挂载位置 -->
<div id="app">
<div>
<h1>{
{message}}</h1>
<h1>{
{name}}</h1>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
</script>
operation result
Two points need to be noted:
First: This method will not produce element replacement like template.
Second: Although it is written directly into the HTML code, lines 3 to 6 in the above program are no longer HTML codes, but template statements with Vue syntax features. This content will be recompiled after the data changes.
When mounting a Vue instance, you can also use Vue's el configuration item instead of the $mount method. code show as below:
<!-- 指定挂载位置 -->
<div id="app">
<div>
<h1>{
{message}}</h1>
<h1>{
{name}}</h1>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
},
el : '#app'
})
</script>
Results of the
el is the abbreviation of the word element, translated as "element". The el configuration item is mainly used to specify the container associated with the Vue instance. That is to say which container is managed by Vue.