版权声明:本文为博主原创文章,未经博主允许不得转载 https://blog.csdn.net/g_optimistic/article/details/89102699
目录
事先写好视图文件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 %}
启动服务器