1、過濾器

過濾器就是數據在真正渲染到頁面中的時候，可以使用這個過濾器進行一些處理，把最終處理的結果渲染到網頁中。

過濾器使用：
過濾器可以用在兩個地方：雙花括號插值**和v-bind表達式 (後者從2.1.0+開始支持)。過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示：

<!-- 在雙花括號中 -->
{{ message|capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId|formatId"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <p>{{username|vstrip("-")}}</p>    
   </div>
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    //過濾器   去空格功能
    Vue.filter('vstrip',function(value,string){
        console.log(value)
        // return value.replace(" ","")
        return value.replace(" ",string)      //只能替代字符串中出現的第一個空格
    }),

    Vue.component('1',{
        template:`

        `,  
        data:function(){
            return {

            }
        }
    }),

    new Vue({
        el:"#app",
        data:{
            username:"xx xxxxx x001 ",               //只能替代字符串中出現的第一個空格
        }
    })
</script>

過濾器定義：
你可以在一個組件的選項中定義本地的過濾器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在創建 Vue 實例之前全局定義過濾器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

2、圖書管理系統實例

需要引入工具bootstrap：Bootstrap官網

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css鏈接 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> 
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>圖書管理系統</h1>

        <!-- 下面form中的代碼是bootstrap官網  https://v3.bootcss.com/components/  中的  表單項目  複製過來的封裝好的模塊 -->
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
        </div>    
   </div>
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>

圖書管理系統案例完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css鏈接 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> 
</head>
<body>
    <div id="app">
        <!-- bootstrap的居中樣式 -->
        <div class="container">
            <h1>圖書管理系統</h1>

        <!-- 下面form中的代碼是bootstrap官網  https://v3.bootcss.com/components/  中的  表單項目  複製過來的封裝好的模塊 -->
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <label>名稱：</label>
                  <input type="text" class="form-control" v-model="add_book.name" placeholder="請輸入圖書的名字">
                </div>

                <div class="form-group">
                    <label>作者：</label>
                  <input type="text" class="form-control" v-model="add_book.author" placeholder="請輸入圖書的作者">
                </div>

                <div class="form-group">
                    <label>價格：</label>
                  <input type="text" class="form-control" v-model="add_book.price" placeholder="請輸入圖書的價格">
                </div>

                <div class="form-group">
                    <label>搜索：</label>
                  <input type="text" class="form-control" v-model="keywords" placeholder="請輸入搜索的關鍵字">
                </div>

                <!-- 提交添加的信息 @click.prevent 阻止表單提交-->
                <button type="submit" class="btn btn-default" @click.prevent="add()">添加</button>
                
            </form>

            <!-- class="table"  引入表格 -->
            <table class="table">    
                <tr>
                    <th>序號</th>
                    <th>名稱</th>
                    <th>價格</th>
                    <th>時間</th>
                    <th>操作</th>
                </tr>
                <!-- books不能寫死 -->
                <tr v-for="(book,index) in book_result">
                    <td>{{index+1}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.atime}}</td>
                    
                    <!-- 注意這裏button的標籤在td標籤裏面   class="btn btn-danger"在bootstrap中的按鈕組件中找  -->
                    <td><button type="submit" class="btn btn-danger" @click="del(index)">刪除</button></td>
                </tr>
            </table>
        </div>    
   </div>
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            books:[
                {"name":"python",author:"1",price:89,atime:new Date()},  // new Date()  D必須大寫，區分大小寫，否則不顯示數據
                {"name":"java",author:"2",price:88,atime:new Date()},
            ],
            add_book:{
                name:"",
                author:"",
                price:"",
                atime:new Date(),
            },
            keywords:"",
        },
        methods:{
            add:function(){
                // console.log(this.add_book)

                //JSON.stringify() 轉換成字符串     JSON.parse()  轉成JS認識的代碼    功能：相當於做了python的深度拷貝，創建了一個新的對象
                var book = JSON.parse(JSON.stringify(this.add_book))
                
                // 因爲this.add_book是雙向綁定的，add_book在添加一次元素後，就會被綁定成固定元素
                this.books.push(book)

                //元素添加完成之後，清空輸入框，使得輸入信息恢復默認
                this.add_book={
                        name:"",
                        author:"",
                        price:"",
                        atime:new Date(),
                    }
            },

            del:function(index){
                //刪除index元素
                this.books.splice(index,1)

            }
        },

        computed:{
            book_result(){
                console.log(this.books)
                kw = this.keywords               //這裏將keyeords的值傳入kw，方便後面的調用。否則有時候的this指向不是keywords的方法
                if(this.keywords){
                    // 
                    console.log(this.keywords)        //這裏的this.keywords不同於下面面的，這裏指的是

                    //數組裏面的過濾方法
                    //item是books當中的每一條數據
                    var newbooks = this.books.filter(function(item){   //var let 用於定義變量  const常量

                        console.log(this.keywords)   //這裏的this.keywords不同於上面的，這裏指的是filter這個方法的this
                        console.log(item)
                        
                        //判斷字符是否在item.name中包含
                        if(item.name.indexOf(kw)>=0){         //這裏的kw也可以使用that.keywords
                            return true                   //返回當前的item數據
                        }else{
                            return false
                        }
                    })
                    return newbooks     //返回過濾的數組
                }else{
                    return  this.books
                }
                
            }
        }

    })
