一、vue基礎語法（輕鬆入門vue）

原創 莫逸风 2020-06-19 06:59

輕鬆入門vue系列

Vue基礎語法

喜歡不要忘了點個贊喲demo源碼

Vue是一套用於構建用戶界面的漸進式框架

Vue的核心庫只關注視圖層，不僅容易上手，還便於與第三方既有項目整合

vue官網

一、HelloWord

  1. 引入vue.js
  2. 創建一個帶有id的dom
  3. 編寫vue實例，el掛載點對應HTMLdom，data表示vue實例中的數據
<!--掛載點、模板、與實例   #app這個dom節點在此處爲一個掛載點、{{hello}}叫做插值表達式屬於模板、vue爲一個實例-->
<script src="vue.js"></script>
<div id="app">
    {{hello}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

二、MVVM設計思想

  1. M(model) 模型----JavaScript Object 數據
  2. V(view) 視圖----DOM樹、HTML
  3. VM(view-model) 控制:
    1. view->model : Dom.listeners事件監聽
    2. model->view : data bindings數據綁定

在這裏插入圖片描述

三、指令

  • 本質就是自定義屬性
  • Vue中指定都是以 v- 開頭

1. v-cloak

防止頁面加載時出現閃爍問題

這個指令保持在元素上直到關聯實例結束編譯。和CSS規則如[v-cloak]{display:none}一起用時，編譯結束前標籤一直有v-cloak屬性。

<style>
        [v-cloak]{
            display: none;
        }
    </style>
<div id="app">
    <div v-cloak>
        {{hello}}
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

2. v-text

更新元素的 textContent（標籤內文字）。如果要更新部分的 textContent ，需要使用 {{ Mustache }}（插值表達式） 插值。

<div id="app">
    <div v-text="hello">
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

3. v-html

更新元素的 innerHTML (html標籤會被編譯)。注意：內容按普通 HTML 插入 - 不會作爲 Vue 模板進行編譯 。如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用組件來替代。

<div id="app">
    <div v-html="hello">
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>"
        }
    })
</script>

4. v-show

根據表達式之真假值，切換元素的 display CSS 屬性。

當條件變化時該指令觸發過渡效果。

不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

<div id="app">
    <div v-show="ok" v-html="hello"></div>
    <div v-show="no" v-html="hello"></div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            ok:true,
            no:false,
            hello:"<h1>Hello Vue</h1>"
        }
    })
</script>

4. v-pre

跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。

<div id="app">
    <!--  顯示的是{{ hello }}跳過編譯過程 -->
    <span v-pre>{{ hello }}</span>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

5. v-once

只渲染元素和組件一次。隨後的重新渲染，元素/組件及其所有的子節點將被視爲靜態內容並跳過。這可以用於優化更新性能。

<div id="app">
    <!--  只在第一次加載渲染，當你改變hello的值的時候，前端顯示不會發生改變  -->
    <span v-once>{{ hello }}</span>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

6. v-model（雙向數據綁定）

  • 當數據發生變化的時候，視圖也就發生變化
  • 當視圖發生變化的時候，數據也會跟着同步變化
<div id="app">
    <input v-model="hello">
    <div>{{hello}}</div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:""
        }
    })
</script>

7. v-on

  1. v-on 指令用法
<input type=‘button' v-on:click='num++'/>
  1. v-on 簡寫形式
<input type=‘button' @click='num++'/>
  1. 直接綁定函數名稱
<button v on:click='say'>Hello</button>
  1. 調用函數
<button v on:click='say()'>Say hi</button>

demo

<div id="app">
    <button v-on:click="handelClick">彈出</button>
    <button v-on:click="num++">{{num}}</button>
    <button @click="num++">{{num}}</button>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            handelClick:function () {
                alert("haha");
            }
        }
    })
</script>
  1. 事件函數參數傳遞

如果事件直接綁定函數名稱，那麼默認會傳遞事件對象作爲事件函數的第一個參數

如果事件綁定函數調用，那麼事件對象必須作爲最後一個參數顯示傳遞，並且事件對象的名稱必須是$event

<button v-on:click='say("hi",$event)'>Say hi</button>

