使用组件：
1.全局注册
<div id="id">
<my-component></my-component>
</div>
1.注册
Vue.component('my-component',{template:'<div>a b c d e f g Template !</div>'})
2.创建根实例
new Vue({ el:"#id" })
结果 ：
<div id="id">
<my-component>a b c d e f g Template !</my-component>
</div>
2.局部注册
var Child = {
template: '<div>A custom component!</div>'}new Vue({
// ... components: { // <my-component> 将只在父组件模板中可用 'my-component': Child }})class和style绑定1.对象 语法<div v-bind:class="{active:isActive}"></div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
data:{
isActive:true,
hasError:false,
'text-danger': false <绑定的数据对象不必内联定义在模板里>
}结果 <div class="static active"></div>
绑定一个返回对象的计算属性的方式实现
<div v-bind:class="classObject"></div>
data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } ｝2.数组语法<div v-bind:class="[activeClass,errorClass]"></div>
data:{ activeClass:'active', errorClass:'text-danger'}结果：<div class="active text-danger"></div>有多个时，在数组语法中也可以使用对象语法 eg: <div v-bind:class="[{active,isActive},errorClass]"></div>
事件处理
1.事件处理方法
<div id="example-2">
<button v-on:click="FangFaMing" >FangFaMing</button>
</div>
var example2 =new Vue({
el:"#example-2",
data:{
name:'xiaoMing'
},
//在methods方法中定义方法
methods:{
FangFaMing:function(event){
alert('hello'+this.name+'!')
// `event` 是原生 DOM 事件 if(event){ alert(event.target.tagName)
}
}
}
})
表单输入绑定
1.多行文本
<span>input message is </span>
<p style="white-space: pre-line;">{ { message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
2.复选框
多个复选框绑定要一个数组
Checked names: { { checkedNames }}new Vue({ el: '#example-3', data: {
checkedNames: [] } }) Jack John Mike Checked names: [ "Jack", "John" ] 3.单选框
new Vue({ el:'example-4', data:{ picked:'' } }) 哼 哈 Picked: 哼 选择框 1，单选时
Selected: { { selected }}
new Vue({ el: '...', data: { selected: '' } }) text: 'One', value: 'A'},{
text: 'Two', value: 'B'},{
text: 'Three', value: 'C'}]
// 单选框当选中时 vm.pick === vm.a
// 选择框当选中时
typeof vm.selected // => 'object' vm.selected.number // => 123 修饰符 。trim去空格，具体都可以参考API