Vue中的字符串模板的使用

1、HTML模板和字符串模板

HTML模板：直接在HTML页面挂载的模板。（即非字符串模板）

非字符串模板：在单文件里用 <template></template> 指定的模板，换句话说，写在 html 中的就是非字符串模板。

字符串模板：在js字符串中定义的模板。

2、Props属性：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名)：

（1）、HTML模板：

Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

（2）、字符串模板：

<!-- 在 HTML 中使用kebab-case -->
<child my-message="hello!"></child>

3、组件名大小写：

注意：当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

(1)、使用 kebab-case:

Vue.component('my-component-name', { /* ... */ });

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

(2)、使用 PascalCase:

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板，如：在单个组件的<template></template>中 或者 index.html中直接CDN引入vue.js的<div id="app"></div>中) 使用时只有 kebab-case 是有效的，使用驼峰式，是不会渲染的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中将html字符串转换成html后遇到的问题小结

    今天整理之前做vue项目时遇到的一些问题,发现了当时遇到的一个很小但是又会引出很多问题的一个问题(总之就是很有意思,听我慢慢给你到来),这个问题就是当时处理后端数据时,如何将后端返回来的字符串转换成html标签,其实根据vue官网的一个v-html方法是不是觉得很简单,当时我也是这样想的,可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了,在这里我只是用它来渲染数据): 第一,当我用v-html将后端字符串转换成了html标签后,发现我在那个字符串中解

  • vue项目base64字符串转图片的实现代码

    <img :onerror="errpic" class="customerHead" :src="param.customerHead" alt=""> data() { return { param:{ id:"", customerHead: "", } } } let _this = this let files = e.target.files[0] if (fil

  • vue语法之拼接字符串的示例代码

    vue语法之拼接字符串的示例代码

    本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

  • vue如何截取字符串

    在后端有许多的封装方法来截取字符串或者对字符串的操作,同样前端也有相应的方法. 有一个data数据为ipaddr data() { return { ipaddr: "192.168.100.110", }; }, 1.现在需要切割成一个数组,得到四个ip值,只需要通过计算属性就可以实现 computed:{ ipaddrArray:function(){ return this.ipaddr.split('.') } } 最终通过ul可以展现切割的字符串 <template&g

  • Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法

    今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去官网上查了下资料,发现在vue2.0版本中,{{{}}}转换HTML的方式已经被废除,该版本中必须使用v-html标签进行转换,下面是具体的使用方法: <span v-html="htmlData"> {{htmlData}} </span> 总结 以上所述是小编给

  • vue中如何实现变量和字符串拼接

    vue中如何实现变量和字符串拼接

    整理文档,搜刮出一个vue中如何实现变量和字符串拼接的代码,稍微整理精简一下做下分享. 在data中定义变量: data() { return { a: 'A' } } 如何通过按钮点击实现字符串和变量a的拼接呢? <button @click='showMsg'></button> //vue methods: { showMsg() { alert(`获取了${a}`); } } 注意alert()里不是单引号,而是两个 ` 号(esc下面的按键). 点击按钮出现 以上就是本文

  • Vue.js 时间转换代码及时间戳转时间字符串

    Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds()

  • Vue 将后台传过来的带html字段的字符串转换为 HTML

    Vue 将后台传过来的带html字段的字符串转换为 HTML

    后台传过来 一个带标签的字符串  前端可以直接转换成html格式的,可是在vue中怎么办呢 在这个DEMO中,item.content所带的字符串将被转换为HTML代码. 注意:使用了v-html的标签中的内容将被item.content替代: <div class="item" v-for="item in socialArray"> <dl v-html="item.content"> {{item.content}}

  • Vue中的字符串模板的使用

    1.HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板.(即非字符串模板) 非字符串模板:在单文件里用 <template></template> 指定的模板,换句话说,写在 html 中的就是非字符串模板. 字符串模板:在js字符串中定义的模板. 2.Props属性:HTML 特性是不区分大小写的.所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名): (1).HTM

  • 在 Vue 中使用 JSX 及使用它的原因浅析

    本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. Vue.js 具有简单的 API 和几个选项,可用于在我们的组件中定义HTML模板. 我们可以使用 <template> 标签选项,在根组件实例上定义 template 属性,或者使用单文件组件. 上面的选项很棒并且可以完美地工作,但是,在您的应用程序的生命周期中,有时会

  • 浅析Vue 中的 render 函数

    render函数是什么 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h, vm中有一个方法_c,也是这个函数的别名 先看官网对

  • Vue中watch、computed、updated三者的区别及用法

    1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性,第一个值是变化后最新的值,第二个是变化前 num1(after,before){ this.num2 = after +1 } immediat

  • Python基础之文本常量与字符串模板

    Python基础之文本常量与字符串模板

    一.前言 在程序中,有很多高效率的字符串处理方式,如果开发者能够完全掌握这些高效的字符串处理,往往在开发者也能事半功倍.比如针对于字符串的处理,也是自然语言处理的基础知识. 而python3中,处理字符串的库为:string.本篇将详细介绍各种字符串的高效处理方式. 二.首字母大写 对于英文单词组成的字符串来说,很多时候,我们需要对英文的首字母进行大写的变更.如果没有了解其高效率的函数,一般我们都通过循环,判断空格,取空格后一位的字母,判断其在ASCII中的编码后,取其大写替换掉该位置的字符串.

  • Python的文本常量与字符串模板string库

    Python的文本常量与字符串模板string库

    一.前言 在程序中,有很多高效率的字符串处理方式,如果开发者能够完全掌握这些高效的字符串处理,往往在开发者也能事半功倍.比如针对于字符串的处理,也是自然语言处理的基础知识. 而python3中,处理字符串的库为:string.本篇将详细介绍各种字符串的高效处理方式. 二.首字母大写 对于英文单词组成的字符串来说,很多时候,我们需要对英文的首字母进行大写的变更.如果没有了解其高效率的函数,一般我们都通过循环,判断空格,取空格后一位的字母,判断其在ASCII中的编码后,取其大写替换掉该位置的字符串.

  • Python的文本常量与字符串模板之string库

    Python的文本常量与字符串模板之string库

    目录 一.前言 二.首字母大写 三.字符串模板 四.高级模板 五.format用法 六.进阶用法 七.高阶用法 一.前言 在程序中,有很多高效率的字符串处理方式,如果开发者能够完全掌握这些高效的字符串处理,往往在开发者也能事半功倍.比如针对于字符串的处理,也是自然语言处理的基础知识. 而python3中,处理字符串的库为:string.本篇将详细介绍各种字符串的高效处理方式. 二.首字母大写 对于英文单词组成的字符串来说,很多时候,我们需要对英文的首字母进行大写的变更.如果没有了解其高效率的函数

  • vue中template模板编译的过程全面剖析

    vue中template模板编译的过程全面剖析

    目录 简述过程 vue的渲染过程 parse parse过程总结 generate生成render函数 简述过程 vue template模板编译的过程经过parse()生成ast(抽象语法树),optimize对静态节点优化,generate()生成render字符串 之后调用new Watcher()函数,用来监听数据的变化,render 函数就是数据监听的回调所调用的,其结果便是重新生成 vnode. 当这个 render 函数字符串在第一次 mount.或者绑定的数据更新的时候,都会被调

  • Thinkphp模板中截取字符串函数简介

    在php中截取字符串的函数有很多,而在thinkphp中也可以直接使用php的函数,本文给大家简单的介绍thinkPHP模板中截取字符串的具体用法,希望能对各位有所帮助. 对于英文字符可使用如下形式: 复制代码 代码如下: {$vo.title|substr=0,5} 如果是中文字符thinkphp提供了msubstr,用法如下: 复制代码 代码如下: function msubstr($str, $start=0, $length, $charset="utf-8″, $suffix=true

随机推荐