demo

<div id="app">
    <button v-on:click="handle1">點擊1</button>
    <button v-on:click="handle2(12,$event)">點擊2</button>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        data:{

        },
        methods:{
            handle1:function (event) {
                alert(event.target.innerHTML);
            },
            handle2:function (p1,event) {
                alert(p1+event.target.innerHTML);
            }
        }
    })
</script>
事件修飾符

.stop阻止冒泡（阻止父級dom節點的事件被觸發）

<a v-on:click.stop= "handle"> 跳轉 </a>

.prevent阻止默認行爲（a不會觸發跳轉）

<a v-on:click.prevent="handle"> 跳轉 </a>

demo

<div id="app">
    <div v-on:click="handelClick">
        <button v-on:click="handelClick">彈出兩次</button>
    </div>
    <div v-on:click="handelClick">
        <button v-on:click.stop="handelClick">彈出一次</button>
    </div>
    <a v-on:click="handelClick" href="https://blog.csdn.net/qq_38723677">跳轉</a>
    <a v-on:click.prevent="handelClick" href="https://blog.csdn.net/qq_38723677">不會跳轉</a>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            handelClick:function () {
                alert("莫逸風");
            }
        }
    })
</script>
按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：

.enter回車鍵

<input v-on:keyup.enter='submit'>

.delete刪除鍵與backspace鍵

<input v-on:keyup.delete='handle'>

demo

<div id="app">
    彈出提交：<input v-on:keyup.enter='submit'>
    彈出刪除：<input v-on:keyup.delete='delete1'>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            submit:function () {
                alert("提交");
            },
            delete1:function () {
                alert("刪除");
            }
        }
    })
</script>
自定義按鍵修飾符

demo打印按鍵對應按鍵碼

<div id="app">
    彈出按鍵對應的按鍵碼：<input @keyup="handelClick">
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            handelClick:function (event) {
                //keyCode 的事件用法已經被廢棄了並可能不會被最新的瀏覽器支持,它可能已經從相關的Web標準中刪除
                alert(event.keyCode);
                //KeyboardEvent.code爲替代實現，應被使用，但存在部分瀏覽器還未支持，Vue自定義按鍵也未支持
                // alert(event.code);
            }
        }
    })
</script>

全局 config.keyCodes 對象（f1指向112號鍵，112號鍵命名f1）

Vue.config.keyCodes.f1 = 112

demo

<div id="app2">
    點擊按鍵A彈出提交<input type="text" @keyup.aaa="handel1">
</div>
<script>
    //65是a鍵的keycode，給他起個別名，在上方就可以使用了
    Vue.config.keyCodes.aaa = 65;
    var vue = new Vue({
        el:"#app2",
        data: {

        },
        methods: {
            handel1:function () {
                alert("提交");
            }
        }
    })
</script>

8. v-bind

  • v-bind 指令被用來響應地更新 HTML 屬性
  • v-bind:href 可以縮寫爲 :href;

v-bind指令語法

<a v-bind:href="url">{{targ}}</a>

縮寫形式

<a :href="url">{{targ}}</a>

demo

<div id="app">
    <!--  標準形式  -->
    <a v-bind:href="url">{{targ}}</a>
    <!--  簡寫形式  -->
    <a :href="url">{{targ}}</a>
    <button @click="handel">修改跳轉目標</button>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            targ:"跳轉百度",
            url:"https://www.baidu.com"
        },
        methods:{
            handel:function () {
                if (this.targ=="跳轉百度"){
                    this.targ="跳轉莫逸風博客";
                    this.url="https://blog.csdn.net/qq_38723677";
                }else {
                    this.targ="跳轉百度";
                    this.url="https://www.baidu.com"
                }
            }
        }
    })
</script>

v-bind實現雙向數據綁定

<div id="app">
    <input type="text" v-bind:value="val" @input="handel">{{val}}
    <input type="text" v-bind:value="val2" @input="val2=$event.target.value">{{val2}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            val:"",
            val2:"",
        },
        methods:{
            handel:function (event) {
               this.val=event.target.value;
            }
        }
    })
</script>
class樣式綁定

