草庐IT

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

Cherry丶小丸子 2023-09-30 原文
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 是有效的

强烈推荐遵循 W3C 中的自定义组件名 (字母全小写且必须包含一个连字符)，这会帮助你避免和当前以及未来的 HTML 元素相冲突

Vuedomcomponentltgt

有关Vue 中涉及的 字符串模板 与 dom 模板的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. Ruby 解析字符串 - 2

    我有一个字符串input="maybe(thisis|thatwas)some((nice|ugly)(day|night)|(strange(weather|time)))"Ruby中解析该字符串的最佳方法是什么？我的意思是脚本应该能够像这样构建句子:maybethisissomeuglynightmaybethatwassomenicenightmaybethiswassomestrangetime等等，你明白了......我应该一个字符一个字符地读取字符串并构建一个带有堆栈的状态机来存储括号值以供以后计算，还是有更好的方法？也许为此目的准备了一个开箱即用的库？

  3. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  4. ruby-on-rails - unicode 字符串的长度 - 2

    在我的Rails(2.3，Ruby1.8.7)应用程序中，我需要将字符串截断到一定长度。该字符串是unicode，在控制台中运行测试时，例如'א'.length，我意识到返回了双倍长度。我想要一个与编码无关的长度，以便对unicode字符串或latin1编码字符串进行相同的截断。我已经了解了Ruby的大部分unicode资料，但仍然有些一头雾水。应该如何解决这个问题？ 最佳答案 Rails有一个返回多字节字符的mb_chars方法。试试unicode_string.mb_chars.slice(0,50)

  5. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  6. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  7. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  8. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  9. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  10. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

随机推荐