1, Introduction
1,Vue. What is JS
Vue (pronunciation / vju) ː/， Similar to view) is a progressive framework for building user interfaces.
Vue's core library only focuses on view layers, which is not only easy to start, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern tool chains and various supporting class libraries, Vue can also provide drivers for complex single page applications.
Official website: https://cn.vuejs.org
2. Initial Vue js
Create demo html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{}} Interpolation expressions, binding vue Medium data data -->
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
// Create a vue object
new Vue({
el: '#app ', / / binding vue scope
data: {//Define the model data displayed in the page
message: 'Hello Vue!'
}
})
</script>
</body>
</html>2, Basic grammar
1. Basic data rendering and instructions
Create 01 - basic data rendering and instructions html
The {v-bind} feature you see is called an instruction. The instruction is prefixed with V -
In addition to using the interpolation expression {}} for data rendering, you can also use the v-bind instruction, which is abbreviated as a colon (:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-bind instructions
One way data binding
This instruction is generally used in the tag attribute to obtain the value
-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!--Abbreviation-->
<h2 :title="message">
{{content}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: 'I'm the title',
message: 'Page loaded on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>2. Bidirectional data binding
Create 02- bidirectional data binding html
Two way data binding and one-way data binding: two way data binding using # v-model #
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="searchMap.keyWord"/>
<!--Bidirectional binding-->
<input type="text" v-model="searchMap.keyWord"/>
<p>{{searchMap.keyWord}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '666'
}
}
})
</script>
</body>
</html>
3. Events
Create 03 event html
Demand: click the query button to find the relevant information of the company according to the contents entered in the input box
On the basis of the previous examples, add the result node, add the methods node and define the search method in the data node
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--vue Binding event-->
<button v-on:click="search()">query</button>
<!--vue Binding event abbreviation-->
<button @click="search()">Query 1</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '666'
},
//Query results
result: {}
},
methods:{//Define multiple methods
search() {
console.log('search....')
},
f1() {
console.log('f1...')
}
}
})
</script>
</body>
</html>Add button and p in html
Use # v-on # to process several items. v-on:click # means to process the mouse click event. The method called by the event is defined in the # methods # node of the # vue # object declaration
4. Modifier
Create 04- modifier html
Modifiers are half width periods (.) Indicates the special suffix used to indicate that an instruction should be bound in a special way.
For example The prevent modifier tells the v-on instruction to call event for the triggered event preventDefault():
That is, prevent the default behavior of the event
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.username"/>
<button type="submit">preservation</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{}
},
methods:{
onSubmit() {
if (this.user.username) {
console.log('Submit Form ')
} else {
alert('enter one user name')
}
}
}
})
</script>
</body>
</html>6. List rendering
Create 06- list rendering html
v-for: List loop instruction
Traversal data list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 10"> {{n}} </li>
</ul>
<ol>
<li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
</ol>
<hr/>
<table border="1">
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
})
</script>
</body>
</html>