對象語法（isActive是一個Boolean數據，判定編譯後修飾的class名稱是否存在）

<div v-bind:class="{ active: isActive }"></div>

數組語法（數組中爲data數據，可以賦值爲相應的類名）

<div v-bind:class="[activeClass, errorClass]"></div>

demo

<style>
    .active{
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }
    .col{
    	background-color: blanchedalmond;
    }
</style>
<div id="app">
    <div v-bind:class="{active:isActive,col:isA}">測試</div>
    <div  v-bind:class="[activeClass,colClass]">測試</div>
    <button @click="handel">切換</button>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            isActive:true,
            isA:true,
            activeClass:"active",
            colClass:"col",
        },
        methods:{
            handel:function () {
                this.isActive=!this.isActive;
                if (this.colClass=="col"){
                    this.colClass="";
                }else {
                    this.colClass="col";
                }
            }
        }
    })
</script>

對象語法與數組語法結合使用

<div v-bind:class="[activeClass,colClass,{act:isAct}]">測試</div>

當類較多時，可以在data中創建一個數組，綁定到class，然後用數組相關方法操作其中的class

對象綁定同樣可以在data中創建一個對象，綁定到class

<div v-bind:class="arr">測試</div>
//arr:[active,col],  //data中

如果你本來就有一個class，與綁定class同時存在時，不會覆蓋會編譯到一起

style樣式綁定

對象語法

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

數組語法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

demo

<div id="app2">
    <div v-bind:style="styleObject">綁定樣式對象</div>

    <!-- CSS 屬性名可以用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來)    -->
    <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內聯樣式</div>

    <!--組語法可以將多個樣式對象應用到同一個元素 -->
    <div v-bind:style="[styleObj1, styleObj2]">綁定樣式數組</div>
</div>
<script>
    new Vue({
        el: '#app2',
        data: {
            styleObject: {
                color: 'green',
                fontSize: '30px',
                background: 'red'
            },
            activeColor: 'green',
            fontSize: "30px",
            styleObj1: {
                color: 'red'
            },
            styleObj2: {
                fontSize: '30px'
            }
        }
    })
</script>

9. v-if、v-else、v-else-if

多個元素 通過條件判斷展示或者隱藏某個元素

較簡單看demo

<div id="app">
    <input v-model="score">
    <div v-if="score>=90">優秀</div>
    <div v-else-if="score>=80&&score<90">良好</div>
    <div v-else-if="score>=70&&score<80">一般</div>
    <div v-else>較差</div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            score:100,
        }
    })
</script>

v-show 和 v-if的區別

  • v-show本質就是標籤display設置爲none，控制隱藏（性能較高）

  • v-if是動態的向DOM樹內添加或者刪除DOM元素

10.v-for

v-for遍歷數組

 <li v-for="item in fruits">{{item}}</li>
 <li v-for="(item,index) in fruits">{{index}}-----{{item}}</li>
 <li v-for="item in myFruits">{{item.cname}}----{{item.ename}}</li>

key 的作用：僅使得vue提高性能，無其他變化

  • key來給每個節點做一個唯一標識
  • key的作用主要是爲了高效的更新虛擬DOM
 <li :key="index" v-for="(item,index) in fruits">{{item}}</li>

demo

<div id="app">
    <ul>
        <li v-for="item in fruits">{{item}}</li>
        <li v-for="(item,index) in fruits">{{index}}-----{{item}}</li>
        <li v-for="item in myFruits">{{item.cname}}----{{item.ename}}</li>
        <li :key="index" v-for="(item,index) in fruits">{{item}}</li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            fruits:['apple','orange','aaa'],
            myFruits:[{
                cname:"蘋果",
                ename:"apple"
            },{
                cname:"橙子",
                ename:"orange"
            },{
                cname:"AAA",
                ename:"aaa"
            }]
        }
    })
</script>

v-for遍歷對象

<div v-for='(value, key, index) in object'></div>

v-if和v-for結合使用

<div v-if='value==23' v-for='(value, key, index) in object'></div>

demo

