![](/img/trans.png)
[英]Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader
[英]Vue.js component specific delimiters with Django and Vue-loader
我正在创建一个 Django + Vue.js v3 应用程序,发现使用vue3-sfc-loader非常有用,因为我可以使用 Django 轻松渲染和渲染 world.vue 文件的最佳状态。 此设置有效,Django 成功呈现 .vue 文件,然后由 vue3-sfc-loader 拾取,但问题是我无法更改 Vue 分隔符,无论是在组件级别还是在全局级别。
一种可行但非常不方便的解决方案是使用 Django {% verbatim %}。
我还尝试使用 Vue 全局 mixins 来设置分隔符,但没有成功,尽管我不确定我是否在我的上下文中正确使用了 then。
在这种情况下,有什么方法可以全局或在组件级别设置 Vue 分隔符?
索引.html:
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
<script>
const options = {
moduleCache: {
vue: Vue,
},
getFile(url) {
return fetch(url).then(response => {
if (response.ok) {
return response.text()
} else {Promise.reject(response)}
} );
},
addStyle(styleStr) {
const style = document.createElement('style');
style.textContent = styleStr;
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
log(type, ...args) {
console.log(type, ...args);
}
}
const { loadModule, version } = window["vue3-sfc-loader"];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options)),
},
template: `Hello <my-component></my-component>`,
});
app.mixin({ delimiters: ['[[',']]'] }); // this was expected to set the global delimiters
app.mount('#app');
</script>
</body>
</html>
我的组件.vue:
<template>
<span class="example">[[msg]]</span>
</template>
<!-- this works: <span class="example">{% verbatim %}{{ msg }}{% endverbatim %}</span> -->
<script>
export default {
data () {
return {
msg: 'test!', // I can inject a value from django backend here with '{{ msg }}'
color: 'blue', // I can inject a value from django backend here with '{{ color }}'
}
}
}
</script>
<style scoped>
.example {
color: v-bind('color');
}
{% include "morestyle.css" %}
</style>
网址.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.base_component),
path('myComponent.vue', views.specific_component),
]
视图.py:
from django.shortcuts import render
def base_component(request):
return render(request, 'vuetest/index.html')
def specific_component(request):
color = 'blue'
msg = 'mesage fom backend'
return render(request,
'vuetest/components/myComponent.vue',
context={'color': color,
'msg': msg})
您可以在 vue3 中全局更改分隔符,如下所示
Vue.createApp({
// Delimiters changed to ES6 template string style
delimiters: ['${', '}']
})
这应该可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.