Vuejs--01 Start

What is it? 1, is a set of progressive framework for building user interface, Vue with bottom-up incremental development of the design 1.1 interpretation: framework such as angular, is strongly advocated, if used---must use its module mechanism, must use its dependency injection, must use its special form to set    　　　　　　　　   The semantic component (which is the same for each view frame); The framework, like react, does not seem angular strong because it is a soft intrusion. And Vue is progressive, no strong proposition

You can use it to implement one or two components on top of the original system, when jquery is used, or it can be used throughout the whole family, when angular is used, and it can be used in a view that matches the entire lower layer of your own design. You can use OO and design patterns in the underlying data logic of the set of ideas, can also function, can, it is only a lightweight view, only do what they should do, not do things that should not do, only that.     ---pick Xu Fei

Ii. declarative Rendering 1, Vue Core: Use concise template syntax to declaratively render data into the DOM

<div id= "App" >     <p>{{message}}<p>     <p v-bind:title= "Messa" > Mouse hover when the title is displayed, At this point the title is bound by Vue Messa (v-means they are the special attributes provided by Vue) </p></div> <script>     new  vue ({          ' #app ',     // attention cannot be missed #data         : {               ' hello ',          // Way One: in-element data rendering                Messa: ' Hover display title '     // mode two: element attribute data rendering (area in template rendering (     <input value= "{{message}}"/ >    ), attribute bindings must be v-bind:   (     <input v-bind:value= "message"/>     )         })      ; </script>

Iii. Conditions and circulation

<div id= "App1" >     <p vif= "Seen" > is visible depending on if true, or whether this line of code is run </p></div> < script>     New  Vue ({          ' #app1 ',          data:{               true          }     }); </script>

<div id= "App1" >     <ul>       <li vfor = "key in List" >         {{key.text}}        </li>     </ul></div> <script>     new  Vue ({          ' #app1 ',          data:{               list: [                    ' Nihao '},                    ' Wohao '},                    ' Dajiahao '}               ]          }     }); </script>

Iv. handling user input 1, events

<div id= "App1" >     <input type= "text" name= "va" v-bind:value= "message" >     <a href= "javascript:;" v-on:click= "Btnevent" > Binding Sentinel Events </a></div> <script>    new  Vue ({        ' #app1 ' ,        data: {            ' hello '        },        methods: {            function() {                 this. Message = ' After click, message value changed '}} '    ; </script>  

2. Two-way binding between form input and application status

<div id= "App1" >     <input type= "text" name= "va" v-model= "message" >     <p>     {{message}}      </p></div> <script>     new  Vue ({          ' #app1 ',          data:{               ' Hello '          }     </script>

Five, component application construction

//Custom Build ' item-list ' and define that the component contains: the Li template (the content data is passed from the custom attribute value) + custom attribute props (contains the property name item (property value passed through V-bind in the parent))---" Complete the transfer of values from parent to Child: Custom component)<div id= "App2" > <ul> <item-list V- for= "Key in DataList" v-bind:item= "key" v-bind:key= "Key.id" > </item-list> </ul></div> <script&gt ;Vue.component (' Item-list ', {props: [' Item '], Template:' <li>{{item.text}}</li> '    }); varAPP2 =NewVue ({el:' #app2 ', data: {dataList: [{ID:0, Text:Hello}, {ID:1, Text:' I'm good '}, {ID:2, Text:' Hello, everybody. '            }]        }    }); </script>

Vuejs--01 Start