Vue usage steps

Catalog

1. Determine the bound data range

2. Define data

3. Call the defined data

4. Common methods of vue binding calls

Write the view file views.py in advance

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

Routing file urls.py

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

1. Determine the bound data range

I don't know if it's jquery or vue

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

So customize a label

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

Format of vue binding data:

2. Define data

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

3. Call the defined data

4. Common methods of vue binding calls

v-bind: variable name =

v-on:clock=" "

v-if=" "

v-for=" p in project "

Define data:

<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>

Binding data:

{% verbatim myblock %}<!--Declare using custom variable rules-->
        <div id="bindData">
            <p>+++++++++++++++General data content binding++++++++++++++++++++++</p>
            {{ message }}
            <p>++++++++++++++++General property data binding+++++++++++++++++++++++++</p>
            <a v-bind:href="cr">{{ message }}</a>
            <p>+++++++++++++++++General attribute data judgment+++++++++++++++++++++++++</p>
            <a v-if="see">{{ message }}</a>
            <a v-if="seen">{{ message }}</a>
            <p>+++++++++++++++++General property data loop+++++++++++++++++++++++++</p>
            <ul>
                <li v-for="p in project ">
                    {{ p }}
                </li>
            </ul>
            <p>+++++++++++++++++General attribute data method+++++++++++++++++++++++++</p>
            <a v-on:click="say_hello">{{ message }}</a>
        </div>
        {% endverbatim myblock %}

Start server

Tags: Vue Attribute Django JQuery

Posted on Mon, 02 Dec 2019 04:16:33 -0800 by davieboy