vue.js与后台模板引擎“双花括号”冲突时的解决办法
后台渲染模板如swig,也使用“{{ }}“作为渲染,与前端vue的产生冲突,此时只要在新建Vue对象时,添加delimiters: ['${', '}'],就搞定了,代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Blog Template for Bootstrap</title> </head> <body> <div id="app">
555
${message }
</div> <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <script src="/public/js/vue.js"></script> <script>
//Vue.config.delimiters = ['${', '}$'];
var app= new Vue({
delimiters: ['${', '}'],
el:'#app',
data:{
regDom: 1
,loginDom: 0
,message: 'Hello Vue!' }
});
</script>
</body> </html>
官方参考地址:http://vuejs.org/api/#delimiters
vue.js与后台模板引擎“双花括号”冲突时的解决办法的更多相关文章
- 后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...
- Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
- ORA-00907: 缺失右括号,原因及解决办法整理
ORA-00907: 缺失右括号,原因及解决办法整理 1 union all中order by 导致缺失右括号 在有union all的子查询中使用了order by,会导致缺失右括号的错误,事实上在 ...
- 当Vue可视化工具创建不了项目时的解决办法!
当Vue可视化工具创建不了项目时的解决办法! 当你尝试用可视化工具创建一个Vue的项目的时候,报错, 出现什么indexOf什么什么的错误! 我的解决办法是把可视化工具删除掉,重新下载! 如果你是 n ...
- 说说如何用js实现一个模板引擎
本文同步更新在: https://github.com/whxaxes/blog/issues/4 ,在 github 看文章显示效果会更好一些. 前言 不知不觉就很长时间没造过什么轮子了,以前一直想 ...
- Vue.js系列之三模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎?
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- Vue.js连接后台数据jsp页面  ̄▽ ̄
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- Parallel file system processing
A treewalk for splitting a file directory is disclosed for parallel execution of work items over a f ...
- 详解第一个CUDA程序kernel.cu
CUDA是一个基于NVIDIA GPU的并行计算平台和编程模型,通过调用CUDA提供的API,可以开发高性能的并行程序.CUDA安装好之后,会自动配置好VS编译环境,按照UCDA模板新建一个工程&qu ...
- AvalonDock的基本用法
原文:AvalonDock的基本用法 AvalonDock是优秀的开源项目,用于创建可停靠式布局,能够在WPF中方便开发出类似VS2010的软件界面.对于复杂的软件系统,大量控件的使用 ...
- 编程军规 —— Java 篇
提高代码的可读性,规避容易出现的错误. 0. 共性 对象或引用的非空性判断: 强制类型转换时: 函数返回时: 函数的输入参数: 任务执行的成功或失败判断: 文件打开:网络连接:数据库连接: 内存申请: ...
- Leetcode 268 Missing Number 位运算
题意:先将0, 1, 2, ..., n放入数组,然后去掉其中一个值,找到那个值. 这题与singe number 是一个类型,变形的地方就是首先需要将0, 1, 2, ..., n再次放入这个数组, ...
- linux的各个子系统
Linux基本的子系统主要有CPU.Memory.IO.Network. 在这些子系统中,它们之间相互之间高度依赖.不论什么一个子系统的高负载都会引起其它子系统出现故障. 比如: 大量的页调入请求对内 ...
- silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发) 本教程基本涵盖了WPF和silverlight中的各种动画.先上张效果图. 声明下,这个做的不是让大家照搬的,只是 ...
- python win32api 使用小技巧
前些日子,由于需要,用python写了个小插件,通过win32api 访问外部程序的窗口 并且做些小操作. 因为原来对win32api 不怎么熟悉 所以只好求救.群里有个QQ:32034767 唐骁勇 ...
- python 教程 第十九章、 图形界面编程
第十九章. 图形界面编程 import Tkinter top = Tkinter.Tk() hello = Tkinter.Label(top, text='Hello World!') hello ...
- WPF图片放大后模糊的解决方法
原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...