解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题


Posted in Javascript onSeptember 11, 2020

由于之前练习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模版引擎的渲染标记{{}}(双花括号)冲突问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
模拟select的代码
Oct 19 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 #Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 #Javascript
vue界面发送表情的实现代码
Sep 11 #Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 #Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 #Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 #Javascript
关于ES6尾调用优化的使用
Sep 11 #Javascript
You might like
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
HTML5 解析规则分析
2009/08/14 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
酒店总经理工作职责
2013/12/13 职场文书
旷课检讨书2000字
2014/01/14 职场文书
公司端午节活动方案
2014/02/04 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2014年材料员工作总结
2014/11/19 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
宣传委员竞选稿
2015/11/19 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