What are components?
Component is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements, and Vue.js' compiler adds special features to it. In some cases, components can also be in the form of native HTML elements, extended with the is feature.
Next, I will introduce to you the basic knowledge of vuejs one-way binding, two-way binding, list rendering, and response functions. The specific details are as follows:
(I) One-way binding
<div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>①E should mean binding, binding id=app tag
It can also be changed to the following:
<div> {{ message }} </div>el: '.app',
Just as effective.
But if there are multiple, it will only work for the first one:
<div> {{ message }} </div> <div> {{ message }} </div> Hello Vue.js!{{ message }}②The message variable in data represents the value of {{message}
(2) Two-way binding
<div id="app"> {{ message }} <br/> <input v-model="message"/> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>The effect is:
①The initial value is in the input input box, and the value is the value of the message attribute in data;
② Modifying the value of the input box can affect the outside value;
(III) Function return value
<div id="app"> {{ message() }} <br/> <input v-model="message()"/> </div> <script> new Vue({ el: '#app', data: { message: function () { return 'Hello Vue.js!'; } } }) </script>Effect:
① The output value is also the return value of message;
② Disadvantages: Losing two-way binding!
(IV) Rendering list
<div id="app"> <ul> <li v-for="list in todos"> {{list.text}} </li> </ul> </div> <script> new Vue({ el: '#app', data: { todos: [ {text: "1st"}, {text: "2nd"}, {text: "3rd"} ] } }) </script>The list in v-for is similar to the i in for in
Personally,
① List in todos can be understood as for list in todos
② Then understand the list.text of the next line as todos[list].text
Then where is this v-for tag, it is copied multiple times in it.
(V) Process user input
<div id="app"> <input v-model="message"> <input type="button" value="value +1" v-on:click="add"/> <input type="button" value="value-1" v-on:click="minus"/> <input type="button" value="reset"/> v-on:click="reset"/> </div> <script> new Vue({ el: '#app', data: { message: 1 }, methods: { add: function () { this.message++; //This step requires adding this to get the value correctly}, minus: function () { this.message--; }, reset: function () { this.message = 0; } } }) </script>Effect:
① For the value of the input box, click the add button once, and the value will be +1;
② If it cannot be added, the result will be returned like if the normal expression is added incorrectly, such as NaN;
③The value of message in data is the initial value;
④The methods are collections of functions, separated by commas;
⑤ When obtaining the value, add this, for example, this.message gets the value of message.
(VI) Multifunctional
<div id="app"> <input v-model="val" v-on:keypress.enter="addToList"> <ul> <li v-for="val in values"> {{val.val}} <input type="button" value="delete" v-on:click="removeList($index)"/> </li> </ul> </div> <script> new Vue({ el: '#app', data: { val: "1", values: [] }, methods: { addToList: function () { var val = parseInt(this.val.trim()); //Note that when the val above is a string type, trim() can be used. If it is a numeric type, use this.val if (val) { this.values.push({val: val}); } this.val = String(val + 1); }, removeList: function (index) { this.values.splice(index, 1); } } }) </script>Effect:
① The value in the initial input box is 1;
② Press Enter in the input box to convert the content of the input box into a number and add it to a list. The converted number and a delete button in the list, and the value in the input box will be changed to the value converted into a number and added one.
As shown in the picture:
③ His addition uses two-way binding, push the input value to the array of values in data, and then uses the effect of the rendering list to output multiple rows of values.
④In the button tag, the parameter name of the function is given a parameter, which is the index of the line, and the parameter name is $index
⑤ In the tag, the function name of the triggered function can be added with brackets or without brackets. The actual measurement seems to have no effect.
(7) Tags and API summary (1)
① {{ variable name}}
Represents the bound variable, this. variable name is required when calling
② v-model=”variable”
Use two-way binding. If no type is added to the input, it is text. If type is added, it is type, for example:
<input v-model="DATE" type="date"/> <li>{{DATE}}</li>The value of the date type input box will be bound together with the content displayed by the li tag.
③ v-on:click=”Function name”
This function is triggered when clicked, either () can be added or not. $index is used as a parameter to represent the index, and the index value starts from 0.
④ v-for
After the array content is updated, the two-way bound will be updated in real time, as is the v-model;
Similar to the for in statement, it is used many times
⑤ v-on: Event
That is, the triggered event, there is click (click), keypress (click)
Events can be followed by more specific things, such as keypress.enter is the carriage return, keypress.space is the space, etc.
More needs to view
⑥ new vue
By new an instance of vue, then pass an object as a parameter to this instance;
in:
el means the bound template (it will only match the first bound)
data represents data, which can be used directly, for example in v-model or {{variable name}}
methods
⑦ Call variables inside the function
By this.variable name, for example:
data: { val: "1", values: [] }, methods: { addToList: function () { console.log(this.val);This.val here is the data.val above, which is also the {{val}} in html, and is also v-model="val", but it is not
<li v-for="val in values"> {{val.val}} <input type="button" value="delete" v-on:click="removeList($index)"/> </li>As for the reason, I personally think that the val here is within the scope of v-for, so the val in val in values has a higher priority in the scope chain.
The above is a detailed explanation of the first introductory tutorial of Vuejs introduced to you by the editor (one-way binding, two-way binding, list rendering, response function). I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!