First, the introduction and example of Vue framework
Introduce the Vue framework
The Vue framework is essentially a JS file
Vue. Js development environment version, code format is good, naming rules, suitable for study, learning code - vue.min.js production environment version, code without format, irregular naming, no newline, poor readingCopy the codeVue format and instance
format
new Vue({
el:"# id name"
data: {message:""
}
methods:{}
})
Copy the codeThe root DOM element used by el:Vue instances, whose value is the ID attribute selector, controls the entire div object; Data: Data key. The value of the key is displayed on the page. Methods: function keys that define methods.
The instance
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_VUE Introduction case</title>
</head>
<body>
<div id="app">
<button @click="fnClick()">button</button><br>
{{message}}
</div>
<script type="text/javascript" src=".. /js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {message:"hello world"
},
methods: {fnClick:function () {
alert("-- -- -- -- -- -- --")}}})</script>
</body>
</html>
Copy the codeNote: Fetch the value of the vUE object data {{key name}}
Common Vue directives
| Instruction names | meaning |
|---|---|
| v-text | Data plain text |
| v-html | The data recognizes the label |
| v-bind | The binding property, abbreviated as a colon: |
| v-if | No Render the HTML page content |
| v-else | Whether to render HTML page content |
| v-show | Conditional rendering using Vue, already rendered, whether to display |
| v-for | traverse |
| v-on | Event binding, @ for short |
| v-model | Two-way data binding for the value property of a form item |
V – – HTML text and v
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 _v - text commands</title>
</head>
<body>
<div id="app">
<! The following two results are the same -->
<div>{{city}}</div>
<div v-text="city"></div>
<! -- V-text data plain text V-HTML tag valid -->
<div v-html="city"></div>
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {city: Shenzhen
}})</script>
</body>
</html>
Copy the codeResults:
V-bind Indicates the binding attribute(short 🙂
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05 - v - the bind command</title>
</head>
<body>
<div id="app">
<! -- V-bind simplifies writing: -->
<font :color="color" size="+ 5">Text color</font><br>
<input type="text" :value="age">
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {color:"blue".age:30}})</script>
</body>
</html>
Copy the codeV – if and v – else
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_Vue instructions V-if and V-else</title>
</head>
<body>
<div id="app">
<! --Vue's v-if command determines whether to display -->
<img v-if="flag" src=".. /img/1.jpg" width="200" height="180">
<img v-else src=".. /img/2.jpg">
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {flag:true}})</script>
</body>
</html>
Copy the codeV – show commands
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_vue command V-show</title>
</head>
<body>
<div id="app">
<! --vue's v-show command determines whether to display -->
<img v-show="flag" src=".. /img/1.jpg" >
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {flag:true}})</script>
</body>
</html>
Copy the codeV – for instructions
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The 08_vue instruction v-for</title>
</head>
<body>
<div id="app">
<! -- v-for traversal v-for directive property, element name in array Fetch array traversal elements, interpolation expression -->
<div v-for="fruit in fruitList">{{fruit}}</div>
<hr/>
<! --for instruction, traverses an array of objects, object name in array -->
<div v-for="employee in employeeList">
{{employee.name}}
{{employee.id}}
</div>
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script TYPE="text/javascript">
new Vue({
el:"#app".data: {employeeList:[
{name:"Zhang".id:1},
{name:"Bill".id:2}].fruitList: ["Banana".The word "apple"."Watermelon"]}})</script>
</body>
</html>
Copy the codeV-on event binding(abbreviated @)
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09 _vue events</title>
</head>
<body>
<! - bound for the button click event: v - on: the event name = "function" event binding shorthand: @ event name = "function" -- >
<div id="app">
<div v-text="message"></div>
<button type="button" @click="fn1()">button</button>
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
"el": "#app"."data": {
"message": "Hello world"
},
"methods": {
// Vue functions are declared in methods
fn1() {
alert("I got clicked...")}}})</script>
</body>
</html>
Copy the codeBubbling of events:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10_Vue event bubbling</title>
</head>
<body>
<div id="app">
<div @click="fnOuter()" style="background: bisque; width: 300px; height: 200px">
<! < [email protected] ="doThis"></a>-->
<div @click.stop="fnClick()" style="background: cadetblue; width: 200px; height: 120px"></div>
</div>
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {},methods: {fnOuter:function () {
console.log("Click on the outer border")},// Prevent events from bubbling
fnClick:function () {
console.log("Click on the inside border")}}})</script>
</body>
</html>
Copy the codeV-model bidirectional binding
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two-way binding of 11_Vue data</title>
</head>
<body>
<div id="app">
<! --Vue directive v-model data model text box data, value attribute determines two-way binding means that one changes, the other also changes -->User:<input type="text" v-model="username"><br>Password:<input type="text" v-model="password"><br>
<button @click="changeText()">Change the text box to achieve bidirectional binding</button><br>
<button @click="changeVue()">Change Vue data to implement bidirectional binding</button><br>
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {username:"tom".password:"123"
},
methods: {changeVue:function () {
this.username="white";
this.password="123456"
},
changeText:function () {
console.log(this.username+"="+this.password); }}})</script>
</body>
</html>
Copy the codeVue Listening property (Watch)
Based on the following code, we want to modify message when name and age change, and then we need to listen for name or age and call the corresponding function
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_Vue listener properties</title>
</head>
<body>
<div id="app">
<p>Name: {{name}}</p>
<p>Age: {{age}}</p>Name:<input type="text" v-model="name"/><br/>Age:<input type="text" v-model="age"/><br/>
<p>Personal information: {{message}}</p>
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {name:"Zhang".age:12.message:"Zhang SAN's 12"
},
"watch": {"name":function (newName) {
this.message=newName+""+this.age;
},
"age":function (newAge) {
this.message=this.name+""+newAge; }}})</script>
</body>
</html>
Copy the codeInterpolation expression
Interpolation is used to get data from Vue objects, simple calculations, ternary operatorsCopy the code<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_ Interpolation expression</title>
</head>
<body>
<div id="app">
{{studentInfo}}<br>
{{number-1}}<br>{{number==10?" Equals ":" does not equal "}}</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app".data: {message:"Interpolation".studentInfo:"Students are back in school.".number:"10"}});</script>
</body>
</html>
Copy the codeVue life cycle
Note the difference between Create and Mounted
The instance
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13_Vue life cycle</title>
</head>
<body>
<div id="app">
<div id="d1">{{city}}</div>
</div>
<script src=".. /js/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
"el":"#app"."data": {"city":"Wuhan"
},
//Vue's hook functions allow us to execute code at specific stages of the Vue lifecycle
beforeCreate(){
// Outputs the value of the data model city
console.log("Get city in the beforeCreate hook function :"+this.city)
},
created(){
// Outputs the value of the data model city
console.log("Get city in the created hook function :"+this.city)
},
beforeMount(){
// Execute before the virtual view replaces the real view, so that the real view does not display data from the data model
console.log(Get the contents of the real view in the beforeMount hook function:+document.getElementById("d1").innerHTML)
},
mounted(){
// Execute after the virtual view replaces the real view, so the real view will display the data model data
console.log([mounted hook] Retrieve the contents of the real view:+document.getElementById("d1").innerHTML)
},
})
</script>
</body>
</html>
Copy the codeThe results of
