1. The conditional instruction
<div ID = "App">
<P-V IF = "R1" Key = "p_r1"> IF condition </ P>
<P V-Show = "R2"> Show conditions </ P>
< ! - {{num + 1 - 5 * 2 + ' good'}} ->
<UL>
<-! V-binding and the else default branch v-if other conditions ->
<! --v-else-if necessary before and conditional branch bound by the v-if conditions ->
<Li = v-if "Tag ==. 1"> 111 </ Li>
<Li-V = the else-IF " 2 == Tag "> 222 </ Li>
<Li-V the else> 333 </ Li>
</ UL>
<UL>
<@ Li = the Click" Action ( 'A') "> A </ Li>
<Li the Click = @ "Action ( 'B')"> B </ Li>
<li @click="action('c')">c</li>
</ul>
<ul>
<li v-show="flag == 'a'">aaa</li>
</ul>
<li v-show="flag == 'b'">bbb</li>
<Li = V-Show "In Flag == 'C'"> CCC </ Li>
</ div>
<Script the src = "JS / vue.js"> </ Script>
<Script>
new new Vue ({
EL: ' #app ',
Data: {
NUM: 10,
R1: to false,
R2: to false,
Tag: 2,
In Flag:' A '
},
Methods: {
Action: function (S) {
this.flag = S // click event implemented switching the displayed value
}
}
})
</ Script>
2, loop instruction
<div ID = "App">
<P> {{the nums [2]}} </ P>
<UL>
<-! Traverses only the value ->
<-V for Li = "NUM in the nums "> {{NUM}} </ Li>
</ UL>
<UL>
<-! index value ->
<-V for Li =" (NUM, index) in the nums "> {} {} {NUM index}} {</ Li>
</ UL>
<UL>
<-! value key, index ->
<= for Li-V "(V, K, I) in people"> V {} {} {{k}} {{i }} </ li> // print row
</ UL>
</ div>
<Script the src = "JS / vue.js"> </ Script>
<Script>
new new Vue ({
EL :'#app',
data: {
nums: [5, 3, 2, 1, 4],
people: {
'name': 'Owen',
'age': 17.5,
'gender': 'others'
}
}
})
</script>
3, splice usage
splice (Start: Number, the deleteCount: Number, ... items: T []): T [];
EG1:
K = [1,2,3,4,5]
k.splice (0, 0,11) # 0 from the result of the position element index, 0 operation, it is changed to the third element and subsequent elements are as follows:
K = [. 11, 22 is,. 1, 2,. 3,. 4,. 5]
EG2:
K = [1,2,3,4,5]
k.splice (1,2,22,33)
were as follows:
K = [1,22,33,4,5]
4, to get through reviews case ajax values, should be able to better handle styles reviews floor
<style>
span {
margin-left: 100px;
Cursor: pointer; // change the cursor type, the effect is obvious
Color: Green;
}
span : hover {
Color: Red;
}
</ style>
<div ID = "App">
<P>
<INPUT type = "text" V-Model = "Val">
<Button @ the Click = "the Add"> comments </ Button>
</ P>
<UL>
<Li V-for = "(info, I) in the infos">
{{info}}
<span @ the Click = "del (I)"> X </ span>
</ Li >
</ UL>
</div>
<script src="js/vue.js"></script>
<script>
Vue new new ({
EL: '#app',
Data: {
the infos: [], // manages all messages
val: '' // current message management
},
Methods: {
the Add: function () {
the let Val = this.val;
IF (Val ) {
this.infos.splice (0, 0, Val); // message
this.val = '' // input box blank
}
},
del: function (I) {
// splice: from the start of the operation which index bits into the operation result (variable length)
this.infos.splice (I,. 1) // delete message
}
}
})
</ Script>
5, computed member of instances
<div the above mentioned id = "App">
<the p->
name: <input type = "text" v-model = "first_name">
Name: <input type = "text" v-model = "last_name" >
</ P>
<P>
name: <B> {{FULL_NAME}} </ B>
</ P>
</ div>
<Script the src = "JS / vue.js"> </ Script>
<Script>
new new VUE ({
EL: '#app',
Data: {
FIRST_NAME: '',
last_name: '',
},
{: computed
returns the value 1. // variables defined in the computed is equal to a function of bound
@ 2.Functions bound to arise vue all variables will be monitored
full_name: function () {
the console.log ( 'is called'); // value change as long as the input box, the string will be printed
return this.first_name + this.last_name;
}
}
})
</ Script>
6、实际例成员之watch
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<b>{{ first_name }}</b>
名：<b>{{ last_name }}</b>
</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
// 1.Rear binding function is listening in front of the variable, the variable value change, a function is called
the let this.full_name.split RES = ( '');
FULL_NAME: function () {
this.first_name = RES [0];
this.last_name = res[1];
}
}
})
7, the interpolation expression to resolve conflicts symbol
<div ID = "App">
$ {MSG} // After setting, a value of '12345'
</ div>
<Script the src = "JS / vue.js"> </ Script>
<Script>
new new Vue ({
EL: '#app',
Data: {
MSG: '12345'
},
a required delimiter and: [ '$ {', '}'] // after setting, which may be utilized in a manner vue in use
})
</ Script>
Summary:
Instruction:
Text: {{}} v-text v-html v-once
properties: v-bind: href |: href: class = 'c1': class = '[c1, c2]': style = 's1 '
(S1 = {Color: "Red"})
event: v-on: click | @click @ click = "action" @ click = "action (msg)" @ click = "action ($ event)"
form: v -model
conditions: v-show v-if v -else-if v-else
loop: v-for = "(value , index) in list" v-for = "(value, key, index) in dict"
members:
el: mount point
data: data
methods: method
computed: calculated - All variables within the listener method, returns the value to the variable bindings, not required to declare the variable data in the
watch: listener - monitor variable bindings, tie given variable must be declared in the data
8, assembly
components: there are html templates, there css styles, there is a collection of logic js
Each component is a vue instance of
each component has its own template template, template root component is the mount point, sub-assemblies must own template definitions (partial subassembly, the overall subassembly
of each component template and must have only one root tag
subassembly having data scope, in order to achieve a reusable component of
9, the root element
<div ID = "App">
<h1 of> MSG {{}} </ h1 of>
</ div>
<Script type = "text / JavaScript">
// instance Vue is created by the new root component ( examples of the one-component, a component instance is a)
// component each component template has both, template
var App = new new Vue ({
// template is the root component mount point
EL: "#app",
Data: {
MSG: "root component"
},
// template by: "" wrapped HTML code block appears in the internal components, the component assigned to the variable $ template
// explicitly writing module replaces the mount point, but root component must have a mount point
template: "<div> explicit template </ div>"
})
. // App template $
</ Script>
10, the local component
<div ID = "App">
<-! Div.box> h1 of the title {} + (pp $ {text} * 2) -> // shortcut generation tag
<abc> </ abc> // two partial components, data is not synchronized
<ABC> </ ABC>
</ div>
<Script the src = "JS / vue.js"> </ Script>
<Script>
// define local components
let localTag {=
// 1.data to achieve reuse assembly must provide a name space (scope) for each component
// 2.data value is a dictionary data stored
// and a need to meet 2, data value may be generated as a function of the namespace return value, the return value is a dictionary
Data: function () {
return {
COUNT: 0,
// R & lt: ''
}
},
Template: `
<div class =" Box "style="border: solid; width: 100px">
<h1>标题</h1>
<p class = "p1"> text </ P>
<P @ the Click = "Action" class = "P2" style = "background: YellowGreen"> is clicked {{count}} at </ P>
<Button @ click = "send"> submit </ Button>
</ div>
`,
Methods: {
Action: function () {
this.count ++
},
// JQ complete assembly background binding interaction
// send: function () {
$ .ajax // ({
// url :,
// of the type :,
// the Data :,
// Success: function (the Result) {
// the this.r = result
// }
} //)
//},
// Watch: {
// R & lt: function () {
//
//}
//}
}
};
new new Vue ({
EL: '#app',
Data: {
},
// local component must be registered
components: {
'ABC': localTag
}
})
</ Script>
11, global components
<div the above mentioned id = "App">
<-! Recommended on the label - grammar named js in the corresponding name is hump ->
<-Old Boy> </ Old-Boy>
</ div>
< the src = Script "JS / vue.js"> </ Script>
<Script>
// Vue.component (component name {main assembly});
Vue.component ( 'Oldboy', {
Data: function () {
return {
COUNT: 0
}
},
Template: `
<div class =" Box "style =" border: Solid; width: 100px ">
<h1 of> global </ h1 of>
<P class =" P1 "> text </ p>
<p @ click = "action" class = "p2"style = "background: yellowgreen"> is clicked at {{count}} </ P>
</ div>
`,
Methods: {
Action: function () {
this.count ++
},
}
});
// global components not required to register
new new Vue ({
EL: '#app',
Data: {
}
})
</ Script>
12, the interaction between the components: father to son
<div ID = "App">
<- - local-Tag can be understood as a custom label, MSG variable value provided by the parent component!>
<- local-Tag! tag represents the subassembly, owen custom property tag ->
<- can get inside the subassembly owen, can get the information of the parent element ->!
<local-tag: Owen = "MSG "> </ local-Tag>
</ div>
</ body>
<Script the src =" JS / vue.js "> </ Script>
<Script>
the let localTag = {
// get subassembly custom properties
props: [ 'Owen'],
Template: `
<div>
<h1 of> information </ h1 of>
<P> Owen {{}} </ P>
</ div>
`
};
Vue new new ({
EL: '#app',
Data: {
MSG: 'information parent'
},
Components: {
// 'localTag': localTag, when both the same name can be abbreviated
// localTag: localTag,
localTag the page // <local-Tag>
}
})
</ Script>
13, the interaction between the components: the sub-transmission parent
data transfer by sending the event requests
<div ID = "App">
<h1 of> {{title}} </ h1 of>
<Global-Tag @ the recv = "get_title"> </ Global-Tag>
</ div>
</ body>
<Script the src = "JS / vue.js"> </ Script>
<Script>
Vue.component ( 'Global-Tag', {
Template: `
<div>
<INPUT type = "text" = V-Model "MSG">
<-! <Button the Click @ = "Action"> modify the title </ Button> ->
</ div>
`,
Data: function () {
return {
MSG: ''
}
},
Methods: {// This more primitive
// action: function () {
// let msg = this.msg;
// // custom event the recv
// the this $ EMIT ( 'the recv', MSG).
//}
},
Watch: {// This is simpler
msg: function ( ) {// only as long as the change msg, to the parent component value of the synchronization will
the this $ EMIT ( 'the recv', this.msg).
}
}
});
new new Vue ({
EL: '#app',
Data: {
title: 'parent component definition title'
},
Methods: {
get_title: function (MSG) {
this.title = MSG
}
}
})
</ Script>