Self-taught vue framework, record important knowledge points every day, and share with you! There are shortcomings, I hope you can correct them.
This article will describe: basic examples of vue, two-way data binding of vue, several common usages of vue, and common instructions related to vue.
Early learning base, using vue.js package development, later practice using vue-cli scaffolding,
You can download it from the official website. Https://vue js.org/js/vue.min.js, copy the code inside, build a JS file and save it.
vue is based on the MVVM framework, as shown above
Bullshit goes straight to the code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>vue First example</h3> <div id="app"> <!-- 3.Here is view --> {{message}} </div> <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //1.Establish model(data) var exampleData = { message:"hello vue" }; //2.Establish vue Example(viewModel) new Vue({ el:"#app", //mount point el:vue Object mounted to app Element data:exampleData //data:exampleData }); </script> </body> </html>
Interpretation: (This statement is not rigorous, pure vernacular for me, easy to understand)
Create model data first, and then create an instance of vue (viewmodel), where el is to mount vue objects on the corresponding app elements, called mount point, data data binding
If the data is displayed in the view section of the vue view, the data can be displayed in the browser by using {message}. (On the basis of later familiarity, the data part of model can be written directly in the vue object, which will be explained later.)
Example 02: Bidirectional binding 01 for vue data
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bidirectional binding of data</title> </head> <body> <div id="app"> {{message}} <hr> <!-- v-model take input Medium value and vue object message Bind together --> <input type="text" v-model="message" /> </div> <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var messageData={ message:"hello vue" } new Vue({ el:"#app", data:messageData }); </script> </body> </html>
Interpretation:
<input type= "text" v-model= "message"/> V-model is an instruction element for data binding, binding value s in input together
The data here is real-time, that is to say, when the value of input changes, the above {{message}} will also change. When instruction is introduced, there will be a lazy instruction, that is to say,
The data does not change until the input box is completed.
Example 02: Bidirectional binding 02 of vue data
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- Display data --> <h4>{{message}}</h4> <!-- Perform operations in curly brackets --> <h4>{{3+5}}</h4> <!-- Getting attribute values in data objects --> <h4>{{car.brand}}</h4> <!-- Three mesh operation --> <h4>{{count>totalNum?"success":"error"}}</h4> <!-- Boolean value --> <h4>{{hasMore}}:{{!hasMore}}</h4> <!-- Data content is output in character bed format --> <h4>{{htmllist}}</h4> </div> <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var exampleData={ message:"hello vue", htmllist:"<h6>hello vue</h6>", count:3, totalNum:10, hasMore:true, car:{ brand:"volvo", price:30 } } new Vue({ el:"#app", data:exampleData }) </script> </body> </html>
Note:
The above code has explained the usage in detail.
It is emphasized here that <h4>{{htmllist}} </h4> this code will output the data as a string. If you want it to output as h6, you need to add the v-html="htmllist" instruction in the <h4> label.
vue directive
Definition: Attributes that start with the v-character, which acts on html elements, directives that provide some features, specifying that binding elements produce different behaviors
Classification of instructions:
v-if: Specifies a conditional rendering that deletes or adds elements based on the true/false of the expression
- Grammar: v-if="expression"
- expression is the return bool value, the expression true/false
- The meaning of deletion: converting content into annotations
Upper Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{message}} <h3 v-if="yes">{{yes}}</h3> <h3 v-if="no">{{no}}</h3> <h3 v-if="age > 10">age:{{age}}</h3> <h3 v-if="name.indexOf('w')>=0">name:{{name}}</h3> </div> <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var exampleData={ message:"hello vue", yes:true, no:false, age:18, name:"wzp" } new Vue({ el:"#app", data:exampleData }) </script> </body> </html>
Analysis:
The code section has explained the relevant usage in detail. If it is not clear, just leave a message for me.
V-show: Conditional rendering instructions, unlike v-if instructions, use the v-show instruction element to always render to html
- Display and Hide
- He only sets the style attribute display:block(true)/none(false)
Upper Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h3>v-show</h3> <h4 v-show="yes">yes</h4> <h4 v-show="no">no</h4> <h4 v-show="age > 25">age:{{age}}</h4> <h4 v-show="name.indexOf('i')>=0">name:{{name}}</h4> </div> <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var exmapleData={ message:"hello", yes:true, no:false, age:28, name:"lion" } new Vue({ el:"#app", data:exmapleData }) </script> </body> </html>
Note:
v-if can be used together in v-else, which is equivalent to if(){}else {}. That is to say, v-if can be followed by v-else.
Generally speaking, v-if has higher switching cost and v-show has higher initial rendering cost. Therefore, it is better to use v-show if frequent switching is needed, and v-if is better if runtime conditions are unlikely to change.
v-show, only according to the condition. There is no v-else behind.
Many tutorials have written that v-show can be followed by v-else, which is a misleading message.
v-else: must follow a v-if, otherwise it cannot be recognized
There is no v-show followed by v-else.
Upper Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h4 v-if="age > 20">age:{{age}}</h4> <h4 v-else>name:{{name}}</h4> <hr> <h4 v-if="age > 30">age:{{age}}</h4> <h4 v-else>name:{{name}}</h4> <hr> </div> <script src="bs/js/vue-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var exmapleData={ sex:"Male", age:28, name:"lion" } new Vue({ el:"#app", data:exmapleData }) </script> </body> </html>
The next article will introduce v-bind,v-on,v-model, the creation of custom instructions