小白学习 Vue 5.事件处理与组件注册

121 阅读1分钟

事件处理

事件修饰符比较难懂

表单输入绑定

<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组件之全局组件与局部组件