Vue.js學習No.2

時間 2019-12-09

原文原文鏈接

歡迎關注個人公衆號 css
學習的內容以下html
開始前端
過濾器的定義方法主要去解決時間顯示的問題過濾器調用的格式 {{ name | nameope }}vue

// Vue.filter("過濾器的名稱",function(data){
        //      return data+"123"
        // })

  Vue.filter("msgFormat",function(msg,args){
             return msg+"arg"+args
        })
     <td>{{item.Ctime | msgFormat('你好仕明同窗')}}</td>
複製代碼

這個是幹嗎的？？？ <link rel="stylesheet" href="./lib/bootstrap.min.css">node
@keyup.enter="add" 點擊了回車鍵的話，就觸發事件所有的按鍵別名.enter .tab .delete .esc .space .up .down .left .right 若是想要指定的某一個某個按鍵的話就必須從新的定義找鍵盤碼git
定義全局鍵盤碼es6

Vue.config.keyCodes.f2=113
複製代碼

@click="add(傳入參數)
v-text在插值表達式中，不能使用{{item，Ctime}}只能這樣使用使用 v-text="item.Ctime

過濾器

調用就近原則，若是全局過濾器和私有過濾器名稱同樣，做用同樣的，那麼先調用私有的
過濾器調用的格式 {{ name | nameope }},過濾器能夠屢次調用
要想使全局過濾器生效的話，就必須初始化在全局過濾器以後

