• 05 vue项目01-组件关系、bootstrap


    1、django后端项目

    1、项目预期

    配置前端静态资源

              

     页面展示

     2、django项目代码

    主url

    from django.contrib import admin
    from django.urls import path,include
    from app01 import urls
    
    urlpatterns = [
        path('admin/', admin.site.urls),
    
        # url分发
        path('api/v1/', include('app01.urls'), name="app01"),
    
    ]
    View Code

    url

    from django.urls import path,include
    
    from .views import CommentViewSet
    
    urlpatterns = [
        # url分发
        path('comments/',CommentViewSet.as_view()),
    
    ]

    view

    from rest_framework.views import APIView
    from rest_framework.response import Response
    
    data = [
            {"markdown": "##vue初认识", "title": "day1 vue学习", "content": "vue初认识"},
            {"markdown": "#vue全家桶", "title": "day2 vue进阶", "content": "vue全家桶"},
            ]
    
    
    class CommentViewSet(APIView):
        """笔记"""
        def get(self,request):
    
            return Response(data)
    
        def post(self,request):
            print(request.data)
            data.append(request.data)
            print(data)
            return Response(data)

    settings

    runserver django项目

     2、vue项目生成

    vue全家桶

    vue+vue-route+vuex

    1、webpack模板

    vue init webpack  # 初始化
    npm run dev    # 启动

     生态系统

    2、目录结构分析

    (1)webpack生成这些

    (2)App.vue 显示

    router-view怎么理解?

    (3)HelloWorld 组件

    3、项目实现01

    1、组件关系

    2、Vmain、Vnote

     1、Vmain.vue

    <template>
        <div class="main">
            主页
        </div>
    
    </template>
    
    <script>
    export default {
        name:"Vmain",
        data(){
            return{}
        }
    }
    </script>
    
    <style scoped>
    
    </style>

    Vnote.vue

    <template>
        <div class="note">
            笔记
        </div>
    
    </template>
    
    <script>
    export default {
        name:"Vnote",
        data(){
            return{}
        }
    }
    </script>
    
    <style scoped>
    
    </style>
    View Code

    2、router路由绑定子组件

     3、App.vue显示

    3、如何使用bootstrap?

    1、导入bootstrap

    (1)npm下载

     

    (2)导入

    // 1.0 导入bootstrap
    import "bootstrap/dist/css/bootstrap.min.css"

     

    (3)引入成功

      

    4、Vheader:使用bootstrap

    1、创建Vheader

    <template>
    
    
    
    </template>
    
    <script>
    export default {
        name:"VHeader",
        data(){
            return{}
        }
    }
    </script>
    
    <style scoped>
    
    </style>

    2、在Vheader 放入bootstrap代码

    bootstrap官网 https://www.bootcss.com

     

    在Vheader 放入bootstrap代码

     3、App.vue使用Vheadr组件

    效果图

    5、Vheader:路由切换保持状态

    (1)版本1:使用组件

    刷新,无法还原

     (2)版本2:v-for,active显示

    路由切换保持状态

    拿路由的path 遍历url;

    vue-router 官网 https://router.vuejs.org/zh/

    Vheader.vue

    <template>
    
        <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
            </button>
            <a class="navbar-brand" href="#">Brand</a>
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    
            <ul class="nav navbar-nav">
    
                <li v-for='(item,index) in routes' :class="{active:index==currentIndex}" @click='activeHandler(index)'>
                    <router-link :to="item.url">{{ item.title }}</router-link>
                </li>
    
            </ul>
    
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
        </nav>
    
    </template>
    
    <script>
        export default {
            name: "VHeader",
            data() {
                return {
                routes: [
                    { url: "/", title: "我的首页" },
                    { url: "/note", title: "我的笔记" }
                ],
                currentIndex: 0
                };
            },
            methods: {
                activeHandler(index) {
                this.currentIndex = index;
                }
            },
            created(){
                console.log(11111111)
                console.log(this.$route)
    
                // 刷新可以返回到首页
                for(var i=0; i<this.routes.length; i++){
                    if(this.routes[i].url == this.$route.path){
                        this.currentIndex = i;
                        return;
                    }
                }   
            }
            };
    </script>
    
    <style scoped>
    </style>

    4、项目实现02

    1、我的首页:Vmian

     

    <template>
    
        <div class="container">
            <div class="row">
                <div class="col-md-12">
    
                    <!-- bootstrap 带标题的面板 -->
                    <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">我的笔记列表</h3>
                    </div>
                    <div class="panel-body">
                        <ul>
                            <li><a href="#">我的笔记</a></li>
                            <li><a href="#">我的博客</a></li>
                            <li><a href="#">我的公司信息</a></li>
                        </ul>
                    </div>
                    </div>
    
                </div>
    
            </div>
        </div>
    
    
    </template>
    
    <script>
    export default {
        name:"Vmain",
        data(){
            return{}
        }
    }
    </script>
    
    <style scoped>
    
    </style>

    2、我的笔记:Vnote=VnoteShow+Vmark

    1、组件关系

    2、markdwon

    Vmark.vue

    <template>
        <div class='wrap'>
            <div class="mark">
    
                <textarea rows="10" cols="100" class='editor' v-model='markValue'></textarea>
    
                <div class='show' v-html='currentValue'></div>
          
            </div>
        </div>
    </template>
    
    <script>
    import Marked from "marked";  
    export default {
      name: "Vmark",
      data() {
        return {
          markValue: ""
        };
      },
      methods: {},
      computed: {
        currentValue() {
          return Marked(this.markValue);
        }
      }
    };
    </script>
    
    <style>
    
    .mark {
      width: 800px;
      height: 400px;
      margin: 0 auto;
    }
    .editor,.show {
      float: left;
      width: 395px;
      height: 400px;
      border: 1px solid #666;
    }
    </style>

     npm install marked --save

     

    VnoteShow.vue

    <template>
        <div class="note">
            笔记
        </div>
    
    </template>
    
    <script>
    export default {
        name:"Vnote",
        data(){
            return{}
        }
    }
    </script>
    
    <style scoped>
    
    </style>

    Vnote.vue

    <template>
    
        <div class="container">
            <div class="row">
                <div class="col-md-3">
    
                    <div class="panel panel-default">
                        <div class="panel-heading">我的笔记列表</div>
                        <div class="panel-body">
    
                            <!-- 笔记列表 -->
                            <VnoteShow></VnoteShow>
    
                        </div>
                    </div>
    
                </div>
    
                <div class="col-md-9">
                    <div class="panel panel-default">
    
                        <div class="panel-heading">
                            请输入文字标题: <input type="text">
                        </div>
    
                        <div class="panel-body">
    
                            <!-- markdown -->
                            <Vmark></Vmark>
                            
                        </div>
                        
                    </div>
    
                </div>
    
            </div>
        </div>
    
    
    </template>
    
    <script>
    // 1导入
    import Vmark from "./Vmark"
    import VnoteShow from "./VnoteShow"
    
    export default {
        name:"Vnote",
        data(){
            return{}
        },
        components:{
            // 2挂载
            Vmark,
            VnoteShow,
        }
    }
    </script>
    
    <style scoped>
    
    </style>

    3、笔记详情页:VnoteShow=VnoteLIst+VnoteItem

    1、组件关系图

     

    2、三个组件

     VnoteShow.vue

    <template>
        <div class="note">
    
            <VnoteList></VnoteList>
    
        </div>
    
    </template>
    
    <script>
        import VnoteList from "./VnoteList"
        export default {
            name:"VnoteShow",
            data(){
                return{}
            },
            components:{
                VnoteList,
            }
        }
    </script>
    
    <style scoped>
    
    </style>

     VnoteList.vue

    <template>
        <ul>
            <VnoteItem></VnoteItem>
        </ul>
    
    </template>
    
    <script>
        import VnoteItem from "./VnoteItem"
        export default {
            name:"VnoteList",
            data(){
                return{}
            },
            components:{
                VnoteItem,
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    VnoteItem.vue

    <template>
        <li>
            <h2>我的笔记标题</h2>
            <p>笔记内容</p>
        </li>
    
    </template>
    
    <script>
    export default {
        name:"VnoteItem",
        data(){
            return{}
        }
    }
    </script>
    
    <style scoped>
    
    </style>
  • 相关阅读:
    c语言面试
    汇编面试基础
    求余符号的用法
    ++a和a++的一点不同
    OVER子句
    SQL执行计划解析(1) 执行计划基础
    sql 排序规则 chinese_prc_ci_as
    SQL执行计划解析(2) 基本查询的图形执行计划
    过sql_trace跟踪得到了该SQL的执行计划,如何看懂执行计划
    JS日历控件集合附效果图、源代码
  • 原文地址:https://www.cnblogs.com/venicid/p/11560093.html
Copyright © 2020-2023  润新知