Vue使用步骤

本是古典何须时尚 2022-02-22 05:23 285阅读 0赞

首先写好视图文件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.确定绑定数据的范围 #

注意要声明使用自定义变量的规则：

\{% verbatim myblock %\}

\{% endverbatim myblock %\}

{%  verbatim myblock %} 
        <div id="bindData">
        {
       { message }}
        </div>
    
    {% endverbatim myblock %}

# 2.定义数据 #

# 3.调用定义好的数据 #

![2019040819505498.png][]

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

v-bind:变量名=" "

v-on:clock=" "

v-if=" "

v-for=" p in project "

定义数据：

绑定数据：

{% 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 %}

启动服务器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70][]

[2019040819505498.png]: /images/20220222/05df999e51944761869e85b24acfac0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dfb3B0aW1pc3RpYw_size_16_color_FFFFFF_t_70]: /images/20220222/9509b8d459e64639bebd8215035d4d55.png