1.Vue.js 事件处理器
可使用事件监控 v-on 指令：
<div id="app"> <button v-on:click="counter = 1">增加 1</button> <p>点击此按钮 {
{ counter }} 次。</p> </div> <script> new Vue({
el: '#app', data: {
counter: 0 } }) </script> 2.Vue.js 表单
<div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{
{ checked }}</label> <p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {
{ checkedNames }}</span>
</div>
<script> new Vue({
el: '#app', data: {
checked : false, checkedNames: [] } }) </script>
- .lazy
<input v-model.lazy="msg" > - .number
<input v-model.number="age" type="number"> - .trim
<input v-model.trim="msg">
3.Vue.js 组件
注册一个全局组件语法格式如下：Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。
组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
4.自定义事件
组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
data 必须是一个函数：
data: function () {
return {
count: 0
}
}
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。<input v-model="parentData">
5.自定义指令
指令定义函数提供了几个钩子函数（可选）：
- 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
- 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
- **update:**被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
- 被绑定元素所在模板完成一次更新周期时调用。
- 只调用一次， 指令与元素解绑时调用。
钩子函数的参数有：
- 指令所绑定的元素，可以用来直接操作 DOM 。
- 一个对象，包含以下属性： – 指令名，不包括 v- 前缀。 – 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。 – 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 – 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是"1 + 1"。 – 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。 – 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers的值是 { foo: true, bar: true }。
- Vue 编译生成的虚拟节点。
- 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。