在Django的默认提供的模板中是使用{{}}来渲染变量的，而vue正好也是使用{{}}来渲染变量，想在Django的模板中使用vue最简单的方法就是禁止Django的{{}}渲染只需把整个html文件使用下面的模板包起来就可以。
{% verbatim %}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>分析SaaS</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="home">
<div style="width:100px; height: 100px;">{{message}}</div>
<el-button @click='fn'>默认按钮</el-button>
</div>
<script>
new Vue({
el:'#home',
data() {
return {
message:'hello vue2'
}
},
mounted() {
setTimeout(() => {
this.message = '333333333333333333'
console.log(this.message)
}, 2000)
},
methods: {
fn() {
this.message = '2222'
}
}
});
</script>
</body>
</html>
{% endverbatim %}
网友评论