Vue
connection address: <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
Output: {{}}
When writing Vue expressions. var vm = new Vue({ ... }) The first letter of Vue here must be capitalized.
The script can only be executed after the body is written.
Get the value of Data in the function $Data
v- : All have special attributes.
v-bind : Shorthand for tag attributes (:) Example: v-bind:id=""
v-html: The instruction is used to output tags (two-way binding of data can be realized)
v-if: Judgment among them (judgment is three, etc. No. ===)
v-eles:
v-eles-if:
v-show:
v-on: is shorthand for event instruction (@) can be modified with @: submit.prevent
v-for: loop example (v-for= "site in sites")
v-model : for data binding
modifiers: .lazy means that data binding will not be updated synchronously.
However , the empty string at the end of the .trim filter will be synchronously converted. The number will be
converted to a numeric type, and no characters will be output (but the conversion fails, and the original characters will be converted).
Functions : methods without cache
computed with cache
filters filter
watch monitor property (when a variable value changes, the value of a variable bound to the same name will also change)
directives custom directive
components custom component (local)
Custom
computed custom component
1.template binds the value to the component
directive custom directive
1.inserted defines the directive
Style case:
1. Declare two styles. sty1{ ...} sty12{....}
2. Declare the Vue function. Declare the array in the date method. data: {GetClass: [sty1:true,sty12:fales]}
3. Use (in the label): class="GetClass"
Inline style Example: :style="{color:ys1,fontSize:ys2}";
declared in the Vue function, ys1 ys2 variables.
Listening attribute:
@click Example: @click="variable+1"
@click="method" method generates in Vue
@click="method (parameter)" method generates
event modifier
in Vue stop prevents click event
prevent submission The event is not on the reload page
once the event can only be triggered once
capture Add event listener event capture mode
keyup listens to keyboard events (there are many keys on the keyboard, here Vue provides aliases)
enter Enter key
tab Switch
esc ... Common keys such as up, down, left and right. You can also check the keyCode
Custom (both need to be bound to Vue functions) Declare the biggest function of the global Vue.js.
Custom component
syntax: Vue.component("component name","configuration options");
Vue.component('biaoqian', { template: '<p>custom component!</p>' }) // Notes . template displays the value with a label
Custom directive:
Vue.directive('directive name',{inserted(hook function):}) //inserted defines the directive
. The directive name is the V-directive name in the element tag, but when declaring the directive, just write the directive name without adding V-
The directive provides hook functions are:
bind is called only once
inserted, the bound element is inserted into the parent node
update the template where the bound element is located is updated and the
component Update is called when the template where the bound element is located completes an update cycle
unbind is called only once, and is called when the instruction is unbound from the element
Parameters of the hook function:
el: Binding element directly manipulates DOM
binding:
1.name instruction name (excluding V-)
2.value element value of the binding instruction
3.olaValue the previous element value bound by the instruction (only used in update and componentUpdated)
4 .expression String form of the bound value. (It will not be calculated)
5.arg pass the parameter ve:u to the instruction, the value of arg is "u"
6.modifiers The object containing modifiers For example: v-my-directive.foo.bar, the modifier object modifiers The value is { foo: true, bar: true }.
vnode: the virtual node generated by Vue compilation
oldVnode: the previous virtual node (only used in update and componentUpdated)
Routing:
Vue.js can implement multi-view single-page WED applications.