Vue修改分隔符delimiters

在Vue中我们为什么要使用修改分隔符delimiters呢?

其实在项目中,如果其它的软件有冲突的使用,就有作用了

例如:在python中需要制作web网站,用到了django的模板渲染引擎使用的语法是 {{ }}

或者 jinja2模板引擎 使用的语法也是 {{ }}

此时如果需要集成到一个环境时将不能使用,如果解决呢?

delimiters 

分隔符就能解决这个问题.

delimiters

类型:Array<string>

默认值:["{{", "}}"]

限制:这个选项只在完整构建版本中的浏览器内编译时可用。

详细:

改变纯文本插入分隔符。

示例:

new Vue({
  delimiters: ['[[', ']]']
})

// 分隔符变成了我们自定义的风格了

html部分代码如下:

<form method="post" class="register_form" @submit="on_submit" v-cloak>
    <ul>
        <li>
            <label>用户名:</label>
            <input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
            <span class="error_tip" v-show="error_name">[[ error_name_message ]]</span>
        </li>
    </ul>
</form>

js部分代码如下:

let vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],    // 使用分隔符delimiters修改Vue的语法
    data: {
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',

        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,

        error_name_message: '',
        error_mobile_message: '',
    },
    methods: {
        // 校验用户名
        check_username(){
        },
        // 校验密码
        check_password(){
        },
        // 校验确认密码
        check_password2(){
        },
        // 校验手机号
        check_mobile(){
        },
        // 校验是否勾选协议
        check_allow(){
        },
        // 监听表单提交事件
        on_submit(){
        },
    }
});