Vue的字符串模板

这两天看Vue的时候，里面提到字符串模板和非字符串模板，搞的有点儿懵圈，特地查了下，也记录下，免得后面再发生这样的事儿（记性不太好，硬伤呀。。。）以下是教程里的原文：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：Vue.compon

何必诗债换酒钱

13759人浏览 · 2017-12-05 10:38:40

何必诗债换酒钱 · 2017-12-05 10:38:40 发布

这两天看Vue的时候，里面提到字符串模板和非字符串模板，搞的有点儿懵圈，特地查了下，也记录下，免得后面再发生这样的事儿（记性不太好，硬伤呀。。。）

以下是教程里的原文：

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

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

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

如果你使用字符串模板，则没有这些限制。

嗯，还是上面说过的，看到这里，不知道字符串模板是啥，非字符串模板是啥.....下面就来说道说道！

字符串模板：指的是在组件选项里用 template:"" 指定的模板，换句话说，写在 js 中的 template:"" 中的就是字符串模板。比如下面这个：

var tmp = new Vue({
    template:"<myComponent></myComponent>"
});

非字符串模板：在单文件里用 <template></template> 指定的模板，换句话说，写在 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}$/, //不连续的两位字母// /^