Vue 中涉及的字符串模板与 dom 模板

最新推荐文章于 2024-04-28 11:51:43 发布

leaving0425

最新推荐文章于 2024-04-28 11:51:43 发布

阅读量1k

点赞数 2

文章标签： vue.js

Dom模板(或者称为Html模板)(非字符串的模板)

Dom 模板就是写在 html 文件中，一打开就会被浏览器进行解析渲染的，所以要遵循 html 结构和标签的命名，否则浏览器不解析也就不能获取内容了

HTML 中的 标签（比如 DIV）名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，
下面的例子不会被正确渲染, 一打开会被浏览器解析成 mycomponent，但是注册的 vue 的组件是 MyComponent，因此无法渲染

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 PascalCase (首字母大写命名) 的不会被渲染 -->
            <MyComponent></MyComponent>
            <!-- 在 HTML 中是 camelCase (驼峰命名) 的不会被渲染 -->
            <myComponent></myComponent>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
        Vue.component('MyComponent', {
            template: '<div>Hello Vue</div>'
        });
        new Vue ({
            el: '#app'
        });
    </script>
</html>


下面的例子就可以正常渲染了，这意味着当你使用 DOM 中的模板时，标签名需要使用其等价的 kebab-case (短横线分隔命名) 的方式书写

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 kebab-case (短横线命名) 的会被渲染 -->
            <my-component></my-component>
            <my-Component></my-Component>
            <My-component></My-component>
            <My-Component></My-Component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
        Vue.component('MyComponent', {
            template: '<div>Hello Vue</div>'
        });
        new Vue ({
            el: '#app'
        });
    </script>
</html>

同样，组件 props 属性也是如此
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，
下面的例子不会被正确渲染, 一打开会被浏览器解析成 posttitle，但是注册的 vue 的组件是 postTitle，因此也无法渲染

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 PascalCase (首字母大写命名) 的不会被渲染 -->
            <my-component PostTitle="Hello Vue"></my-component>
            <!-- 在 HTML 中是 camelCase (驼峰命名) 的不会被渲染 -->
            <my-component postTitle="Hello Vue"></my-component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component('MyComponent', {
            // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
            props: ['postTitle'],
            template: '<h3>{{ postTitle }}</h3>'
        })
        new Vue ({
            el: '#app'
        });
    </script>
</html>

下面的例子就可以正常渲染了，这意味着当你使用 DOM 中的模板时，prop 名需要使用其等价的 kebab-case (短横线分隔命名) 的方式书写

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中是 kebab-case (短横线命名) 的会被渲染 -->
            <my-component post-title="Hello Vue"></my-component>
            <my-component Post-title="Hello Vue"></my-component>
            <my-component post-Title="Hello Vue"></my-component>
            <my-component Post-Title="Hello Vue"></my-component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component('MyComponent', {
            // 注册时：PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以
            props: ['postTitle'],
            template: '<h3>{{ postTitle }}</h3>'
        })
        new Vue ({
            el: '#app'
        });
    </script>
</html>

$emit 方法

<!DOCTYPE <html>
    <head>
        <meta charset="utf-8">
        <title>Vue Component</title>
    </head>
    <body>
        <div id="app">
            <!-- 在 HTML 中只能是 kebab-case (短横线命名) 的会被渲染 -->
            <my-component @component-click="myClick"></my-component>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component('MyComponent', {
            template: '<h3 @click="titleClick">Hello Vue</h3>',
            methods: {
                titleClick(){
                    // 当使用 $emit 时，命名规则只能使用 kebab-case (短横线命名)
                    this.$emit("component-click", 123)
                }
            }
        })
        new Vue ({
            el: '#app',
            methods: {
                myClick(val){
                    console.log(val)
                }
            }
        });
    </script>
</html>

PS：组件注册名、props 接收名、$emit名，还可以使用全小写字母命名(没有任何大写字母或者短横线)，例如：mycomponent、posttitle、componentclick，如果这样，使用时也必须按照全小写的方式书写

字符串模板（单文件组件、JSX）

字符串模板就是写在 vue 中的 template 中定义的模板，如 .vue 的单文件组件模板和定义组件时 template 属性值的模板。字符串模板不会在页面初始化时参与页面的渲染，而是会被 vue 进行解析编译之后再被浏览器渲染，所以不受限于 html 结构和标签的命名

<div id="app">
    <!-- 以下方式都可以 -->
    <MyComponent></MyComponent>
    <my-component></my-component>
</div>

Vue.component('MyComponent', {
    template: '<div>Hello Vue</div>'
})

new Vue ({
    el: '#app'
});

<div id="app">
    <!-- 以下方式都可以 -->
    <MyComponent postTitle="Hello Vue"></MyComponent>
    <MyComponent post-title="Hello Vue"></MyComponent>

    <my-component postTitle="Hello Vue"></my-component>
    <my-component post-title="Hello Vue"></my-component>
</div>

Vue.component('MyComponent', {
    props: ['postTitle']
    template: '<div>{{ postTitle }}</div>'
})

new Vue ({
    el: '#app'
});

<div id="app">
    <!-- 以下方式都可以 -->
    <my-component @componentClick="myClick"></my-component>
    <my-component @component-click="myClick"></my-component>
</div>

Vue.component('MyComponent', {
    template: '<div @click="titleClick">Hello Vue</div>',
    methods: {
        titleClick(){
            this.$emit("componentClick", 123)
        }
    }
})

new Vue ({
    el: '#app',
    methods: {
        myClick(val){
            console.log(val)
        }
    }
});

总结

定义组件名的方式有三种：

1、使用 kebab-case
Vue.component('my-component', { /* ... */ });
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component>


2、使用 PascalCase
Vue.component('MyComponent', { /* ... */ });
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component> 和 <MyComponent> 都是可接受的。


3、使用 camelCase
Vue.component('myComponent', { /* ... */ });
当使用 camelCase (驼峰命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component> 和 <myComponent> 都是可接受的。

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的

定义 prop 名的方式有三种：

1、使用 kebab-case
Vue.component('my-component', {
    props: ['post-title']
});
当使用 kebab-case (短横线分隔命名) 定义一个 prop 时，你也必须在引用这个自定义 prop 时使用 kebab-case，
例如 <my-component post-title="Hello Vue"></my-component>


2、使用 PascalCase
Vue.component('my-component', {
    props: ['PostTitle']
});
当使用 PascalCase (首字母大写命名) 定义一个 prop 时，你在引用这个自定义 prop 时两种命名法都可以使用。
也就是说 <my-component PostTitle="Hello Vue"></my-component> 和
<my-component post-title="Hello Vue"></my-component> 都是可接受的


3、使用 camelCase
Vue.component('my-component', {
    props: ['postTitle']
});
当使用 camelCase (驼峰命名) 定义一个 prop 时，你在引用这个自定义 prop 时两种命名法都可以使用。
也就是说 <my-component postTitle="Hello Vue"></my-component> 和
<my-component post-title="Hello Vue"></my-component> 都是可接受的

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的

$emit 使用方法和 prop 使用方法一样

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的

作者：Cherry丶小丸子
链接：https://www.jianshu.com/p/72196ddceb04
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

leaving0425

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue 中涉及的字符串模板与 dom 模板

定义组件名的方式有三种：1、使用 kebab-case当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component>2、使用 PascalCase当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component> 和 <MyComponent> 都是可接受的。3、使用 camelCase。
复制链接

扫一扫