Vue 基礎篇

時間 2019-12-07

標籤 vue 基礎简体版

原文原文鏈接

Vue 基礎篇

1、框架與庫的區別

JQ庫->DOM(DOM操做) + Ajax請求
art-template庫->模板引擎
框架 -> 全方位、功能齊全javascript
- 簡易的DOM體驗 + 發請求 + 模板引擎 + 路由功能 + ...
代碼上的不一樣：css
- 通常使用庫：調用某個函數，本身能夠把控庫的代碼
- 通常使用框架：其框架在幫咱們運行已編寫好的代碼html
  - 框架：初始化自身的一些行爲
  - 執行你所編寫的代碼
  - 施放一些資源

庫：小而精
框架：大而全 ( 框架包含了各類庫 )vue

2、起步

引包java
- 直接用 <script> 引入
- CDN
- NPM

npm install --yes
npm install vue --save ( npm install vue -S )

建立實例化對象 new Vue( options 對象 ) react
- optionsnpm
  - el : 目的地( 選擇器 )
  - data : 數據屬性 ( 既能夠是一個對象，也能夠是一個函數 )後端
    - 數據驅動試圖：數據發生改變時，視圖發生改變。
    - 除了數據屬性，vue 實例還暴露了一些有用的實例屬性和方法。他們都有前綴 $，如： $el，$data 。
  - template : 模板內容設計模式
    - 優先級：若是 template 中定義了內容，那麼有限加載 template；反之，加載 el 掛載的模板
vue的模板語法：app
- {{}} 雙大括號插值同 react 中的 {}
- {{ 表達式 }}
  - 對象 ( 不要連續三個大括號 {{ { key : value } }} )
  - 字符串 {{ ’XXX‘ }}
  - 判斷後的布爾值 {{ true }}
  - 三元表達式 {{ true ？ '正確' : '錯誤' }}
- 能夠用於頁面中簡單粗暴的調試
- 注意：必須在 data 這個函數中返回的對象中聲明
設計模式：MVC 與 MVVM
- MVC：Ｍodel( 數據模型 )、View( 視圖 )、Controller( 控制器 )
  - 數據不是主動展現到視圖上的，它是靠控制器取到 model 而後展現到 view。
- MVVM：Model、View、ViewModel
  - vue的設計模式爲MVVM，只關注的是視圖層

3、指令 ( v-xxx )

在vue中提供了一些對於頁面+數據的更爲方便的輸出，這些操做就叫作指令
- 好比html頁面中的屬性 <div v-xxx></div>
- 指令中封裝了一些DOM行爲，結合屬性做爲一個暗號，暗號有對應的值，根據不一樣的值，框架會進行相關的DOM操做的綁定。
經常使用指令
- v-text：元素的InnerText屬性，其實就是給元素的innerText賦值，必須是雙標籤，跟{{}}效果是同樣的，使用較少。
- v-html：元素的InnerHtml，其實就是給元素的innerHtml賦值。
- v-if：判斷是否插入這個元素，至關於對元素的銷燬和建立。appendChild()、removeChild()
- v-else-if
- v-else
- v-show：隱藏元素，若是肯定要隱藏，會給元素的style加上 display:none;，是基於css樣式的切換。
v-if 與 v-show 的區別 ( 官網解釋 )
- v-if是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當的被銷燬和重建。
- v-if也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。
- 相比之下，v-show就簡單的多——無論初始條件是什麼，元素總會被渲染。而且只是簡單的基於css進行顯/隱切換。
- 通常來講，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。所以，若是須要很是頻繁的切換，則使用v-show較好；若是在運行時條件不多改變，則使用v-if較好。
v-bind：綁定標籤上的屬性( 內置的屬性和自定義的屬性 )，v-bind:class="box"，簡寫 : 。

<div class="container" :class="{active: true}"></div>
// 渲染爲 DOM
<div class="container active"></div>

v-on：v-on:原生事件名 = '函數名'，簡寫 @

// html
<div class="container" @click="clickHandler"></div>
// js
methods:{
    clickHandler(e){
        console.log(this);
    }
}

v-for：v-for="item,index in arr"

<ul>
    <li v-for="item,index in list">
        {{index}}--{{item}}
    </li>
</ul>

v-model：數據雙向綁定
- 只會體如今UI空間中，只能應用在有value屬性的元素。

<input v-model="msg">
// 等同於
<input :value="msg" @input="msg = $event.target.value" />

那麼 v-model 其實就是 v-bind 和 v-on 的語法糖。

4、組件

1.局部組件

局部組件使用打油詩：聲子掛子用子

聲明子組件；父組件掛載子組件；父組件使用子組件。

// 局部組件的聲明
var App = {
    data(){
        return{

        }
    },
    template:`
        <div>我是入口組件</div>
    `
}
// vue實例
new Vue({
    el:"",
    data(){

    },
    // 掛載子組件
    components:{
        App
    },
    // 父組件直接可使用
    template:`<App />`
})

組件命名：
1.短橫線分隔命名：當引用組件時，也要使用短橫線分隔形式。( 如： <my-compnent-name> )

2.駝峯式命名：當引用組件時，可使用短橫線分隔形式或者駝峯形式。( 如： <my-compnent-name> 或 <MyCompnentName>)

[注]：直接在DOM( 即非字符串的模板 )中使用時只有短橫線分隔形式是有效的。

[建議]：命名時用駝峯形式，使用時用短橫線分隔形式。

2.全局組件

Vue.component("組件名", options)

// 全局組件聲明
// 第一個參數是組件的名字，第二個參數是options配置項
Vue.component("Vbtn", {
    template:`
        <button>按鈕</button>
    `
})
// 全局組件使用
var App = {
    template:`
        <div>
            ...
            <Vbtn />
        </div>
    `
}

