Vue使用步骤

目录

1.确定绑定数据的范围

2.定义数据

3.调用定义好的数据

4.常见的vue绑定调用的方法

---

事先写好视图文件views.py

from django.shortcuts import render
def studentList(request):
    render(request,"student_v1.html",locals())

路由文件 urls.py 

from Student.views import studentList
urlpatterns=[
    path('studentList',studentList),
]

1.确定绑定数据的范围

这种写法不知道是jquery还是vue

<div id="bindData">
    {{ message }}
</div>

所以要自定义一个标签

<% verbatin myblock %>
<% endberbatin myblock %>

vue绑定数据的格式：

2.定义数据

<script>
var app=new Vue({
    el:"#bindData",
    data:{
        message:"hello world~~~",
    }
})
</script>

3.调用定义好的数据

4.常见的vue绑定调用的方法

v-bind:变量名=" "

v-on:clock=" "

v-if=" "

v-for=" p in project "

定义数据：

<script>
      var app=new Vue({
          el:'#bindData',
          data:{
              message:"hello world~~~",
              cr:"red",
              see:true,
              seed:false,
              project:["python","php","linux","java","c"],
          },
          methods:{
              say_hello:function(){
                  alert("hello world!")
              }
          }
      })
</script>

绑定数据：

{% verbatim myblock %}<!--声明使用自定义的变量规则-->
        <div id="bindData">
            <p>+++++++++++++++常规的数据内容绑定++++++++++++++++++++++</p>
            {{ message }}
            <p>++++++++++++++++常规的属性数据绑定+++++++++++++++++++++++++</p>
            <a v-bind:href="cr">{{ message }}</a>
            <p>+++++++++++++++++常规的属性数据判断+++++++++++++++++++++++++</p>
            <a v-if="see">{{ message }}</a>
            <a v-if="seen">{{ message }}</a>
            <p>+++++++++++++++++常规的属性数据循环+++++++++++++++++++++++++</p>
            <ul>
                <li v-for="p in project ">
                    {{ p }}
                </li>
            </ul>
            <p>+++++++++++++++++常规的属性数据方法+++++++++++++++++++++++++</p>
            <a v-on:click="say_hello">{{ message }}</a>
        </div>
        {% endverbatim myblock %}

启动服务器