<div id="app2">
    <ul>
        <li v-for="(v,k,i) in people">{{v + '---' + k + '---' + i }}</li>
    </ul>
    <hr>
    <ul>
        <li v-if='v==23' v-for="(v,k,i) in people">{{v + '---' + k + '---' + i }}</li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el:"#app2",
        data:{
            people:{
                name:"莫逸風",
                age:23,
                birthday:199803,
            }
        }
    })
</script>

四、Vue常用特性

1. 表單操作

基於vue的表單操作

input單行文本（綁定一個數據即可）

<input type="text" v-model="name">

radio單選框（綁定同一個數據）

<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female">女</label>

checkbox多選框（綁定統一個數據（數組形式））

<input type="checkbox" id="ball" value="1" v-model="like">
<label for="ball">籃球</label>
<input type="checkbox" id="sing" value="2" v-model="like">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="like">
<label for="code">寫代碼</label>

textarea多行文本（綁定一個數據即可）

<textarea v-model="textArea"></textarea>

select下拉框（select綁定一個數據即可，下拉多選select添加multiple=“true”，綁定一個數組數據）

<span>職業：</span>
<!-- select綁定一個數據 -->
<select v-model="job">
    <option value="0">請選擇職業..</option>
    <option value="1">教師</option>
    <option value="2">軟件工程師</option>
    <option value="3">律師</option>
</select>
<span>職業多選：</span>
<!-- multiple="true"設置select多選，select綁定一個數組 -->
<select v-model="job2" multiple="true">
    <option value="0">請選擇職業..</option>
    <option value="1">教師</option>
    <option value="2">軟件工程師</option>
    <option value="3">律師</option>
</select>

demo

<div id="app">
    <div>
        <span>姓名：</span>
        <!-- input綁定一個數據 -->
        <input type="text" v-model="name">
    </div>
    <div>
        <span>性別：</span>
        <!-- input綁定一個數據 -->
        <input type="radio" id="male" value="1" v-model="gender">
        <label for="male">男</label>
        <input type="radio" id="female" value="2" v-model="gender">
        <label for="female">女</label>
    </div>
    <div>
        <span>愛好：</span>
        <!-- input綁定一個數組 -->
        <input type="checkbox" id="ball" value="1" v-model="like">
        <label for="ball">籃球</label>
        <input type="checkbox" id="sing" value="2" v-model="like">
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" value="3" v-model="like">
        <label for="code">寫代碼</label>
    </div>
    <div>
        <span>職業：</span>
        <!-- select綁定一個數據 -->
        <select v-model="job">
            <option value="0">請選擇職業..</option>
            <option value="1">教師</option>
            <option value="2">軟件工程師</option>
            <option value="3">律師</option>
        </select>
        <span>職業多選：</span>
        <!-- multiple="true"設置select多選，select綁定一個數組 -->
        <select v-model="job2" multiple="true">
            <option value="0">請選擇職業..</option>
            <option value="1">教師</option>
            <option value="2">軟件工程師</option>
            <option value="3">律師</option>
        </select>
    </div>
    <div>
        <span>個人介紹：</span>
        <!-- textarea綁定一個數據 -->
        <textarea v-model="textArea"></textarea>
    </div>
    <button @click="handel">提交</button>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            name:"",
            gender:"",
            like:[],
            job:"0",
            job2:[],
            textArea:""
        },
        methods:{
            handel:function () {
                alert(this.name+""+this.gender+""+this.like+""+this.job+""+this.job2+""+this.textArea);
            }
        }
    })
</script>
表單域修飾符

.number ：使得輸入的數據轉化爲數值

<input type="text" v-model.number="num2">

demo

<div id="app">
    <div>
        <input type="text" v-model="num1">
        <button @click="handel">+13</button>
        {{num1}}
    </div>
    <div>
        <input type="text" v-model.number="num2">
        <button @click="handel2">+13</button>
        {{num2}}
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num1:'',
            num2:'',
        },
        methods:{
            handel:function () {
                this.num1 = this.num1 +13;
            },
            handel2:function () {
                this.num2 = this.num2 +13;
            }
        }
    })
</script>

.trim：去掉開始和結尾的空格

<input type="text" v-model.trim="num2">

