Vuejs using Notes---component internal implementation

Now learn the Vue in a systematic way (refer to Vue.js official documentation):

Vue.js is a library that builds a data-driven Web interface with the goal of implementing data binding and combining the attempted components of the response.

Vue.js embraces the concept of data-driven view , which means that we can "bind" the DOM to the underlying data using special usage in ordinary HTML templates. Once the bindings are created, the DOM is kept in sync with the data.

The following reference code corresponds to the above model

<!--This is our View--><div id= "example-1" >      Hello {{Name}}!</div>//this is our modelvar Exampledata = {
   
    name: ' vue.js '}//create a Vue instance or "ViewModel"//It connects to View with Modelvar EXAMPLEVM = new Vue ({     el: ' #example-1 ',   //In an ID Mount the     data:exampledata   //data stream on the entity ' example-1 ')
   

Usually we will write the model in the Vue instance, the following is the same as the effect of the above wording:

<!--This is our View--><div id= "example-1" >      Hello {{name}}!    <!---vue data model wrapped with {{Datamodel}}---></div>//create a Vue instance or "ViewModel"//It connects View with model
<script>var EXAMPLEVM = new Vue ({     el: ' #example-1 ',   //Mount data on an entity with ID ' example-1 '     : {              name: ' Vue.js '           }  //Data Flow})
</script>

After such a program executes, ' Hello vue.js! ' is displayed in the #example-1 control.

• Here's a look at the instructions (directives):

Directives are special with the prefix v -character, and the value of the instruction is limited to the binding expression , such as an if directive:

<p v-if= "Greeting" >hello!<p>

There are also binding directives that bind certain property values to some values, such as:

The "V-bind" is omitted here, so that the attribute value assignment of input has the effect of "calculation".

　

• Calculated properties

Here is a description of the usage of $watch, which is used when a data needs to change according to other data:

<script>
var vm = new Vue ({  el: ' #demo ',  data: {    firstName: ' foo ',    lastName: ' Bar ',    fullName: ' foo bar '  } })
</SCRIPT>VM. $watch (' FirstName ', function (val) {  //when FirstName is changed, immediately update vm.fullname  this.fullname = val + "+ This.lastname}") vm. $watch (' LastName ', function (val) {   //when LastName is changed, immediately update vm.fullname  this.fullname = This.firstname + "+ val}"

Here, all the data objects can be accessed through vm.firstname and so on.

• V-model

As the name implies, it is the data model in Vue that binds the data in the Vue instance:

<!---  bi-direction bound  ---><div id= "app" >    <p>{{message}}</p>    <input v-model= "message" >  <!--model,input input data is immediately fed back to the Vue instance    --</div><script> New Vue ( {        el: ' #app ',   //View        data: {            message: ' Hello vue.js '        }    }) </script>

For example, to bind a form control, it is to display the selected value:

<!---       form control bindings-Radio---><div id= "myselect" >   //Outside this layer I did not add at first, and then went wrong, El seems to be generally mounted on the <div> component < Select V-model= "Selected" >  //Data type is selected, the value is the selected value    <option seleceted>a</option>    <option>B</option>    <option>c</option></select><span>selected: {{ Selected}}</span></div><script>    new Vue ({        el: ' #myselect ',        data:{            selected : []        }    ) </script>

　

• V-if, V-else

This command can be used very flexible, such as I create a new topic in the form, there are "single choice", "multi-Choice", "Text question" three, then for different topics should display the control is different, then you can use the following syntax:

<div v-if= "Questitem.type = = = TextArea" ">  //Note is three equals sign       <textarea></textarea></div> <div v=else>        <div></div></div>

• V-for

This is used for traversal of array elements, for example:

<ul id= "Demo" >    <li        v-for= "item in Items"        class= "item-{{$index}}" >    <!---$ Index refers to the position of the current array element in the array---> {{parentmessage}}-{{$index}}        -{{item.message}}  <!--A view structure    -- </li></ul><button id= "BTN1" > Click I </button><script>    var demo= new Vue ({        el: ' # Demo ',        data:{            parentmessage: ' Parent ',            items:[                {message: ' Foo '},                {message: ' Bar '}            ]        }    }) </script>

The above code means traversing the items array in the demo instance and displaying each element (' Foo ', ' Bar ') in the <li> tag.

To avoid rendering the entire list, it is often used: track-by = "$index", which means that only the current array element is manipulated.

So far, the most basic things about Vue have been introduced, need more API information can refer to: http://cn.vuejs.org/api/

• The structure of the Vue file and the control of the data flow

In the Vue file, we can often see a format like this:

<template> <div> </div></template><script> Export default{data () {                    ...}, methods:{//custom method, data can be processed method1 () {...}             ...}, components: {...} Vuex: {getters:{//Get store data Questionnaire:state = state.currentquestion Naire} actions: {//used to distribute data in Container Store mutations method Action1 () {disp             Atch ("Set_quest", Item)}//Dispatch used to call the parent component store's "Set_quest" Method Action2 () {...} } directives: {' my-directive ': {bind:function () {//hook function, called only once, in                        Called when the instruction is first bound to an element} update:function (NewValue, OldValue) {//hook function, after bind is first called with the initial value parameter, and then called whenever the binding to a change              Unbind:function () {//hook function, called only once, called when the instruction is unbound from the element}     }}//custom directive, in <template> with <div v-my-directives = "" > method called}< /script><style> </style>

　　

<template> places the controls that are owned by this page (or part of the page), whereas the data objects and methods defined in the,<style> are the CSS styles of the controls defined in the.

The "This" keyword is often used in methods to point to the Vue component instance.

Event.target: The specific control that triggers the event, does not have a bubbling effect, who is who, this is often used when locking event-triggered controls, such as:

<div @click. Stop = "AddItem ($event)" >     <span data-type = "Radio" > Single choice </span>     <span Data-type = "checkbox" > Multiple choice </span>     <span data-type =  "textarea" > Text title </span></div> <script>      Export default{            method: {                    AddItem (event) {let                         target = Event.target                         if ( Target.nodeName.toLowerCase () = = = ' span ') {  //when the selected button is clicked                                This.showmask = True    //Show Popup box                                This.questItem.type = Target.dataset.type   //set type of Problem                         }            }     }</script>

Last talk about this. $els: An object that contains a DOM element that is registered with V-el

<div class = "Promt-header" > <div> <label> Problem Name: </label> <input type = "T Ext ", placeholder =" Please enter the title "V-el:item-title/> </div></div><div class =" Promt-footer "@click. Stop = "Handleinput (&event)" > <button type = "button" data-operation = "confirm" > OK </button> <but                ton type = "button" Data-operation = "Cancel" > Cancel </button></div><script> methods: { Handleinput (event) {Let target = Event.target if (target.nodeName.toLowerCase ()                    !== ' button ') {return} let Itemtitle = this. $els. Itemtitle Let itemselections = this. $els. itemselections if (target.dataset.operation = = = "Confi RM ") {if (This.questItem.type = = =" TextArea ") {This.addtextarea (itemtit                     Le   } else {this.addselections (Itemtitle, Itemselections)} } else {This.handlecancel ()}},}</script>

The above code is incomplete, but as you can see, v-el the control to an entity named "Item-title", which we can $els. Itemtitle Extract It

To use the property value of the control (enter a value), you can:

this. $els. Itemtitle.value

　　

　　

　　

Vuejs using Notes---component internal implementation