</script>

3、Vue-Router

Vue-Router是用來將一個Vue程序的多個頁面進行路由的。比如一個Vue程序（或者說一個網站）有登錄、註冊、首頁等模塊，那麼我們就可以定義/login、/register、/來映射每個模塊。

安裝：

通過script加載進來：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

通過npm安裝：npm install vue-router

路由基本
在網頁中，經常需要發生頁面更新或者跳轉。這時候我們就可以使用Vue-Router來幫我們實現。Vue-Router是用來做路由的，也就是定義url規則與具體的View映射的關係。可以在一個單頁面中實現數據的更新。

安裝：

使用CDN：
加載最新版的：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
加載指定版本的：<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>。
下載到本地：<script src="../../lib/vue-router.js"></script>。
使用npm安裝：npm install vue-router

路由的基本使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/">首頁</router-link>
        <router-link to="/music">音樂</router-link>
        <!-- 路由匹配到的組件將渲染到這裏  vue-router的出口 -->
        <router-view></router-view>
    </div>
    
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有組件名字    extend是沒有組件的名字的
    var index = Vue.extend({template:"<h1>這是首頁</h1>"})
    var music = Vue.extend({template:"<h1>這是音樂界面</h1>"})
    
    //vue-router
    var router = new VueRouter({
        routes:[              //這裏的routes需要注意，不同於其他
            {path:"/", component:index},
            {path:"/music", component:music},
        ]
    })

    new Vue({
        el:"#app",
        data:{
        },
        router:router    //router 是關鍵字
    })
</script>

解釋：

1、在vue-router中，使用<router-link>來加載鏈接，然後使用to表示跳轉的鏈接。vue-router最終會把<router-link>渲染成<a>標籤。
2、<router-view>是路由的出口，也就是相應url下的代碼會被渲染到這個地方來。
3、Vue.extend是用來加載模板的。
4、routes是定義一個url與組件的映射，這個就是路由。
5、VueRouter創建一個路由對象。

4、動態路由：

在路由中有一些參數是會變化的，比如查看某個用戶的個人中心，那肯定需要在url中加載這個人的id，這時候就需要用到動態路由了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/">首頁</router-link>
        <router-link to="/profile">個人中心</router-link>
        <!-- 路由匹配到的組件將渲染到這裏  vue-router的出口 -->
        <router-view></router-view>
    </div>
    
</body>
</html>

<!--vue引入   必須聯網-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 加載vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //component  有組件名字    extend是沒有組件的名字的
    var index = Vue.extend({template:"<h1>這是首頁</h1>"})
    var profile = Vue.extend(
        {template:"<h1>這是個人中心{{$route.params.userid}}</h1>",
        
        mounted(){
            console.log(this.$route)     //輸出路由中的參數數據
            console.log(this.$router)    //加強版本輸出數據項目
        }
    
    })   //輸出動態綁定的路由id
    //vue-router
    var router = new VueRouter({
        routes:[              //這裏的routes需要注意，不同於其他
            {path:"/", component:index},
            {path:"/profile/:userid", component:profile},   //  動態綁定id  /:userid
        ],
        
    })

    new Vue({
        el:"#app",
        data:{
        },
        router:router    //router 是關鍵字
    })
</script>

解釋：

:userid：動態的參數。
this.$route.params：這個裏面記錄了路由中的參數。

5、組件複用：

當使用路由參數時，例如從/user/foo導航到/user/bar，原來的組件實例會被複用。因爲兩個路由都渲染同個組件，比起銷燬再創建，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。

複用組件時，想對路由參數的變化作出響應的話，你可以簡單地watch(監測變化)``$route對象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化作出響應...
    }
  }
}

或者是使用後面跟大家講到的導航守衛：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Vue前端框架的學習——05—(過濾器、圖書管理系統實例、Vue-Router、基本使用、解釋說明、動態路由)

1、過濾器

2、圖書管理系統實例

3、Vue-Router

解釋：

4、動態路由：

5、組件複用：

Django框架學習——5—(數據庫、在Django中操作數據庫、實戰案例：圖書管理系統、ORM模型介紹)

Django框架學習——4—(DTL模板標籤、模版常用過濾器、模版結構優化、加載靜態文件)

Vue前端框架的學習——06—(匹配404錯誤、嵌套路由、編程式導航、命名路由、命名視圖、重定向和別名、node環境配置和npm、vue-cli的使用)

Flask項目實戰——4—(郵箱的驗證碼發送、Redis數據庫存儲驗證碼、郵箱修改功能、權限管理)

Django框架學習——3—(URL指定默認的參數、re_path函數、模板介紹、模板變量、常用標籤)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結