Vue.js Introductory Learning Essay

PS: First talk about the reason for learning vue, after learning react, suddenly found out a frame called Vue, and is said to lead another wave of new framework of the trend, I am easy i!!!   Vue.js (pronounced/vju?/, similar to view) is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, Vue uses a design that is developed from bottom-up increments. Vue's core library focuses only on the view layer and is very easy to learn and easily integrates with other libraries or existing projects.　　On the other hand, Vue is fully capable of driving complex single-page applications with single-file components and libraries supported by the Vue ecosystem.　　　　The goal of Vue.js is to implement the data binding and the combined view component of the response through the simplest possible API.　　Vue when used to give me the feeling is like angularjs very much like, but its function is so strong, let me learn to indulge in, it reminds me of a word, is intelligent.　　Here is a section of Vue Learning code, you can share. <! DOCTYPE html>By default, V-model synchronizes the input data after each input event. You can add a lazy feature that changes to synchronize after the Change event. <!--synchronize--><input v-model= "msg" after "change" instead of "input" event trigger lazy>

Convert to Digital
If you want the user's input to be automatically converted to numbers, you can add a number attribute to the input on V-model. No test success, no reason to know

<input v-model= "Age" number>

Binding an expression
When you use V-model in a radio box and a check box, the value that is bound can be a Boolean value or a string:

<!--toggle is true or false--><input type= "checkbox" v-model= "Toggle" > <!--when the radio box is selected pick is "red"-->&lt Input type= "Radio" v-model= "Pick" value= "Red" >

Here's a little bit of a limitation--sometimes we want to bind the value behind to something else. You can do this by following this example:

1. check box

<input type= "checkbox" v-model= "Toggle" true-exp= "a" false-exp= "B" >//When selected: Vm.toggle = = = vm.a//when deselected: Vm.toggle = = = Vm.b 2. Radio box <input type= "Radio" v-model= "Pick" exp= "a" >//when selected: Vm.pick = = = Vm.a

Dynamic Select options
When you need to dynamically render list options for a <select> element, it is recommended that you use the options feature with the V-model directive so that when the selected item is dynamically changed, the V-model will synchronize correctly:

<select v-model= "selected" options= "Myoptions" ></select>

In your data, myoptions should be a path or an expression that points to an array of options.
This optional array can contain a simple array:

options = [' A ', ' B ', ' C ']

Alternatively, you can include the format object as {text: ', Value: '}. This object format allows you to set options so that the text is displayed differently than the values behind it:

options = [{text: ' A ', value: ' A '}, {text: ' B ', value: ' B '}] will be rendered as <select> <option value= "A" >a</option > <option value= "B" >B</option></select> 1. Option group
In addition, the format of the object in the array can also be {label: ', options:[...]}. Such data will be rendered as a <optgroup>:[{label: ' A ', options: [' A ', ' B ']},{label: ' B ', options: [' C ', ' d ']}]<select><o Ptgroup label= "A" > <option value= "a" >a</option> <option value= "B" >b</option></ Optgroup><optgroup label= "B" > <option value= "C" >c</option> <option value= "D" >d</ option></optgroup></select>2. Option filtering
Your raw data is probably not in the format required here, so some data transformations must be made when generating options dynamically. To simplify this conversion, the options feature supports filters. It is usually a good idea to make the conversion logic of the data a reusable custom filter: Vue.filter (' Extract ', function (value, keytoextract) {return Value.map (function ( Item) {return item[keytoextract]}) <selectv-model= "Selecteduser" options= "users | Extract ' name ' ></select>

The filter will convert raw data such as [{name: ' Bruce '}, {name: ' Chuck '}] to [' Bruce ', ' Chuck '] to match the format requirements of the dynamic options.

3. Static default options
In addition to the dynamically generated options, you can also provide a static default option:

<select v-model= "Selecteduser" options= "users" ><option value= "" >select a user...</option></ Select>

Dynamically generated options based on users will be added to this static option. If the binding value of V-model is a pseudo-value other than 0, the default option is automatically selected.

Input debounce
The Debounce feature allows you to set a wait delay after each user event before the input is synchronized to the model. If the user enters again before the delay expires, the update will not be triggered immediately, but instead the delay wait time is reset. This is useful when you are doing heavy work before each update, such as an AJAX-based auto-completion feature. Effective reduction of repetitive and useless submissions

<input v-model= "msg" debounce= ">"
Note The debounce parameter does not debounce the user's input event: it only works on the "write" operation of the underlying data. So when using debounce, you should use VMS. $watch () instead of v-on to respond to data changes.

PS: My summary is also in the study of the expedition Bo attracted, share the front-end knowledge, by the passing of the promotion of their own ~

Vue.js Introductory Learning Essay