demo

<div id="app">
    <div>
        <input type="text" v-model="num1">
        "{{num1}}"
    </div>
    <div>
        <input type="text" v-model.trim="num2">
        "{{num2}}"
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num1:'',
            num2:'',
        }
    })
</script>

.lazy：將input事件切換爲chenge事件(綁定的數據不會隨時變化，會等到你的鼠標焦點離開輸入框同步數據)

<input type="text" v-model.lazy="num2">

demo

<div id="app">
    <div>
        <input type="text" v-model="num1">
        "{{num1}}"
    </div>
    <div>
        <input type="text" v-model.lazy="num2">
        "{{num2}}"
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num1:'',
            num2:'',
        }
    })
</script>

2.自定義指令

內置指令不滿足需求

Vue.directive 註冊全局自定義指令

如果指令名稱爲駝峯形式fousA，使用是需寫爲v-focus-a

el：指令所綁定的元素

// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
    // 當被綁定的元素插入到 DOM 中時……
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
});

帶參數形式

inserted:鉤子函數

el、binding:鉤子函數參數

// 註冊一個全局自定義指令 `v-focus2`
Vue.directive('focus2', {
    // 當被綁定的元素插入到 DOM 中時……
    inserted: function (el,binding) {
    	el.style.backgroundColor=binding.value;
    }
});

demo

<div id="app">
    <input type="text">
    焦點會自動選中下一個輸入框
    <input type="text" v-focus>
</div>
<script>
    // 註冊一個全局自定義指令 `v-focus`
    Vue.directive('focus', {
        // 當被綁定的元素插入到 DOM 中時……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    });
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>"
        }
    })
</script>

<div id="app2">
    設置背景顏色：
    <input type="text" v-focus2="collar">
</div>
<script>
    // 註冊一個全局自定義指令 `v-focus2`
    Vue.directive('focus2', {
        // 當被綁定的元素插入到 DOM 中時……
        inserted: function (el,binding) {
            el.style.backgroundColor=binding.value;
        }
    });
    var vue = new Vue({
        el:"#app2",
        data:{
            collar:"red"
        }
    })
</script>
自定義指令局部指令

(在組件中可以接受一個 directives 的選項，只能自本組件中使用局部指令v-focus)

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

3. 計算屬性

模板中放入太多的邏輯會讓模板過重且難以維護 使用計算屬性可以讓模板更加的簡潔

用法（vue實例中添加一個computed）

computed: {
    reversedMessage: function ()
    	//將字符串分割
    	return this.msg.split ('').reverse().join('')
    }
}

demo

<div id="app">
    <input type="text" v-model="hello">
    {{changeHello}}
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"hello"
        },
        computed:{
            changeHello:function () {
                return this.hello.split("").reverse().join("");
            }
        }
    })
</script>

計算屬性與方法的區別

  • 計算屬性是基於他們的依賴進行緩存的

  • 方法不存在緩存

如果data中依賴的數據未發生改變，訪問兩次計算屬性是直接訪問緩存數據的

{{changeHello}}{{changeHello}}

4. 偵聽器

偵聽器的應用場景

數據變化時執行異步或開銷較大的操作

在這裏插入圖片描述

<div id="app">
    姓：<input v-model="firstName">
    名：<input v-model="lastName">
    <div>{{fullName}}</div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            firstName:"",
            lastName:"",
            fullName:"",
        },
        watch:{
            firstName: function () {
                this.fullName=this.firstName+this.lastName;
            },
            lastName: function () {
                this.fullName=this.firstName+this.lastName;
            }
        }
    })
</script>

5. 過濾器

格式化數據，比如將字符串格式化爲首字母大寫，將日期格式化爲指定的格式等

在這裏插入圖片描述

自定義過濾器

Vue.filter('過濾器名稱', function(value) {
	//過濾器邏輯
});

過濾器的使用

<div>{{msg | upper}}</div>  upper是相應過濾器
<div>{{msg | upper | lower}}</div>   級聯使用
<div v-bind:id=“id | formatId"></div>   屬性綁定時使用

局部過濾器

filters:{
	capitalize:function(){}
}

demo

