Vue的extends、delimiters选项

extends：允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。delimiters：改变默认的插值符号{{}}。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv

每一天，每一步

456人浏览 · 2021-09-23 16:32:56

每一天，每一步 · 2021-09-23 16:32:56 发布

extends：

允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

delimiters：改变默认的插值符号{{}}。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ num }}  ${ num }
    <button @click="add">按钮</button>
  </div>

  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    var bbb = {
      created(){
        console.log("我是被扩展出来的created");
      },
      methods: {
        add:function(){
          console.log('我是被扩展出来的add方法');
        }
      }
    }
    new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        add() {
          console.log('我是原生方法');
          this.num++;
        }
      },
      extends: bbb,
      delimiters: ['${','}']
    })
  </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}$/, //不连续的两位字母// /^