<>Vue Basic knowledge learning day01
1. Basic understanding :
Vue Is a build data driven web Progressive framework of interface , so-called ’‘ Progressive ’‘ You've got it Vue Use as much as you like , Unlike some frameworks, you have to master everything to use .
2.Vue characteristic
*
Light weight
Vue.js The size of the library is very small , And does not rely on other infrastructure .
*
Data binding
For some rich interactions , State machine like front end UI Interface , Data binding is very simple , convenient .
*
instructions
The built-in instructions are unified as (v—*), You can also customize the command , The corresponding expression value can be modified by changing the corresponding expression value DOM.
*
Plug in
Vue.js Core does not contain Router,AJAX, Form verification and other functions , However, it is very convenient to load the corresponding plug-ins as needed .
*
Componentization
Components can be extended HTML element , Encapsulating reusable code . Allow us to use small , Self contained and usually reusable components to build large applications
3.Vue Resource installation
It's simple , Download it from the official website , Any version will do , And then directly js Copy it into the project and it's done
4.Vue Simple use of knowledge
* Step 1 ( introduce js file ):
There are two small issues to note here : 1.<script></script> Must be double label , Single label <script> It doesn't work 2. Attention to relative path and absolute path
*
Step 2 ( Ready to mount elements ):
Here we create one <div> label , Give one id
*
Beat three ( Prepare the data ):
<script> var app = new Vue({ el:"#one", //el："#xx"
It's about giving to you id by xx To mount ( It's about building connections ) of course el:".xx" It can also be mounted class and el:"div" label ( Recommend or pass id To operate
data:{ //vue Data binding of data Attribute ,data It is also an object massage:"hello vue", // And then in the tag you're hooked to, you can go through the {
{massage}} To get the value arr:[1,2,3,4], // The same is true for arrays {{arr[0]}} employee:{ // object {
{employee,name}} name:" Hello ", age:12 } }, methods:{
//Vue The method of the instance is saved in the configuration properties methods in ,methods Itself is an object . The value of the object is the method body say(){ alert(" Hello ") } }
}); app.say(); //js Call mode In the mount tab {{say}} Vue How to use , It doesn't have to be written in it () </script>
<>Vue Understanding of Architecture
MV VM pattern ：(medol view viewmodel)
Specific explanation :
<>VueJS expression
VueJS The expression is written in double braces ：{{ expression }}
VueJS Expressions bind data to HTML
VueJS Where the expression will be written " output " data
VueJS expression It's very similar JavaScript expression ： They can contain text , Operators and variables
1 Basic arithmetic operations /* * operation character string Except for Strings ‘+’ Addition is string splicing Other operations will be normal **/ num: 5 + 10, nums: "5" +
10, chengfa: 5 * 9, chufa: 10 / 2, chengfas: "50" * 10, 2 <div id="app">
<!-- Trinomial operation --> {{ show1?" really ":" false "}} // really </div> <script type="text/javascript"
src="js/vue/vue.min.js"></script> <script type="text/javascript"> var app = new
Vue({ el : "#app", data : { show1 : true // Here is true } }); </script> 3 1.
Directly use the literal value of a string as a string object 2. use data String object in <div id="app"> {{" That's the face value "}}<br/> {
{" That's the face value ".length}}<br/> {{message.length}}<br/> // Get string length {
{message.substring(1,5)}}<br/> // intercept 1-5 Characters {
{message.substring(2,6).toUpperCase()}}<br/> </div> <script
type="text/javascript" src="js/vue/vue.min.js"></script> <script
type="text/javascript"> var app = new Vue({ el: "#app", data: { message:
" This is data Data in " } }); </script> 4 Object operation You can use data Various uses of objects defined in . Like using js Methods and properties are the same in objects
<div id="app"> {{user}}<br/> {{user.toString()}}<br/> {{user.name}}<br/> {
{user.age}}<br/> {{user.getAge()}}<br/> </div> <script type="text/javascript"
src=“js/vue/vue.min.js”></script> <script type="text/javascript"> var user = {
name: " Zhang San ", age: 29, getAge: function () { return this.age // Front desk return user The age of },
toString:function(){ return " full name :"+this.name+", Age :"+this.age; // there this namely user }
}; var app = new Vue({ el: "#app", data: { user: user // } }); </script> 5 Array operation
You can use JavaScript Any syntax in an array to manipulate an array . <div id="app"> {{hobbys}}<br/> {
{hobbys[0]}}<br/> {{hobbys.length}}<br/> </div> <script type="text/javascript"
src=“js/vue/vue.min.js”></script> <script type="text/javascript"> var app = new
Vue({ el: "#app", data: { hobbys:[" Play games "," play football ",' bubble MM'," bubble GG"] } }); </script>
<>Vue instructions
You can go to the official documents for detailed introduction and usage , effect
## Common instructions v-text=“ expression ” Set the text in the label v-html=“ expression ” Set the html v-if=“ expression ” Judgment condition
v-for=“ expression ” loop v-model=“ expression ” Data bidirectional binding v-on=“ expression ” Registration events 5:vue instructions : instructions :v-*;
v-text: The text of the action ; v-html: Operational html; v-for: v-for=” currentObject in Objects” If it's an object :
Each traversal gets the property value of the object : v-for=” (v,k,i) in Objects” If it's an array : Each iteration results in a single value in the array : v-for=”
(array,i) in arrays” v-bind: to html Label binding properties Single attribute binding :v-bind: Property name =” expression ”
Bind an object :v-bind=” expression ” v-model: Data model binding : Bidirectional binding v-model=” expression ”; act on : input select
textarea; If it is a check box : should data Using arrays ; v-show: Display , Determine the value of an expression ,
true: display ;false: hide ( Just add a style :display:none,html The element has not been deleted ) v-if: 1:
v-if=” expression ”:true Just do things ,false: This element is deleted at all ; 2:v-if=” expression ” v-else 3:v-if=” expression ”
v-else-if=” expression ” v-else-if=” expression ” v-else v-on: Give one html Label binding event : v-on: Event name =” expression ”;
be careful :this: Current object
Specific code :
v-text=“ expression ” Set the text in the label <div id="xxx" v-Text="text"> {{text}} </div>
<!--v-text Can't parse html label --> <script> new Vue({ el:"#xxx", data:{ text:"<h1> who are you <h1>"
} }) </script> <!--v-html It can be analyzed html Tag function of --> <div id="aaa" v-html="title"> {
{title}}, </div> <script> new Vue({ el: "#aaa", data: { title: "<h1>Helle
world<h1>", } }) </script> <div id="myDiv" > <div v-if="num<20">
<h1> Number less than 20</h1> </div> <div v-elas-if="num>=40"> <h1> Number greater than 20 Small and 40</h1> </div>
<div v-elas> <h1> Number greater than 40</h1> </div> </div> <script> new Vue({ el:"#myDiv",
data:{ num:20 } }) </script> <!-- Add hook properties --> v-model Only works on the following forms : [input select( drop-down )
textarea( Text field )] <div id="Mydiv"> <input type="text" v-model="title"> {{title}}
<textarea v-model="text"></textarea> {{text}} <select> <option v-for="a in arr"
:arr="a.id"> {{a.name}} </option> </select> </div> <script> new Vue({
el:"#Mydiv", data:{ title:"123456", text:"ssssssssssss", arr:[ {id:1,name:" One "},
{id:2,name:" Two "}, {id:3,name:" Three "}, ] } }) </script>
<!--show by false Time , It's just hidden information on the page , But it's still worth it --> <div id="MyDiv" v-show="false"> {{title}}
</div> <script> new Vue({ el:"#MyDiv", data:{ title:" Show and implicit " } }) </script>
<body> <button id="Mybtn"value=" Button " @click="say()" v-on:click="say"> Button
// There are two ways to write a registered event One ： v-on:click="say" Two :@click="say()" Methodical () Brackets can be written or not , If you need to pass a value, write it on
</button> <script> new Vue({ el:"#Mybtn", methods:{ say(){ alert(" eject ") } } })
</script> </body>
assembly : User defined labeling
<script> /** * Attention point * 1. Be sure to define components first , Go on vue Mounting of * 2. A root tag is required in the template * 3. The question of naming *
If hump nomenclature is used myTag -> <my-tag> * / // Customize a global component ( Make the same code into a component , Later method calls ) /** *
Global components : cover Vue It can be used wherever it is mounted * A component is defined , It's called :mytag * First parameter ： Component name the second : modular */
Vue.component("mytag",{ // Combined template template:"<h1> If there were a thousand sentences html</h1>" }) new Vue({
el:"#app" }) new Vue({ el:"#app2" }) </script>
Local components
<div id="app"> <mytag></mytag> </div> <div id="app2"> <mytag></mytag> </div>
<script> new Vue({ el:"#app", // assembly ( Multiple ) components:{ mytag:{
template:"<h2> I am a local component </h2>" } } }) </script>
Technology