事件处理
事件修饰符比较难懂
表单输入绑定
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。
在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。
因此,更推荐像上面这样提供一个值为空的禁用选项。
组件基础
Vue.component("button-counter", {
data: function () {
return {
count: 0
}
},
template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
})
自定义组件内部的 data 必须是普通函数返回的对象,因为每个实例可以维护一份被返回对象的独立的拷贝
创建 VUE 实例或者自定义组件的内部方法,使用普通函数而不要使用箭头函数,function 中的 this 指向 VUE 实例,而箭头函数指向的是 Window(需要自己测试一下)
局部组件
<div id="app">
<child-component></child-component>
</div>
<script>
new Vue({
el: "#app",
components: {
"child-component":{
template: "<h1>我是局部组件</h1>"
}
}
});
</script>
只能在 el 元素内局部使用的组件,参考 Vue组件之全局组件与局部组件