天天看點
傳回

一周精通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>
緩存 javascript 索引 Python java調用python代碼 java python代碼 java python通過 python使用java java python開發
上一篇: 【譯】Apache Spark 資料模組化之時間次元（二）
下一篇: 開發者必備Mysql資料庫的常用指令前言

繼續閱讀