//   全局過濾器，全部的實例對象都共享了 
        // 其實這個時間會默認的給與他  pattern="" 以防止調用者不給他賦值
        Vue.filter("dateFromat", function (date, pattern = "") {
            var dt = new Date(date);
            var y = dt.getFullYear();
            var m = dt.getMonth() + 1
            var d = dt.getDate()
            console.log("shiming" + pattern)
            console.log("shiming" + date)
            // return `${y}-${m}-${d}`

            // pattern 這個要判斷一下是否爲null 
            if (pattern.toLowerCase() === "yyyy-mm-dd") {
                // return y+"-"+m+"-"+d
                // 魔法字符串
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours();
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })
複製代碼

forEach some filter findIndex 都會遍歷數組的每一項，
- forEach沒有辦法終止
- some 能夠return true 把它終止掉
- filter
- findIndex 找索引

一個添加和刪除數據的Demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <!-- 這個是幹嗎的？？？ -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
</head>

<body>
    <div id="app">


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    Id:<input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    <!-- class="form-control" 一個好看一個很差看  @keyup="add" 事件-->
                    <!--  @keyup.enter="add" 點擊了回車鍵的話，就觸發事件 
                    所有的按鍵別名
                    .enter  .tab .delete  .esc  .space  .up  .down .left .right 
                    若是想要指定的某一個某個按鍵的話 就必須從新的定義 找鍵盤碼 
                    -->
                    <!-- Name:<input type="text" v-model="name" @keyup.enter="add"> -->
                    <!-- 這樣就能夠其做用了 使用f2 去觸發某些的操做 -->
                    Name:<input type="text" v-model="name" @keyup.f2="add">
            
                </label>
                <!-- 傳入參數 ，加了小括號  -->
                <input type="button" value="添加" class="btn btn-primary" @click="add()">


                <label>
                    搜索關鍵字:<input type="text" class="form-control" v-model="key">
                </label>
            </div>
        </div>


        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th> ID</th>
                    <th> Name</th>
                    <th> Ctime</th>
                    <th> Operation</th>


                </tr>
            </thead>
            <tbody>
                <!-- 若是這個list是個固定的集合的話，那麼頁面就不能刷新了，我我的的理解
                這個list須要根據代碼來改變的，這樣子才很好  
                -->
                <tr v-for="item in search(key)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <!-- v-text在插值表達式中，不能使用{{item，Ctime}} 只能這樣使用使用 
                         <td v-text="item.Ctime"></td>

                          這種用法是錯誤的，下面的使用的方法    <td v-text="{{item.Ctime}}"></td>
                    -->
                    <!-- <td v-text="item.Ctime"></td> -->

                    <!-- <td>{{item.Ctime | msgFormat('你好仕明同窗')|test}}</td> -->

                    <td>{{ item.Ctime | dateFromat("yyyy-mmd-dd") }}</td>
                    <td>
                        <!-- .prevent 阻止默認行爲 -->
                        <a href="" @click.prevent="del(item.id)">刪除</a>
                    </td>
                </tr>
            </tbody>
        </table>


    </div>


    <div id="app2">


        {{1+1}}

        {{ dt |dateFromat }}

        <h1> {{ dt |dateFromat }} </h1>
    </div>


    <div id="app3">
        {{1+1}}

    </div>
    <script>




        // Vue.filter("msgFormat", function (msg, args) {
        //     return msg + "arg" + args
        // })
        // // 過濾器能夠屢次調用

        // Vue.filter("test", function (msg) {
        //     return msg + "test" 
        // })
        //   全局過濾器，全部的實例對象都共享了 
        // 其實這個時間會默認的給與他  pattern="" 以防止調用者不給他賦值
        Vue.filter("dateFromat", function (date, pattern = "") {
            var dt = new Date(date);
            var y = dt.getFullYear();
            var m = dt.getMonth() + 1
            var d = dt.getDate()
            console.log("shiming" + pattern)
            console.log("shiming" + date)
            // return `${y}-${m}-${d}`

            // pattern 這個要判斷一下是否爲null 
            if (pattern.toLowerCase() === "yyyy-mm-dd") {
                // return y+"-"+m+"-"+d
                // 魔法字符串
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours();
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })

        // 定義全局鍵盤碼 
        Vue.config.keyCodes.f2=113

      
        //  要想使全局過濾器生效的話，就必須初始化在 全局過濾器以後
        var vm2 = new Vue({
            el: "#app2",
            data: {
                dt: new Date()
            },
            methods: {

            },
            // 定義私有過濾器
            filters: {

                // 調用就近原則，若是全局過濾器和私有過濾器名稱同樣，做用同樣的，
                // 那麼先調用私有的
                dateFromat: function (date, pattern = "") {
                    var dt = new Date(date);
                    var y = dt.getFullYear();
                    // 有多是一位數的  padStart(2,"0") 表示長度爲2 ，不夠的話0來補充
                    var m = (dt.getMonth() + 1).toString().padStart(2,"0")
                    var d = dt.getDate().toString().padStart(2,"0")
                    console.log("shiming" + pattern)
                    console.log("shiming" + date)
                    // return `${y}-${m}-${d}`

                    // pattern 這個要判斷一下是否爲null 
                    if (pattern.toLowerCase() === "yyyy-mm-dd") {
                        // return y+"-"+m+"-"+d
                        // 魔法字符串
                        return `${y}-${m}-${d}`
                    } else {
                        var hh = dt.getHours().toString().padStart(2,"0");
                        var mm = dt.getMinutes().toString().padStart(2,"0")
                        var ss = dt.getSeconds().toString().padStart(2,"0")

                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`+"私有的過濾器"
                    }
                }
            }
        })




        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                key: "",
                list: [
                    { id: 1, name: "寶馬", Ctime: new Date() },
                    { id: 2, name: "長安", Ctime: new Date() },
                ]
            },
            methods: {
                add() {
                    console.log("log")

                    var car = { id: this.id, name: this.name, Ctime: new Date() }

                    this.list.push(car)
                    this.name = this.id = ""

                },
                del(id) {
                    //vue中使用some刪除list中的數據 能夠在some內部作任何的事情 
                    //    this.list.some((item,i)=>{
                    //        if(item.id==id){
                    //            this.list.splice(i,1)
                    //            return true; 
                    //        }
                    //    })  
                    //這個就是專門來找id的 
                    var index = this.list.findIndex(item => {
                        if (item.id == id) {

                            return true;
                        }
                    })
                    this.list.splice(index, 1)
                    console.log("找到的索引 :" + index)
                },
                //根據關鍵字查詢集合
                search(key) {
                    //方法一
                    // var newList=[];
                    // // 這裏這個循環注意是使用的那個item，是條件的哦
                    // this.list.forEach(item => {
                    //     if (item.name.indexOf(key)!=-1) {
                    //         newList.push(item)
                    //     }
                    // }); 
                    // return newList

                    //  forEach some filter findIndex 都會遍歷數組的每一項，
                    // forEach沒有辦法終止 
                    // some 能夠return true 把它終止掉
                    // filter 
                    // findIndex 找索引 
                    //過濾器，符合的都返回
                    return this.list.filter(item => {
                        // 若是能取到的話，就不等於-1 
                        if (item.name.indexOf(key) != -1) {

                        }
                        // es6中提供新的方法，叫作includes 若是包含返回true
                        if (item.name.includes(key)) {
                            return item
                        }
                    })
                    //  newList
                }

            }
        })
        // 過濾器的定義方法 主要去解決時間顯示的問題
        // Vue.filter("過濾器的名稱",function(data){
        //      return data+"123"
        // })


    </script>
</body>

</html>


<!-- 過濾器調用的格式  {{ name | nameope }} -->
複製代碼

自定義指令在Vue中全部的指令都是V開頭 <input type="text" class="form-control" v-model="key" v-focus>github
使用Vue.directive 定義全局的指令express
- 參數1：指令的名稱，注意不須要加上V- ，可是調用的時候，須要加上V-
- 參數2：是一個對象，有指令相關的函數，函數能夠在特色的階段執行相關的操做

// 使用Vue.directive 定義全局的指令
// 參數1：指令的名稱，注意不須要加上V- ，可是調用的時候，須要加上V-
// 參數2：是一個對象，有指令相關的函數，函數能夠在特色的階段執行相關的操做
         Vue.directive("focus",{
            //  指令綁定在元素上的時候，只調用一次，在指令第一次綁定到元素上時調用。就是一個元素的對象
             bind:function(el){
                // 每一個函數中，第一個參數永遠是el，表示被綁定，其實就是text 原聲的js對象
                // 一個元素，只有插入Dom以後，纔會有焦點
                // el.focus() 因此這個方法在這裏不行
             },
            //  inserted 表示元素插入Dom中的時候，會執行一次
             inserted:function(el){
                el.focus()
             },
               // 值更新時的工做
             // 也會以初始值爲參數調用一次
             updated:function(){

             }
         })
複製代碼

鉤子函數參數
<input type="text" v-focus V-color="'blue'" >

Vue.directive("color",{
            //  爲啥設置顏色能夠生效，其實理解爲初始化了這個屬性
            // 只要經過指令綁定了元素，無論這個元素有沒有插入進去，這個元素確定有一個內聯的樣式
            // 和樣式相關的操做 
             bind:function(el,binding){
                  el.style.color="red"
//                   binding：一個對象，包含如下屬性：
// name：指令名，不包括 v- 前綴。
// value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
// oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
// expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
// arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
// modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
                  console.log("shiming value=---"+binding.value)  
                  console.log("shiming name=---"+binding.name)       
                  console.log("shiming expression=---"+binding.expression) 

                         el.style.color=binding.value   
             },
            //  和行爲有關的操做，最好在inserted中執行
             inserted:function(){

             },
             updated:function(){

             }
         })
複製代碼

定義私有的指令，寫到vm實例中去了

// 定義私有的指令
            directives:{
                "fontweight":{
                    bind:function(el,binding){
                        el.style.fontWeight=binding.value
                    }
                }
            }
複製代碼

注意directives ，引用的時候是大寫的V <h1 v-color="'pink'" V-fontweight="900"> {{ dt |dateFromat }} </h1>npm
函數簡寫
- 在不少時候，你可能想在 bind 和 update 時觸發相同行爲，而不關心其它的鉤子。

// 定義私有的指令
            directives:{
                "fontweight":{
                    bind:function(el,binding){
                        el.style.fontWeight=binding.value
                    }
                },
                // 這個方法其實就兩個方法合成一個了，bind和update中去了
                "fontsize" :function(el,binding){
                   el.style.fontSize=binding.value
                }

            }
複製代碼

Vue的生命週期

一、new Vue（）
二、 Init ：剛剛初始化了一個Vue實例，只有默認的生命週期函數和默認的事件，其餘的沒有建立
三、實例徹底被建立出來，會執行他，在這個生命週期函數執行的時候，data和methods的尚未被初始化
四、初始化data和methods
五、created 方法執行，data和methods 初始化好了
六、Vue開始編譯模板，Vue代碼中的指令進行執行，最終在內存中生成一個編譯好的最終模板，而後把這個模板字符串，渲染爲內存中的Dom，此時，只是在內存中，渲染好了模板，並無把模板掛載到正真的頁面中去
七、內存中已經已經編譯完成了，可是沒有把模板渲染到頁面中beforeMount(),console.log(document.getElementById("pp").innerText)就是輸出 innerText {{msg}} 尚未正真的渲染出來，還咩有掛載到頁面中去
八、強內存中編譯好的模板，正式的替換到頁面中去
九、內存中的模板掛載到頁面中，用戶能夠看到頁面的 mounted實例最後的一個生命週期的函數只要執行完了mounted，Vue實例已經初始化完畢了，此時已經進入到了運行階段
十、beforeUpdate 最少執行0次，也有可能觸發屢次，運行中的事件
十一、 update 最少執行0次，也有可能觸發屢次，運行中的事件
十二、beforeDestoryVue實例就已經從運行階段進入到銷燬階段，可是此時候實例上全部data和methods，過濾器和指令都是處於可用的狀態，尚未執行銷燬的過程
1三、destoryed到這裏就所有銷燬了
Demo 代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>

<body>

    <div id="app">
        <p>好好學習</p>

        <p id="pp">{{ msg }}</p>
        <input type="button" value="修改msg" @click="msg='我被修改了'">
    </div>


    <script>
        // 一、new Vue
        //二、 init:剛剛初始化了一個Vue實例，只有默認的生命週期函數和默認的事件，其餘的沒有建立

        var vm = new Vue({
            el: "#app",
            // 四、初始化data和methods 
            data: {
                msg: "msg消息"
            },
            methods: {
                show() {
                    console.log("show方法")
                }
            },
            //三、 實例徹底被建立出來，會執行他，在這個生命週期函數執行的時候，data和methods的尚未被初始化
            beforeCreate() {
                console.log("beforeCreate方法")
                // 輸出爲undefined
                console.log(this.msg)
            },
            // 五、created 方法執行，data和methods 初始化好了
            created() {
                console.log("created方法")
                console.log(this.msg)
            },
            // 六、Vue 開始編譯模板，Vue代碼中的指令進行執行，最終在內存中生成一個編譯好的最終模板，
            // 而後把這個模板字符串，渲染爲內存中的Dom，此時，只是在內存中，渲染好了模板，並無把模板掛載到正真的頁面中去
            //   七、內存中已經已經編譯完成了，可是沒有把模板渲染到頁面中
            beforeMount() {
                console.log("beforeMount方法")
                // 就是 輸出  innerText {{msg}} 尚未正真的渲染出來，還咩有掛載到頁面中去
                console.log(document.getElementById("pp").innerText)
            },
            // 八、強內存中編譯好的模板，正式的替換到頁面中去
            // 九、內存中的模板掛載到頁面中，用戶能夠看到頁面的 mounted實例最後的一個生命週期的函數
            // 只要執行完了mounted，Vue實例已經初始化完畢了，此時已經進入到了運行階段
            mounted(){
                console.log("mounted方法")
                console.log(document.getElementById("pp").innerText)
            },
            // 十、beforeUpdate  最少執行0次，也有可能觸發屢次，運行中的事件
            beforeUpdate(){
                console.log("beforeUpdate方法")
                // 這個消息仍是舊的
                console.log(document.getElementById("pp").innerText)
            } ,
               // 十一、 update 最少執行0次，也有可能觸發屢次，運行中的事件
            updated(){
                console.log("updated方法")
                console.log(document.getElementById("pp").innerText)
            },
            // 十二、beforeDestory Vue實例就已經從運行階段進入到銷燬階段，可是此時候實例上全部data和methods，過濾器和指令都是處於可用的狀態，尚未執行銷燬的過程

            beforeDestroy(){
                console.log("beforeDestroy方法")
            },
            // 1三、到這裏就所有銷燬了
            destoryed(){
                console.log("destoryed方法")
            }   

        })

    </script>
</body>

</html>
複製代碼

vue-resource的使用

依賴於 Vue有個前後的順序
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

<script src="./lib/vue.min.js"></script>
    <!-- vue-resource 依賴於 Vue 有個前後的順序  this.$http.get -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

// global Vue object
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
複製代碼

Demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <!-- vue-resource 依賴於 Vue 有個前後的順序  this.$http.get -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="get" @click="getInfo">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                getInfo() {
                    console.log("getInfo")


                    // GET /someUrl then返回的數據
                    this.$http.get('https://cn.vuejs.org/v2/guide/ssr.html').then(response => {


                        console.log(response)
                        // get body data  通常獲取body 就能夠了
                        this.someData = response.body;
                        console.log(this.someData)


                    }, response => {
                        // error callback
                        console.log(response)
                    });
                    
                    this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
                        console.log(result.body)
                    })
                     

                    // // POST /someUrl
                    // this.$http.post('/someUrl', { foo: 'bar' }).then(response => {

                    //     // get status
                    //     response.status;

                    //     // get status text
                    //     response.statusText;

                    //     // get 'Expires' header
                    //     response.headers.get('Expires');

                    //     // get body data
                    //     this.someData = response.body;

                    // }, response => {
                    //     // error callback
                    //     console.log("error"+response)
                    // });
                }
            }

        })
    </script>
</body>

</html>
複製代碼

使用最多的請求jsonp(url, [config])
vue-resource 目前和Vue中最經常使用的請求框架

Jsonp的原理（還要仔細查閱資料）

jsonp的實現原理 一、因爲瀏覽器的安全限制，不容許AJAX訪問協議不一樣，餘名不一樣，端口號不一樣的數據接口，瀏覽器認爲不安全 二、能夠經過動態建立script的標籤的形式，把script標籤的src屬性，指向數據接口的地址，由於script標籤不存在跨域限制，這種方式叫作JSONP，JSONP只支持get請求
本身的node服務器
node.js服務器的實現我的感受好像go,我擦，這一套代碼都是一我的寫的？？
nodejs開發輔助工具nodemon

// 導入http的內置模塊
const http = require("http")
// 建立一個 http服務器
const server = http.createServer()
// 監聽 http 服務器的request的請求
server.on('request', function (req, res) {

    const url = req.url

    console.log("我是服務器，我啓動了url==="+url)

    if (url === "/getDemo") {

        var scrip = "show()"

        res.end(scrip)

    } else {
        // 返回404
        res.end("404")
    }
})
// http://127.0.0.1:3000/getDemo
// 指定端口號並啓動服務器監聽 感受好像go語言啊
server.listen(3000, function () {
    console.log("我是服務器，我啓動了")
})
複製代碼

啓動
客服端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     <script>
// jsonp的實現原理
// 一、因爲瀏覽器的安全限制，不容許AJAX訪問 協議不一樣，餘名不一樣，端口號不一樣的數據接口，瀏覽器認爲不安全
// 二、能夠經過動態建立script的標籤的形式，把script標籤的src屬性，指向數據接口的地址，由於script標籤不存在跨域限制，這種方式叫作JSONP，JSONP只支持get請求
// 

         function show(){
             console.log("我是客服端的方法,可是經過服務器幫我執行的，show方法是服務器幫我調用的")
         }
        </script>

        <script src="http://127.0.0.1:3000/getDemo"></script>
</body>
</html>
複製代碼