<div id="app">
    <input type="text" v-model="name">
    <div>{{name | upper}}</div>
    <div>{{name | upper | lower}}</div>
    <div v-bind:class="name | upper"></div>
</div>
<script>
    Vue.filter('upper', function(value) {
        return value.charAt(0).toUpperCase()+value.slice(1);
    });
    Vue.filter('lower', function(value) {
        return value.charAt(0).toLowerCase()+value.slice(1);
    });
    var vue = new Vue({
        el:"#app",
        data:{
            name:"",
        },
    })
</script>

帶參數的過濾器

Vue.filter('過濾器名稱', function(value,arg1) {
	//value就是過濾器傳遞過來的參數
});

過濾器的使用

<div>{{date | format(‘yyyy-MM-dd')}}</div>

demo

<div id="app1">
    <input type="text" v-model="name">
    <div>{{name | upper(name)}}</div>
    <div>{{name | upper("111")}}</div>
</div>
<script>
    Vue.filter('upper', function(value,arg) {
        return value.charAt(0).toUpperCase()+value.slice(1)+arg;
    });
    var vue = new Vue({
        el:"#app1",
        data:{
            name:"",
        },
    })
</script>

6. 生命週期

掛載（初始化相關屬性） 創建實例

  1. beforeCreate：在實例初始化之後，數據觀測和事件配置之前被調用。

  2. created：在實例創建完成後被立即調用。

  3. beforeMount：在掛載開始之前被調用。

  4. mounted：el 被新創建的 vm .$el 替換，並掛載到實例上去之後調用該鉤子。（該函數被觸發，初始化模板完成，可以渲染後臺調用的數據）

更新（元素或組件的變更操作） 數據發生變化

  1. beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁之前。

  2. updated：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。

銷燬（銷燬相關屬性） 銷燬實例this.$destroy

  1. beforeDestroy：實例銷燬之前調用。

  2. destroyed：實例銷燬後調用。

在這裏插入圖片描述

<div id="app">
	<!--實例初始化完成調用前四個方法-->
    <div>{{msg}}</div>
    <!--點擊更新調用5,6個方法-->
    <button @click='update'>更新</button>
    <!--點擊銷燬調用7,8個方法-->
    <button @click='destroy'>銷燬</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue實例的生命週期
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '生命週期'
      },
      methods: {
        update: function(){
          this.msg = 'hello';
        },
        destroy: function(){
          this.$destroy();
        }
      },
      beforeCreate: function(){
        console.log('beforeCreate');
      },
      created: function(){
        console.log('created');
      },
      beforeMount: function(){
        console.log('beforeMount');
      },
      mounted: function(){
        console.log('mounted');
      },
      beforeUpdate: function(){
        console.log('beforeUpdate');
      },
      updated: function(){
        console.log('updated');
      },
      beforeDestroy: function(){
        console.log('beforeDestroy');
      },
      destroyed: function(){
        console.log('destroyed');
      }
    });
  </script>

END

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

關於uni-app中請求獲取到數據，但無法渲染，微信開發工具AppData中沒有數據的問題，this指向問題

從圖中可以看出，這個goodsList的數據是可以取到的，但是在AppData中沒有看到記錄，並且使用vue中的v-for指令循環數據時也沒有渲染。 這個問題主要是出在了請求成功的賦值部分。 錯誤示例： success(res)

Huathy-雨落江南，浮生若梦 2020-07-08 02:19:48

Vue路由（VueRouter）學習知識點總結

1、tag="li"把<outer-link轉變爲li標籤，active-class="active"bootstrap的樣式 <ul class="nav nav-pills"> <router-link to="/" tag="

yueyan890603 2020-07-05 05:57:14

elementUI事件回調函數傳默認參數和自定義參數的問題

1、如果只傳遞一個默認參數 $event只能傳遞check-change的第一個默認參數data。true爲自定義的參數。 2、 傳遞check-change的多個默認的參數 可以通過在回調函數裏定義自己的參數的形式來保留默認

过眼云烟2015 2020-07-04 21:16:18

vue-router 其他