5、組件通訊

1.經過 prop 往子組件通訊

1.Parent 2.Child
先給父組件中綁定自定義的屬性

Vue.component("Parent", {
    data(){
        return{
            msg:"我是父組件的數據"
        }
    },
    template:`
        <div>
            <p>我是父組件</p>
            <Child :childData="msg" />
        </div>
    `
})

在子組件中使用 props 接收父組件傳遞的數據
在子組件中任意使用

Vue.component("Child", {
    template:`
        <div>
            <p>我是子組件</p> 
            <input type="text" v-model="childData" />
        </div>
    `,
    props:["childData"]
})

2.經過事件向父組件發送消息

在父組件綁定自定義的事件
在子組件中觸發原生的事件，在函數中使用 $emit 觸發其父組件中自定義的事件
- $emit("自定義的事件名", "消息")

// Child
Vue.component("Child", {
    template:`
        <div>
            <p>我是子組件</p> 
            <input type="text" v-model="childData" @input="changeValue(childData)" />
        </div>
    `,
    props:["childData"],
    methods:{
        changeValue(val){
            // 自定義的事件必定要經過 this.$emit() 去觸發
            // $emit("自定義的事件名", "消息")
            this.$emit(childHandler, val)
        }
    }
})

// Parent
Vue.component("Parent", {
    data(){
        return{
            msg:"我是父組件的數據"
        }
    },
    template:`
        <div>
            <p>我是父組件</p>
            <Child :childData="msg" @childHandler="childHandlerFn" />
        </div>
    `,
    methods:{
        childHandlerFn(val){
            console.log(val);
        }
    }
})

6、插槽 slot

插槽：內置組件 slot，做爲承載分發內容的出口

/* 模擬 elementUI 按鈕組件的實現 */
// 子組件
Vue.component("Vbtn", {
    template:`
        <button class="default" :class="type">
            <slot>按鈕</slot>
        </button>
    `,
    props:["type"]
})

// 父組件
var App = {
    template:`
        <div>
            ...
            <Vbtn type="primary">登錄</Vbtn>
               <Vbtn type="success">註冊</Vbtn>
        </div>
    `
}

具名插槽

// 子組件
Vue.component("liItem", {
    template:`
        <li>
            第一個槽
            <slot name="idx-1"></slot>
            第二個槽
            <slot name="idx-2"></slot>
        </li>
    `
})

// 父組件
var App = {
    template:`
        <div>
            <ul>
                <liItem>
                    <h1 slot="idx-1">我是第一個槽</h1>
                    <h3 slot="idx-2">我是第二個槽</h3>
                </liItem>
            </ul>
        </div>
    `
}

7、過濾器

過濾器的做用：爲頁面中的數據進行添油加醋的功能
分類
- 局部過濾器
- 全局過濾器

/* 局部過濾器 */
// 1.聲明過濾器
// 2. {{ 數據 | 過濾器的名字 }}
var App = {
    data(){
        return{
            price:0,
            msg:"hello filter"
        }
    },
    template:`
        <div>
            <input type="number" v-model="price" />
            <!-- 使用過濾器 -->
            <h2>{{ price | myCurPrice }}</h2>
            <h3>{{ price | myReverse }}</h3>
        </div>
    `,
    filters:{
        // 聲明過濾器
        myCurPrice: function(val){
            return "￥" + val
        }
    }
}

/* 全局過濾器 */
// 字符串反轉過濾器
Vue.filter("myReverse", function(val){
    return val.split("").reverse().join("");
})

{{ 數據 | 過濾器的名字(能夠傳值) }}

例：
{{ price | myReverse("這裏是傳入的值") }}

// 其中 arg 就是傳入的值

Vue.filter("myReverse", function(val, arg){
return val.split("").reverse().join("");
})

8、watch 監聽

watch 監聽的是單個屬性
基本的數據類型 -- 簡單監視

複雜的數據類型 -- 深度監視

監聽簡單數據類型

new Vue({
    el:"",
    data(){
        return{
            msg : ''
        }
    },
    watch:{
        msg: function(newVal, oldVal){
            console.log(newVal, oldVal);
        }
    }
})

監聽複雜數據類型 obj, arr, 等 -- 深度監視

new Vue({
    el:"",
    data(){
        return{
            userList : [{name:"jack"}]
        }
    },
    watch:{
        userList: {
            deep:true, // 深度監視
            handler: function(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        }
    }
})

9、計算屬性

計算屬性 getter

// html
<img :src="getCurSrc" />
<ul>
    <li v-for="item,index in dataList" @click="clickHandler(index)" :class="{active: curIdx == index}">{{ index }}</li>
</ul>

// js
new Vue({
    el:"",
    data(){
        return{
            dataList:[{imgsrc:'1'},{imgsrc:'2'},{imgsrc:'3'}],
            curIdx : 0
        }
    },
    computed:{
        // 計算屬性默認只有 getter
        getCurSrc: function(){
            return this.dataList[this.curIdx].imgsrc
        }
    },
    methods:{
        clickHandler(index){
            this.curIdx = index;
        }
    }
})

計算屬性 setter

// js
new Vue({
    computed:{
        getCurSrc: {
            set: function(newVal){
                console.log(newVal);
                this.curIdx = newVal;
            },
            get: function(){
                return this.dataList[this.curIdx].imgsrc
            }
        }
    },
    methods:{
        clickHandler(index){
            // 點語法 set方法 和 get方法
            // getter 方法
            console.log(this.getCurSrc);
            // 調用set方法
            this.getCurSrc = index;
        }
    }
})