Django（九）：Vue动静分离、vue+resource

最新推荐文章于 2022-01-22 17:54:37 发布

重回幼稚园当老大

最新推荐文章于 2022-01-22 17:54:37 发布

阅读量445

点赞数

本文链接：https://blog.csdn.net/Gym987/article/details/102808011

版权

vue

vue是一个框架，MVVM设计模式，主要作用使用来绑定数据

因为django模板将{{}} 认为是django的模板语法

vue基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="/static/js/vue.min.js"></script>
</head>
<body>
{% verbatim %}   <!-- 标志：从这里开始到结束标签内 django模板语法失效 -->
<div id="panel">
    <p>
        内容绑定 {{ name }}
    </p>
    <hr>
    <p v-bind:style="style">
        属性绑定
    </p>
    <hr>
    <p v-if="flag">
        判断绑定
    </p>
    <hr>

    <p v-for="p in lists">
        循环绑定  {{ p }}
    </p>
    <hr>
    <button v-on:click = "click">
        事件绑定
    </button>
    <hr>
</div>
{% endverbatim %}
<script>
    var vue = new Vue(
        {
            el: "#panel",
            data: {
                name: "zhangsan",
                style:"color:red",
                flag:1,
                lists:["python","java","php"],
            },
            methods:{
                "click":function () {
                    alert("hello world")
                }
            }
        }
    )

</script>
</body>
</html>