Question

我有一个使用webpack构建的完整vuejs应用程序。我有一个django模板，我在其中安装了vuejs minified js文件。现在，如果我想从django模板到js脚本的某些上下文数据，是否可以发送数据？

的index.html：

{% block content %}
    <div id="app"><div>
    <script src="build.js">`
{% endblock %}

views.py：

def get(request):
    context={"token":"new"}
    return render(request,template, context)

Answer 1

也许是这样的：

views.py

context={"token":"new"}

的index.html

{% block content %}
    <div id="app">
      <div token="{{ token}}"></div>
    <div>
    <script src="build.js">`
{% endblock %}

在vue实例中

beforeMount(){
  this.whatever = document.getElementsByTagName('div')[1].getAttribute('token') || '';
}

Answer 2

以下方法更具声明性，在您的主要Vue组件中使用命名参数。假设您已将上下文变量“令牌”注入到django视图上下文中，则可以在django模板中执行以下操作：

<script>const jscontext={token: '{{ token }}'}</script>
<!--Could just have easily been simple variable.  An object with
 multiple properties could be used for a more comprehensive context-->
 <div id="app"></div>
 {% render_bundle 'app' %}

在App.vue中，您将添加代码以接受称为令牌的属性：

<script>
    export default {
        name: "app",
        props: {
            token: {
                type: String,
                required: true
            }
        }
    }
</script>

然后在main.js（或创建Vue组件的任何示例中，可能在您的示例中为build.js）中，您将使用在较早的模板脚本中创建的jscontext对象中的token属性调用该组件

new Vue({
  router,
  render: h => h(App, {props: {token:jscontext.token}})
}).$mount('#app')

令牌现在将通过其属性提供给App.vue使用，因此可以使用{{token}}进行渲染，也可以使用this.token在代码中进行访问，等等。根据之前的注释，令牌将在来源。

Answer 3

让我们假设您在Django模板中有var1，需要将其传递给vuejs var。 js文件已加载到模板的末尾，因此我们无法在html中设置vuejs var。

在html头中：

<script type="text/javascript">
        var1="{{var1}}"; {# double quotes are important#}
</script>

在js文件中：

var app = new Vue({
  el: '#app',
  data: {
    var1=''
  },
  methods:{

  },
  mounted:function(){
    this.var1=var1;  // var1 was created in html head tag
  },

  delimiters: ["[[","]]"],
});

我们可以将数据从django模板发送到vuejs吗？

3 个答案: