一週精通Vue(一)

new Vue(el, data, methods, computed, filters, components, 生命週期函數)

  • el:

    掛載頁面元素
  • data:

    數據
  • methods:

    定義函數
  • computed:

    計算屬性  這裏面定義的是方法  但是調用時一般是以變量的形式去調用的
    這個要比 methods的方法效率更高 方法循環時會每次調用 而這個會有一個緩存 只會調用一次
  • filters:

    定義過濾器函數
  • components:

    局部組件註冊
    
    

vue的生命週期(創建->消亡)

  • beforeCreate
  • created:

    一般情況下會在這裏面做網絡請求
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

模板語法

  • 插值語法:

    {{ massage }}  {{}}內不僅可以寫變量  也可以寫表達式
    

vue指令

插值指令

  • v-once:

    只是一個指令 沒有=""  內容只能被賦值一次 當數據改變時並不會改變
  • v-html:

    按照html語法加載數據
  • v-text:

    將數據加載到標籤 並且覆蓋標籤內的所有內容
  • v-pre:

    將所有的內容原封不動的展示出來 可以使模板插值語法失效 類似python的原始字符串
  • v-cloak:

    這個屬性類似於display:none vue不解析就不顯示模板 在vue解析之前有這個屬性,解析之後將這個屬性刪除

動態綁定指令

  • v-bind:
    動態綁定屬性 (v-bind:src)可以縮寫爲(:src) 可以使用任何屬性 :src='' 內容支持變量、數組、對象、方法、以及表達式
  • v-on:
    綁定事件 (v-on:click)可以縮寫爲(@click) 支持所有事件

    • $event:

      @click(prm, $event)  $event默認寫法 接收瀏覽器產生的event對象
    • stop修飾符:

      @click.stop 可以阻止事件冒泡
    • prevent修飾符:

      @click.prevent 阻止submit提交
    • 鍵盤修飾符:

      @keyup.enter  監聽回車建做事件操作  enter表示回車 這裏可以更改爲其他鍵 
    • once修飾符:

      @click.once  事件只能被觸發一次  這裏防止重複提交很有效
  • v-for:
    循環操作 在遍歷對象時 如果只接受一個值 默認爲value

    • 組件的key屬性

      在循環是可以選擇綁定一個key  但是儘量不要綁定index  因爲index
      是每次變化的 如果往list裏插入一個值 那麼所有的 index會重新排序做改變
      而綁定item內的數據 則不受排序影響 所以性能更好 一般而言key會綁定一個唯一值
      
  • v-if:
    條件成立時渲染代碼快
  • v-else:
    else代碼塊
  • v-else-if:
    條件成立時渲染代碼快
  • v-show:
    條件成立時顯示代碼塊 否則隱藏代碼塊 和display:none相同 而v-if是直接不創建DOM 這裏會始終有DOM只是不顯示
  • Vue.set(要修改的對象, 索引值, 要修改的值)
  • v-model:
    雙向綁定 用來同步更新 默認爲value屬性

    • lazy修飾符:

      懶加載 不會實時的去雙向綁定更新 只有用戶回車或取消焦點的時候進行更新
    • number修飾符:

      默認情況下雙向綁定的數據全部都是string類型 這裏可以指定綁定的類型
    • trim修飾符:

      自動去除字符串兩邊的空格
<h2>{{message}}</h2>
<!--v-model 的雙向綁定-->
<input type="text" v-model="message">

<!--雙向綁定也可以用另一種方式來實現-->
<input type="text" :value="message" :input="valueChange">
<script >
function valueChange(event){
    console.log("當輸入框內容被改變 input時間觸發, 通過瀏覽器產生的 event來獲取input內容");
    this.message = event.target.value;
}
</script>
<!--簡寫-->
<input type="text" :value="message" @input="message=$event.target.value">

虛擬DOM

渲染

  • key渲染

    通過標籤的key屬性  決定vue在更新DOM的時候是否重新加載DOM
    如果是相同的key則可以服用 不用重新加載DOM 但是DOM的屬性數據會變化
    如果是不相同則直接重新加載一個新的DOM
  • vue的響應式

    並不是所有的修改都是響應式的 例如List的操作 如果使用 list.push("hello") 頁面是響應式的
    若使用list[0] = 'hello' 此時數據已經改變但是 頁面不會進行響應式的修改
    

ES6

數組的方法

  • push方法
    向list最後插入一個值
  • pop方法
    從list最後取出一個值並刪除
  • shift方法
    從list取出第一個元素並刪除
  • unshift方法
    在list最前插入一個值
  • splice方法

    • 刪除元素

      如果是要刪除元素 第一個參數爲從第幾個開始  第二個參數傳入你要刪除幾個元素
      如果只傳第一個元素 則第一個參數下標的元素 後面的全部刪除
    • 插入元素

      第一個表示開始元素  第二個參數默認爲0 第三個以後的參數爲要插入的參數
    • 替換元素

      第一個表示參數開始,第二個參數表示截止,第3個以後的參數表示插入的參數
  • sort方法
    將list進行排序
  • reverse方法
    將list進行反轉
  • 高級字符串
    `` 可以識別換行符

function

  • function縮寫
add: function() {}
// 可以改寫爲 
add(){}
  • function不定長參數
   add(...param){}
   // ...表示可接受不定長的參數  此時param爲list類型  
   // 類似於python的  def add(*param)
  • for循環
// 普通for循環
for (let i = 0; i < 10; i++){
    console.log(list[i]);
}
// 索引for循環
for (let i in [1, 2, 3]){
    console.log(list[i])
}
// 增強for循環
for (let item of [1, 2, 3]){
    console.log(item)
}
  • 高階函數
// filter函數
const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let newList = numList.filter(function(n){
  return n >= 50
});
// map函數
let new2List = newList.map(function(n) {
  return n * 2
});
// reduce函數 對數組中所有內容進行彙總 第一個參數爲回調函數 第二個參數爲初始化的值
let totalCount = new2List.reduce(function(preValue, n){
// 初始化preValue是高階函數初始化的值 n是list中的元素 
// 每一次回調都會將 return的結果賦值給preValue
  return preValue + n
}, 0);
  • 箭頭函數
const numList = [10, 20, 100, 21, 50, 20, 332, 213, 2123];
let total = numList.filter(n => n <= 50).map(n => n * 2).reduce((pre, n) => pre + n, 0);
console.log(total);

組件化

  • 基本使用

    • 全局組件 全局組件表示註冊的組件可以在任何地方使用
    • 局部組件 創建的局部組件只能在掛載元素的內部使用
// 創建組件構造器(子組件)
const cpn1 = Vue.extend({
    template: `
            <div>
                <h2>cpn1標題</h2>
                <p>cpn1內容</p>
            </div>
            `
});

// 創建組件構造器(父組件)
const cpn = Vue.extend({
    // ``是高級字符串 可以換行
    template: `
            <div>
                <h2>cpn標題</h2>
                <p>cpn內容</p>
                <cpn1></cpn1>
            </div>
            `,
    // 這裏可以在組件構造器內註冊其他組件  這注冊的這個組件可以用在模板內
    components: {
        cpn1: cpn1
    }
});

// 註冊全局組件
Vue.component('my-dev', cpn);

// 註冊局部組件  vm可以看做是root組件
const vm = new Vue({
    el: '#app',
    data: {},
    methods:{},
    // 註冊局部組件
    component:{
        cpn: cpn
}
});


// 使用組件
// <my-dev></my-dev>
  • 組件註冊語法糖

    • 註冊 可以直接省略 extend 直接用對象進行替代
Vue.component('cpn1', {
    template: `
        <div>
            <h2>cpn1標題</h2>
            <p>cpn1內容</p>
        </div>
        `
});
  • 模板分離寫法

<!--通過id  進行選擇器給template屬性賦值 替代template中看起來很難受的字符串-->

<script type="text/x-template" id="cpn">
    <h3>標題</h3>
    <p>內容。。。</p>
</script>

<template id="cpn2">
    <h1>標題</h1>
</template>
<script>
    Vue.component('my-cpn', {
        template: "#cpn"
    });
</script>
  • 組件內容訪問Vue實例數據
    默認組件內部是不能直接訪問Vue實例內的數據內容的
    在組件的內部會有一個data屬性 而這個data屬性必須是一個函數 返回一個對象,對象內部保存着數據

    • 爲什麼組件內的data必須是一個函數?

      因爲組件在複用時 應用的data如果是一個對象的話 ,那麼每次引用都是同一個對象,當對這個
      對象作出更改的時候,所有用到該數據的地方都會被聯動修改,所以需要用函數返回一個對象 這代表這每一次
      複用組件都會去調用一次data函數 獲取一個新的data對象,這樣就能相互隔離,其實這裏是類似於深拷貝和淺拷貝的關係
      

組件之間的通信

  • props的用法(父組件向子組件傳遞)

    • props支持的數據類型
    1. String
    2. Number
    3. Boolean
    4. Array
    5. Object
    6. Date
    7. Function
    8. Symbol
    • 注意: 當定義分離模板時需要一個根組件 如果沒有根組件則不能正常解析
<!--子組件模板-->
<template id="cpn">
    <div>
        <p>{{c_movies}}</p>
        <h2>{{c_message}}</h2>
        <ul>
            <li v-for="item in c_movies"> {{item}}</li>
        </ul>
    </div>

</template>



<!--父組件模板-->
<div id="app">
    <!--    props數據來雙向綁定父組件中的數據-->
    <cpn :c_movies="movies" :c_message="message"></cpn>
</div>

<script>

    // 子組件
    const cpn = {
        template: "#cpn",
        // 父親組件向子組件傳遞數據 
        // 第一種 數組方式
        // props: ['c_movies', 'c_message'],

        // 第二種 對象方式
        props: {
            // 1.類型限制
            // c_movies: Array,
            // c_message: String,

            // 2.提供一些默認值
            c_message: {
                // 數據類型
                type: String,
                // 默認值
                default: '這個是消息數據',
                // 是否必選參數
                required: true,
            },
            c_movies: {
                type: Array,
                default: []
            }
        },
        data() {
            return {}
        }
    };

    // 父組件
    const vm = new Vue({
        el: "#app",
        data: {
            message: '信息',
            movies: ['海王', '海賊王', '慶餘年', '神話']
        },
        components: {
            cpn: cpn
        }
    });

</script>
  • this.$emit的用法(子組件向父組件傳遞事件)
<!--子組件模板-->
<template id="cpn">
    <div>
        <button v-for="item in categories" @click="bthClick(item)">
            {{item.name}}
        </button>
    </div>
</template>

<!--父組件模板-->
<div id="app">
    <!--監聽子組件事件-->
    <!--監聽到子組件事件後 如果綁定父組件的method若不傳item 則默認就是item 不是event-->
    <cpn @item_click="cpn_click"></cpn>
</div>

<script>

    // 子組件
    const cpn = {
        template: "#cpn",
        data() {
            return {
                categories: [
                    {id: '1', name: '熱門推薦'},
                    {id: '2', name: '手機數碼'},
                    {id: '3', name: '家用家電'},
                    {id: '4', name: '電腦辦公'},
                    {id: '5', name: '生活日用'},
                ]
            }
        },
        methods: {
            bthClick(item) {
                console.log(item);
                // 發射子組件的自定義事件到父組件  傳遞item參數
                this.$emit("item_click", item)
            }
        }
    };

    // 父組件
    const vm = new Vue({
        el: "#app",
        data: [],
        components: {
            cpn
        },
        methods: {
            // 接受item參數
            cpn_click(item) {
                console.log('監聽到了來自子組件的事件!');
                console.log(item);
            }
        }
    });


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