項目前導 學習筆記 一、匹配 404 錯誤         在路由規則中，* 代表的是任意字符。所以只要在路由的最後添加一個 * 路由，那麼以後沒有匹配到的url都會被導入到這個視圖中。 <script> ... va

白菜执笔人 2020-07-04 05:53:30

Vue 視圖與事件

項目前導 學習筆記 一、視圖更新 1.1、觸發視圖更新         Vue 對一些方法進行了包裝和變異，以後數組通過這些方法進行數組更新，會觸發視圖的更新。（就是在頁面看到數據的變化） 直接賦值 <!DOCTYPE

白菜执笔人 2020-07-04 05:53:30

vue 計算屬性和監聽器

項目前導 學習筆記 一、計算屬性和監聽器         一般情況下屬性都是放到 data 中的，但是有些屬性可能是需要經過一些邏輯計算後才能得出來，那麼我們可以把這類屬性變成計算屬性，關鍵字爲：computed。 比如以下：

白菜执笔人 2020-07-04 05:53:30

vue-Cli 簡單介紹

項目前導 學習筆記 一、vue-cli 1.1、介紹         vue-cli 是和 vue 進行深度組合的工具，可以快速幫我們創建 vue 項目，並且把一些腳手架相關的代碼給我們創建好。一般使用 vue 開發項目，都是

白菜执笔人 2020-07-04 05:53:30

Vue-drag-resize 拖拽縮放插件使用簡單示例

字幕 <div id="lBox" style="background-color: #D7E9F5;" :style="{'height': parentHeight + 'px', 'widt

liusq_ 2020-07-03 15:28:44

前端學習之前端工程化(一):ES6模塊化和webpack打包

文章目錄一、前端工程化:1. 模塊化相關規範:1.1 模塊化概要:1.2 瀏覽器模塊化規範:1.3 服務端的模塊化規範:1.4 大一統的ES6規範:2. Node.js中通過babel體驗ES6模塊化:2.1 安裝與配置babel

浅弋、璃鱼 2020-07-01 08:00:28

Vue computed和watch區別

先貼代碼： 自己可以試試 <template> <div style="margin: 50px"> <span>xiaoming:{{xiaoming}}</span><br> <span>zhangs

yueyan890603 2020-06-29 20:12:00

Vue v-modle理解

我們都知道vue在input雙向綁定，但是這個雙向綁定的原理是什麼呢？ 其實v-model簡單說就是把:value=''和@input=''一起用。:value綁定展示，@input監聽input的值變化並複製 例如以下代碼： <i

yueyan890603 2020-06-29 20:12:00

Vue組件如何封裝，這些原則您需要了解一下！

什麼樣的內容需要封裝 一段代碼在項目中出現兩次就開始考慮是否應該進行封裝，出現三次就肯定要封裝，大到一個頁面，一個組件，小到一個function和一個css樣式。 封裝原則 以下將封裝出來的通用組件叫做子組件，引用通用組件的界面

不开花的玫瑰 2020-06-29 08:15:53

【Vue】引入第三方組件（Layui）

關於Vue引入第三方組件的方式有很多，但測試過很多方式都不可行。我的需求是在使用Vue腳手架搭建的項目中引入Layui這個前端框架，方式有兩種，第一種是使用npm導入，第二種拷貝Layui文件夾（js和css）。關於第一種方式，我

张育嘉 2020-06-26 03:21:27

Vue UI 學習筆記（基本操作）

Vue UI 學習筆記（基本操作）安裝Vue打開UI界面訪問 Vue 項目管理器查看在管理的項目創建新項目填寫項目名稱手動選擇配置選擇功能選擇配置成功後進入儀表板啓動項目訪問APP 安裝Vue Vue 安裝 打開UI界面 vue

笑虾 2020-06-24 21:25:55

Vue 學習筆記 - 深入瞭解組件

Vue 學習筆記 - 深入瞭解組件組件註冊組件名組件名大小寫全局註冊局部註冊模塊系統在模塊系統中局部註冊基礎組件的自動化全局註冊PropProp 的大小寫 (camelCase vs kebab-case)Prop 類型傳遞靜態或

笑虾 2020-06-24 21:25:55