vue basic usage

What is vue.js

vue.js also referred vue, pronunciation / vju /

• It is a framework for building user interfaces
• Is a lightweight MVVM (Model-view-viewModel) framework, and angular, react similarly, in fact, the so-called two-way data binding
• + The data driver development components of the front end (the core idea)
• Responsive implementation view data binding component, and combinations through simple API

Instructions v-xxx beginning
vue2.0 and 1.0, the biggest change is the introduction of Virtual DOM (virtual DOM), higher page update efficiency, faster.

First look a look vue examples

                var VM = new new Vue ({     // create an instance of the incoming vue JSON 
                    EL: '# Box', // specifies the associated selector 
                    Data: { // object store data 
                        SJD: 'Holle World' , 
                        name: 'Tom ' 
                    } 
                });

         < Div ID = "Box" > 
             {{}} SJD <-! Teams braces called template -> 
         </ div >

Two-way data binding

v-model form elements for ships

            用户名:<input type="text" v-model="name" />
            <br>
            <p>我叫{{name}}</p>

vue data of the name is empty: p what form inputs and what label display

 

 

 Commonly used commands

v-for circulating array

                new new Vue ({ 
                    EL: '#angs' , 
                    Data: { 
                        ARR: [ 1,21,14,45,54 ], 
                        User: {ID: 12345, name: 'Surge', Age: 25 } 
                    } 
                })

<li v-for="value in arr">{{value}}</li><!-- 循环数组 -->

 

 

 Loop user Array

< Li V-for = "value in User" > {{value}} </ Li > <-! Only cycle value, the index key is not the object

 

 

 Key loop

<li v-for="(v,k) in user">{{k}}={{v}}</li>

 

 

 Cyclic duplicate data set by specifying: key unique property binding key, the element can be reused when the update element, to improve efficiency.

arr2:[12,21,14,45,54,12]

<li v-for="(v,k) in arr2" :key='k'>{{v}}</li>

 

 

 An array of cyclic object.

                        Users: [ // array of objects 
                            {id: 1111, name: 'snowster', Age: 25 }, 
                            {ID: 2222, name: 'Laobie', Age: 22 is }, 
                            {ID: 3333, name: 'Austrian a ', Age: 23 is } 
                        ]

<li v-for="user in users">{{user.id}},{{user.name}},{{user.age}}</li><!-- 循环对象数组 -->

If you want to index

<-! User plus an index, index starting from 0 -> 
< Li V-for = "(User, index) in Users" > {{}}. 1 + index, the user.id {} {}, { the user.name}} {,} {} {user.age </ Li >

 

 

 

v-on: Event Name

Usage can be used to bind an event representative to shorthand @

E.g:

Add an element to the array button is clicked

                new new Vue ({ 
                    EL: '#itany' , 
                    Data: {     // store data 
                        ARR: [12,21,215,46 ], 
                    }, 
                    Methods: { // storage method 
                        the Add () {
                             // arr.push (666); default can not directly access 
                            this .arr.push (666); // use this to access a member of the present example 
                            this .fname (); 
                        } 
                    } 
                })

< Button type = "Button" V-ON: the Click = "the Add ()" > add an element to the array </ Button >

v-show/v-if

To display or hide elements, v-show display is achieved by, v-if is a time to delete and re-create

E.g:

Click the button to hide div

                    methods:{
                        change(){
                            this.flag=!this.flag;
                        }
                    }

             <button type="button" v-on:click="change()">隐藏div</button>
             <hr >
             
             <div class="" style="width: 100px; height: 100px; background-color: red;" v-show="flag">
             </div>

v-show is set to achieve hidden by the display attribute none

             <button type="button" v-on:click="change()">隐藏div</button>
             <hr >
            <div class="" style="width: 100px; height: 100px; background-color: red;" v-if="flag">
            </div>

v-if the code is deleted and re-created every time

 

 

 Shorthand events

v-on: click click event can be abbreviated as @click

 

The event object $ event

It contains event related information, such as the event source, event type, the offset

 

Event bubbling (upward spread)

Stop event bubbling using .stop

 

Prevent default event behavior .prevent

Js native mode, depending on the event object

 

Event modifiers only trigger once .once

 

About keyboard events

Value shorthand alias does not need the event object keys or buttons

@keydown.ctrl或@keydown.13

 

Attributes

Binding properties and short
v-bind: Attribute = '' shorthand: src

v-bind directly access data in vue, without using {{}}

E.g:

                let vm = new Vue({
                    el:'#box1',
                    data:{
                        src1:'//atts.w3cschool.cn/attachments/cover/cover_erlang.png?imageView2/1/w/64/h/64&t=1542019173',
                        w:'200px',//宽度
                        h:'100px',//高度
                    },
                    methods:{
                        
                    }
                });

src1 for the link

< IMG : the src = "srcl" : width = "W" : height = "H" > <-! Short Direct Plus: ->

class and style attributes

        <style type = "text / CSS"> 
            .aa { 
                background : # 0062CC ; / * background color * / 
            } 
            .bb { 
                Color : Red ; / * Font color * / 
                font-size : 20px ; / * font size * / 
            } 
            .vv { 
                font-Family : "Arial" ; / * Font style * / 
                text-align = left : Center ;/ * Centering * / 
            } 
        </ style>

Binding a single style  to use more than one style, then use an array

< The p- : class = "CC" > My World </ the p- >

Bind an array of multiple styles

In vue of data in style to assign aliases

                VM = the let new new Vue ({ 
                    EL: '# box1' , 
                    Data: { 
                        W: '200px', // Width 
                        H: '100px', // height 
                        CC: 'AA' , 
                        dd: 'BB' , 
                        SS: ' VV ' , 
                    }, 
                    Methods: { 
                        
                    } 
                });

< The p- : class = "[CC, dd, SS]" > My World </ the p- >

json binding form

                    data:{
                        flag:true,
                        num:-1,
                    }

             < The p- : class = "{AA: to true, bb: Flag}" > My World </ the p- > 
             < the p- : class = "{AA: NUM> 0}" > My World </ the p- > <-! greater than zero to true ->

Variable reference json

                    data:{
                        holle:{aa:true,bb:true,vv:true}
                    }

< P : class = "Holle" > reference variable JSON </ P >