解决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 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
老生常谈js中的MVC
Jul 25 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
vue实现路由切换改变title功能
May 28 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 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 登录记住密码实现思路
2013/05/07 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
出纳岗位职责范本
2013/12/01 职场文书
高中的自我鉴定
2013/12/16 职场文书
狮子林导游词
2015/02/03 职场文书
2015年团支部工作总结
2015/04/03 职场文书
小学课改工作总结
2015/08/13 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
Python编写nmap扫描工具
2021/07/21 Python