解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
更新时间：2020年09月11日 13:11:58 作者：以梦为马papapa
这篇文章主要介绍了解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
由于之前练习koa2，直接渲染的jquery写的传统页面。
这次想偷懒，直接script引入vue，发现渲染不出data值。
渲染引擎用得是xtpl, 找了半天没有发现可以修改xtpl渲染分隔符的配置
vue有！
var myVue = new Vue({
el: '#msgBoard',
delimiters:['$$','$$'],
data() {
return {
msg: {
num: 10
}
}
},
mounted() {
console.dir(this)
},
})
补充知识：前端——vue和nunjucks的模板渲染符{{}}冲突解决办法
由于在thinkjs上使用的是nunjucks的渲染技术，在了解到vue的时候发现vue用的也是{{}}进行模板代码识别。
找了一个vue的html代码放到thinkjs上面跑，发现数据无法绑定。然后上网寻得解决办法如下：
修改vue的标识符，前后加{% raw %}、{% endraw %}，如下：
{% raw %}{{result.name}}{% endraw %}
问题解决。
以上这篇解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vue3中响应式解构props的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-11-11
vue打包部署到springboot并通过tomcat运行的操作方法
这篇文章主要介绍了vue打包部署到springboot并通过tomcat运行的操作方法,本文通过实例图文并茂的形式给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
这篇文章主要为大家详细介绍了vue uniapp实现分段器效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue创建项目卡住不动,vue create project卡住不动的解决
这篇文章主要介绍了vue创建项目卡住不动,vue create project卡住不动的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。本文给大家介绍的非常详细，需要的的朋友参考下2017-03-03
这篇文章主要介绍了vue修改数据页面无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue中data数据初始化方法，数据初始化是在组件实例化时发生的，在组件中，可以通过data选项来定义组件的初始数据，需要详细了解可以参考下文2023-05-05
这篇文章主要给大家介绍了关于Vuex中Getter的基本使用教程,getter相当于Vuex中的计算属性 对 state 做处理再返回,本文通过示例代码将Getter介绍的非常详细,需要的朋友可以参考下2021-07-07
Vue3中使用Element-Plus的el-upload组件限制只上传一个文件的功能实现
在 Vue 3 中使用 Element-Plus 的 el-upload 组件进行文件上传时,有时候需要限制只能上传一个文件,本文将介绍如何通过配置 el-upload 组件实现这个功能,让你的文件上传变得更加简洁和易用,需要的朋友可以参考下2023-10-10
本篇文章主要介绍了详解vuex 中的 state 在组件中如何监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论