egg的controller在渲染到页面上的时候是使用{{}}来渲染的,但是在使用vue的时候,data里的数据在页面上也是使用的{{}},这时页面上的vue渲染不出来 这时候vue失效,不渲染也不报错 这个是在controller里的pt在页面时可以渲染的
求大神解答,我怎么弄
这是语法冲突了吧
@fruit-memory 是啊,可是我还是需要用vue的,怎么办呢,网上也有人用vue和egg,但是好像没有出现这个问题
你用的是什么模板引擎
egg的controller在渲染到页面上的时候是使用{{}}来渲染的
egg 渲染页面依赖的是模板引擎的渲染能力,其中默认是 nunjucks,参考:https://eggjs.org/zh-cn/core/view.html。
文中提及的问题重点在于后端(egg)和前端(vue)进行模块渲染时,占位符({{}})冲突。那么解决该问题的话:
1、可以从前(mustache)后端(nunjucks)分别对占位符进行配置,其中相关参数自行学习一下; 2、(显然方案 1 并不是最佳实践)我们尽量保持代码的规范和统一,占位符修改后整体编码风格会受到影响,因此还是建议适当的分离前后端的模板;(es5 下使用 vue 依然可以使用组件化的方式,因此在 html 中没有必要直接出现 vue 组件的视图模板)
@nanzm 就是egg推荐的那个egg-view-nunjucks
这个简单 网上很多有解决方案 试试这个 {% raw %}{{这里写变量}}{% endraw %}
{% raw %}{{这里写变量}}{% endraw %}
@x-cold 号,了解了
@nanzm 这这这,你这种的方法怎么查,是占位符?
google 啊 老铁
之前碰到过
@nanzm 老铁就算是查我也得知道方向吧
要什么方向 不就是模板语法冲突吗 ( vue nunjucks 冲突)关键词搜呗
@nanzm 老铁,你既然碰到过快教教我吧,哭晕在厕所
v-text 试过了吗
@nanzm 试过了,没有用,页面中间没内容,也不报错,然后用Vue.config.delimiters改vue的定界符还报错
@nanzm 老铁老铁,我解决啦,啊哈哈哈哈哈哈
@jiayin3204 delimiters是在实例化声明的。
new Vue({ delimiters: [’${’, ‘}’] })
明明可以好吗 我都亲手试了一下
@jiayin3204 坑 差点怀疑自己 亲手试了一下
@nanzm 你看你,还说我坑,我是一只小白而已,请怀着一颗慈悲的心对待我们
为什么会冲突呢? 两者有交集的地方只有 index.html 吧,vue 的 template 又不会有 nunjucks 的东西
@atian25 只是在写的时候 有冲突 {{ }} 不想让 nunjucks 解析的话 要这个 {% raw %}{{这里写变量}}{% endraw %}
@nanzm 不过你说的这种方法我这还真不行,我是改变了vue的渲染方式才解决的
@jiayin3204 那也可以 更干脆
@nanzm 我不明白为啥会冲突,给个最小可复现代码?
@atian25 因为默认的vue在HTML中的语法的{{}},而nunjucks的语法也是双括号,页面优先选择了服务端的渲染机制,所以vue失效,所以才会出现冲突
@atian25 或许他是多页用vue!!!并不是SPA
建议你把需要Vue解析的代码写在单个Vue文件里面,不要写在首页,否则的话,模板会帮你全解析完
@jiayin3204 我的问题就是,为什么它们会在同一个页面啊。。。 vue 的不是都写到组件的 template 里面,然后在编译期就已经 inline 为字符串了么。
难道你的都是写在首页 index.html 里面的 <template> </template> ?? 这样肯定不好啦。
<template> </template>
匿了。。。 没代码空谈没意思,费劲。
@atian25 对,我没有使用组件,只是单纯的使用vue做了多页的应用,因为项目比较小
@jiayin3204 那也没必要都塞到一个 index.html 里面吧。 那你就放到 {%raw%} 里面就好了
{%raw%}
@atian25 就一个移动端的页面,没有必要太麻烦吧,使用vue也是因为有表单提交,用vue方便一点,还有你说的这个 {%raw%} 是什么鬼
https://cn.vuejs.org/v2/api/#delimiters
自己看吧 把vue的 {{}} 改为 [[]]
我是不建议修改 vue 的 delimiters,在他这个项目中,vue 才是主要逻辑。
raw 上面别人不是教你了么,nunjucks 的 http://mozilla.github.io/nunjucks/templating.html#raw 自己看呗
raw
模板引擎的界定符,自己搜一下
修改下 模版引擎的界定符
@nanzm 已经说了解决方案,居然还能讨论这么多
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究。
这是语法冲突了吧
@fruit-memory 是啊,可是我还是需要用vue的,怎么办呢,网上也有人用vue和egg,但是好像没有出现这个问题
你用的是什么模板引擎
egg 渲染页面依赖的是模板引擎的渲染能力,其中默认是 nunjucks,参考:https://eggjs.org/zh-cn/core/view.html。
文中提及的问题重点在于后端(egg)和前端(vue)进行模块渲染时,占位符({{}})冲突。那么解决该问题的话:
1、可以从前(mustache)后端(nunjucks)分别对占位符进行配置,其中相关参数自行学习一下; 2、(显然方案 1 并不是最佳实践)我们尽量保持代码的规范和统一,占位符修改后整体编码风格会受到影响,因此还是建议适当的分离前后端的模板;(es5 下使用 vue 依然可以使用组件化的方式,因此在 html 中没有必要直接出现 vue 组件的视图模板)
@nanzm 就是egg推荐的那个egg-view-nunjucks
这个简单 网上很多有解决方案 试试这个
{% raw %}{{这里写变量}}{% endraw %}@x-cold 号,了解了
@nanzm 这这这,你这种的方法怎么查,是占位符?
google 啊 老铁
之前碰到过
@nanzm 老铁就算是查我也得知道方向吧
要什么方向 不就是模板语法冲突吗 ( vue nunjucks 冲突)关键词搜呗
@nanzm 老铁,你既然碰到过快教教我吧,哭晕在厕所
v-text 试过了吗
@nanzm 试过了,没有用,页面中间没内容,也不报错,然后用Vue.config.delimiters改vue的定界符还报错
@nanzm 老铁老铁,我解决啦,啊哈哈哈哈哈哈
@jiayin3204 delimiters是在实例化声明的。
new Vue({ delimiters: [’${’, ‘}’] })
明明可以好吗 我都亲手试了一下
@jiayin3204 坑 差点怀疑自己 亲手试了一下
@nanzm 你看你,还说我坑,我是一只小白而已,请怀着一颗慈悲的心对待我们
为什么会冲突呢? 两者有交集的地方只有 index.html 吧,vue 的 template 又不会有 nunjucks 的东西
@atian25 只是在写的时候 有冲突 {{ }} 不想让 nunjucks 解析的话 要这个
{% raw %}{{这里写变量}}{% endraw %}@nanzm 不过你说的这种方法我这还真不行,我是改变了vue的渲染方式才解决的
@jiayin3204 那也可以 更干脆
@nanzm 我不明白为啥会冲突,给个最小可复现代码?
@atian25 因为默认的vue在HTML中的语法的{{}},而nunjucks的语法也是双括号,页面优先选择了服务端的渲染机制,所以vue失效,所以才会出现冲突
@atian25 或许他是多页用vue!!!并不是SPA
建议你把需要Vue解析的代码写在单个Vue文件里面,不要写在首页,否则的话,模板会帮你全解析完
@jiayin3204 我的问题就是,为什么它们会在同一个页面啊。。。 vue 的不是都写到组件的 template 里面,然后在编译期就已经 inline 为字符串了么。
难道你的都是写在首页 index.html 里面的
<template> </template>?? 这样肯定不好啦。匿了。。。 没代码空谈没意思,费劲。
@atian25 对,我没有使用组件,只是单纯的使用vue做了多页的应用,因为项目比较小
@jiayin3204 那也没必要都塞到一个 index.html 里面吧。 那你就放到
{%raw%}里面就好了@atian25 就一个移动端的页面,没有必要太麻烦吧,使用vue也是因为有表单提交,用vue方便一点,还有你说的这个
{%raw%}是什么鬼https://cn.vuejs.org/v2/api/#delimiters
自己看吧 把vue的 {{}} 改为 [[]]
我是不建议修改 vue 的 delimiters,在他这个项目中,vue 才是主要逻辑。
raw上面别人不是教你了么,nunjucks 的 http://mozilla.github.io/nunjucks/templating.html#raw 自己看呗模板引擎的界定符,自己搜一下
修改下 模版引擎的界定符
@nanzm 已经说了解决方案,居然还能讨论这么多