vue 组件（component、components）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></h

小海豚

4986人浏览 · 2020-10-07 20:58:16

*小海豚* · 2020-10-07 20:58:16 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <button v-on:click="count++">我被点击了{{count}}次</button>

        <!-- 使用全局组件 -->
        <counter></counter>
        <counter></counter>
        <counter></counter>



        <!-- 使用局部组件 -->
        <button-c></button-c>
        <button-c></button-c>
        <button-c></button-c>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 定义全局组件，方便复用,各组件counter会自动隔离，不会共用。
        // 1、组件其实也是一个vue实例，因此它在定义时也会接受：data、methods、生命周期函数等。
        // 2、不同的是组件不会与页面的元素绑定，否则就无法复用了，因此组件没有el属性。
        // 3、但是组件渲染需要html模板，所以增加了template属性，值就是html模板。
        // 4、全局组件定义完毕，任何vue实例可以直接在html中通过组件名称来使用组件了。
        // 5、data必须是一个函数，不再是一个对象。
        Vue.component("counter",{
            template:`<button v-on:click="count++">我被点击了{{count}}次</button>`,
            data() {
                return {
                    count:1
                }
            }
        });

        // 局部组件 :需要在vue实例中声明components属性。局部组件名称可以自定义
        const buttonCounter = {
            template:`<button v-on:click="count++">我被点击了{{count}}次~~</button>`,
            data() {
                return {
                    count:1
                }
            },
        };

        new Vue({
            el:"#app",
            data:{
                count:1
            },
            components: {
                'button-c':buttonCounter
            }
        })
    </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^