样式绑定

class绑定
使用方式：v-bind:，expression的类型：字符串、数组、对象
style绑定
v-bind:style=“expression”， expression的类型：字符串、数组、对象

示例：
<--定义示例样式-->
<style> 
.fontClass { font-size: 40px;
}
.colorClass {color: red;
}
</style>

<!--使用-->
<p><span v-bind:class="fc">fafa</span>
</p>
<p><!--简写--><span :class="ac">fafa</span>
</p><p><!--直接使用style样式单--><span style="font-size: 40px; color:blue;">aaa</span><br/><!-- 使用vue，样式名称为驼峰风格 。花括号，多个属性逗号分隔--><span :style="{fontSize:fontSize+'px',color: color}">bbb</span><br/><span :style="myStyle">test</span>
</p>

var vm = new Vue({el: "#app",data: {fc: 'fontClass',ac: ['fontClass', 'colorClass'],fontSize: 40,color: 'green',//样式对象，注意：样式名使用驼峰命名，如：fontSizemyStyle: {fontSize: '50px',color:'red',fontWeight: 'bold'}}
});

事件修饰符

几个常用的事件修饰符：

示例：

<div>接收消息：{{receverMsg}}</div>
<p><!--响应多次或一次点击事件--><input type="text" v-model="sendMsg"><button @click="sender">发送(多次)</button><button @click.once="sender">发送(一次)</button>
</p>
<p><!-- 阻止表单提交 --><form action="testAction.action" method="post" @submit.prevent="doSubmit()"><label>名称</label><input type="text" name="name"/><input type="submit" value="提交"/></form>
</p>
var vm = new Vue({el: "#app",data: {receverMsg: null,sendMsg: null},methods: {sender: function() {this.receverMsg = this.sendMsg;},doSubmit: function() {alert('ok');}}});

按键修饰符

Vue允许为v-on在监听键盘事件时添加按键修饰符。
示例：

<input type="text" @keyup.13="doSubmit" v-model="name">
var vm = new Vue({el: "#app",data: function() {return {name: 'hello vue'}},methods: {doSubmit: function() {alert("响应enter，" + this.name);}}
});

4. 常用控件
   4.1 常用控件示例
   通过实现一个类型注册的页面，熟悉常用的控件。文本框/密码框/文本域/单选/多选/下拉列表

<div id="app"><div><label>账号：</label><input type="text" v-model="uname"></div><div><label>密码：</label><input type="password" v-model="upwd"></div><div><label>年龄：</label><input type="text" v-model="age" ></div><div><label>性别：</label><input type="radio" v-model="sex" value="1">男<input type="radio" v-model="sex" value="2">女</div><div><label>爱好：</label><div style="display: inline;" v-for="h in hobbies"><input  type="checkbox" :value="h.id" v-model="hobby"/>{{h.name}}</div></div><div><label>地区</label><select v-model="selectedCity"><option value="">-- 请选择 --</option><option v-for="c in city" :value="c.id">{{c.name}}</option></select></div><div><label>备注：</label><textarea v-model="remark"></textarea></div><div><input type="checkbox" v-model="flag">是否已阅读并同意协议</div><div><button @click="submit" :disabled="disabled">提交</button></div>
</div>
var vm = new Vue({el: "#app",data: {uname: '',upwd:'',age:'',sex: 1,//用于通过v-for指令输出多选框列表hobbies:[{id: '1', name:'打游戏'},{id: '2', name:'编程'},{id: '3', name:'旅游'}],/** 用于通过v-model双向绑定,保存用户的选择。* 此处为多选，需要通过数组接收，否则无法* 正常接收复选框的值，且复选框的行为也不正常，* 可能出现要么全部被选择，要么全部被取消的情况*/hobby:[],remark: null,//用于生成地区选择列表city:[{id:"1", name:"长沙"},{id:"1", name:"株洲"},{id:"1", name:"湘潭"}],//用于保存用户选择的地区selectedCity: '',//是否同意协议,默认值为falseagreed:false,//提交按钮是否禁用,默认为truedisabled: true},//监控agreed属性,如果同意协议则将提交按钮//设置为可用,否则提交按钮为禁用状态watch: {agreed: function(val) {if(val) {this.disabled = false;}else{this.disabled = true;}}},methods: {submit: function() {let data = {uname: this.uname,upwd: this.upwd,age:this.age,sex: this.sex,hobby: this.hobby,city: this.selectedCity,remark: this.remark}console.log(data);}}});

不使用监视器的简单方式： 删除监听器，然后将提交按钮的做如下修改

<button @click=“submit” :disabled=“!agreed”>提交
4.2 修饰符
修饰符 作用
.lazy 默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
.number 将用户的输入值转为 Number 类型
.trim 自动过滤用户输入的首尾空格
以.number为例，示例修饰符的使用，将输入的年龄属性转换为数值型

<div><label>年龄：</label><input type="text" v-model.number="age" >
</div>

5. 自定义指令
   Vue除支持内置的v-model/v-show等指令，还允许自定义指令。 vue2中，代码的复用和抽象的主要形式是组件，但在有些情况下仍然需要对普通dom元素做底层操作，这种情况下需要自定义指令。根据自定义指令的作用范围，可分为：全局、局部两种

钩子函数：

名称 作用
bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)
componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind 只调用一次，指令与元素解绑时调用
指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
1） name：指令名，不包括 v- 前缀。
2） value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
3） oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4） expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
5） arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
6） modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
5.1 局部
通过自定义标签设置文字颜色

<div id="app"><!--red绑定到data里面的变量--><p v-color="red">我是自定义指令</p> 
</div>
var vm = new Vue({el: '#app',data: {red:'red'},//自定义指令，局部directives:{color: {inserted: function(el,binding) {console.log(el,binding);el.style.color = binding.value;}}}
});

5.2 全局

<div id="app"><!--red绑定到data里面的变量--><p v-color="red">我是自定义指令</p> 
</div>

//自定义标签,全局

Vue.directive('color', {inserted: function(el,binding) {console.log(el,binding);el.style.color = binding.value;}
})var vm = new Vue({el: '#app',data: {red:'red'}
});

6. vue组件（重点）
   6.1 组件介绍
   组件(Component)是Vue最强大的功能之一，
   组件可以扩展HTML元素，封装可重用的代码
   组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
   组件可以分为全局组件和局部组件
   组件命名规则

短横线命名，如: my-component，vue推荐使用这种方式的命名规则
首字母大写命名规则，如：MyComponent
props

props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 “prop”
6.2 局部组件
定义语法：new Vue({el:‘#d1’,components:{组件名：{配置选项}}})

<div id="app"><div><!--title是用来传值的自定义属性，在自定义组件的props中定义 --><button-counter title="测试"/></div>
</div>
var vm = new Vue({el: '#app',data: {ts: new Date().getTime()},//局部自定义组件components: {//组件名: {配置项}'button-counter':  {//用来传值的自定义属性props:['title'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{title}}：局部组件，点击计数器:{{count}}</button>',//注意：在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明//的vue实例.this.count++;}}}}
});

注：为什么在自定义组件中必须使用函数方式来什么data？
每个自定义组件使用函数方式来声明data，这样每个实例可以维护一份被返回对象的独立的拷贝，在定义自定义组件时，一定要注意这一点。
6.3 全局组件
将上面的局部组件修改为全局组件。
全局组件定义语法：Vue.component(组件名, 配置选项)

<div id="app"><div><button-counter title="测试"/></div>
</div>

//全局组件

Vue.component('button-counter', {//用来传值的自定义属性props:['title'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{title}}: 全局组件，点击计数器:{{count}}</button>',//注意：在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明//的vue实例.this.count++;}}
});var vm = new Vue({el: '#app',data: {ts: new Date().getTime()}
});

7. 自定义事件
   Vue自定义事件是为组件间通信设计， vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

父Vue实例->子Vue实例，通过prop传递数据
子Vue实例->父Vue实例，通过事件传递数据
7.1 子 -> 父
触发事件：$emit(eventName, 参数…)
注意：事件名必须用短横线命名方式。

<div id="app"><!--子组件到父组件--><div><button-counter v-on:click-test="clickTest"/></div>
</div>
var vm = new Vue({el: '#app',data: {ts: new Date().getTime()},//对于自定义的button-counter组件, Vue实例为父组件//在父组件中定义一个test方法,子组件调用该方法methods: {clickTest: function(msg) {console.log("test: "+ msg);}},//局部自定义组件components: {//组件名: {配置项}'button-counter':  {//用来传值的自定义属性props:['title'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{title}}：局部组件，计数:{{count}}</button>',//注意：在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.//注意事件名使用短横线命名方式this.$emit("click-test","hello vue");}}}}
});

7.2 父 -> 子
注意：props定义属性时采用的是驼峰命名法，而在html中使用时需要对应的变为短横线命名法！！

<div id="app"><!--子组件到父组件--><div><!-- 注意此处将定义props时的驼峰命名法，变为了短横线命名法 !!! --><button-counter title-desc="测试" /></div>
</div>
var vm = new Vue({el: '#app',data: {ts: new Date().getTime()},//对于自定义的button-counter组件, Vue实例为父组件//在父组件中定义一个test方法,子组件调用该方法methods: {clickTest: function(msg) {console.log("test: "+ msg);}},//局部自定义组件components: {//组件名: {配置项}'button-counter':  {//用来传值的自定义属性//注意此处使用驼峰命名法 !!!props:['titleDesc'],//模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素template: '<button @click="doClick">{{titleDesc}}：局部组件，计数:{{count}}</button>',//注意：在自定义的组件中需要使用函数来定义datadata: function() {return {count: 0}},//定义响应事件函数methods: {doClick: function() {//注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.//注意事件名使用短横线命名方式this.count ++;console.log(this.titleDesc);}}}}
});