VUE之組件

昨日回顧

"""
一、v-model完成表單指令，簡單的控制value，單選框中的使用，單獨複選框的使用以及複選框中的使用
    <input type="password" v-model="控制value的變量" />

二、瞭解：斗篷指令解決頁面閃爍
    v-cloak =>  [v-cloak] {display:none} => 加載vue就會清除v-cloak屬性

三、條件指令v-if與v-show區別，v-if家族成員以及上分支會成立會屏蔽下分支的工做機制
    v-if不渲染隱藏 | v-show以display:none渲染隱藏
    v-if | v-else-if | v-else

四、循環指令v-for如何循環渲染字符串、數組、字典，以及須要嵌套循環渲染賦值結構
    v-for="v in str"  v-for="（v,i) in str"
    v-for="v in arr"  v-for="（v,i) in arr"
    v-for="v in dic"  v-for="（v,k) in dic"  v-for="（v,k,i) in dic"
    [{},{}] {a:[]} [str1,str2]

五、瞭解：delimiters實例成員解決插值表達式符號衝突
    delimiters: ['{{', '}}']

六、計算屬性(方法屬性)在computed中聲明，方法內部變量會被監聽，值來源於方法返回值
    computed: {
        methodAttr() {
            // 內部出現的變量都會被監聽，發生值更新會回調該方法
            return '方法屬性的值'
        }
    }
    
七、監聽watch能夠設置數據的監聽方法，在監聽屬性更新時，完成特定邏輯
    watch: {
        attr() {
            // attr屬性被監聽，發生值更新會回調該方法
        }
    }
    
八、重點：組件的概念，組件就是vue實例(對象)
    <div id="app">
        <tag />
        <tag />
    </div>
    
    let tag = {
        template: '<p>子組件</p>'
    }
    
    new Vue({
        el: '#app',
        components: {
            tag,
        }
    })

"""

重點

子組件

let tag = {
    template: `...`,
    data() {
        return {
            // 數據...
        }
    }
}
// 在哪一個組件模板中出現的屬性變量和方法變量，都由當前所屬組件本身提供

父傳子

<div id="app">
    <tag :sub_msg="msg" />
</div>
    
<script>
let tag = {
    props: ['sub_msg']   //屬性的反射機制
    template: `<div>{{ sub_msg }}</div>`,
}

new Vue({
    el: '#app',
    components: {
        tag,
    },
    data: {
        msg: '父級數據'
    }
})
</script>

子傳父(瞭解)

<div id="app">
    <h1> {{ title }} </h1>
    <!-- 組件標籤不能添加系統事件，只能添加自定義事件，自定義事件在組件內部經過$emit主動觸發 -->
    <tag @self_action="changeTitle"/>
</div>
    
<script>
    let tag = {
        template: `
        <div>
            <input v-model="sub_title" />
        </div>
        `,
        data() {
            return {
                sub_title: ''
            }
        },
        watch: {
            // 監聽sub_title屬性，值一改變就會觸發
            sub_title() {
                // 將sub_title與父級的title創建關聯
                // 激活(觸發)self_action自定義事件
                this.$emit('self_action', this.sub_title)
            }
        }
    };

    new Vue({
        el: '#app',
        components: {
            tag,
        },
        data: {
            title: '父級初始標題'
        },
        methods: {
            changeTitle(sub_title) {
                this.title = sub_title ? sub_title : '父級初始標題';
            }
        }
    })
</script>

知識點總結

"""
一、能夠用來複用的子組件，數據data須要作局部化處理，當組件被複用時，數據會相互獨立
二、將父組件的數據傳遞給子組件，在渲染子組件標籤時，給自定義屬性設置父級數據，在子級內部用自定義屬性拿父級數據
三、將子組件的數據傳遞給父組件，子組件須要主動觸發$emit自定義事件攜帶出數據，父級實現自定義事件方法，就能夠接收到子級數據
四、搭建vue環境須要依賴node環境，以及用npm包管理器安裝vue腳手架cli（npm能夠換源爲cnpm）
五、經過 vue create 項目 來建立前臺項目，選擇配置好項目所需的依賴
六、用pycharm來配置vue項目啓動
七、屬性vue項目目錄結構，以及基本的各類原理：項目入口從main.js開始
"""

做業

"""
一、按照上方 知識點總結 模塊，總結今天所學知識點；
二、有如下廣告數據（實際數據命名能夠略作調整）
ad_data = {
    tv: [
        {img: 'img/tv/001.png', title: 'tv1'},
        {img: 'img/tv/002.png', title: 'tv2'},
        {img: 'img/tv/003.png', title: 'tv3'},
        {img: 'img/tv/004.png', title: 'tv4'},
    ],
    phone: [
        {img: 'img/phone/001.png', title: 'phone1'},
        {img: 'img/phone/002.png', title: 'phone2'},
        {img: 'img/phone/003.png', title: 'phone3'},
        {img: 'img/phone/004.png', title: 'phone4'},
    ]
}

i) 有兩個大標題，電視和手機，點擊對應的標題，渲染對應的數據
ii) 一個字典做爲一個顯示單位，定義一個子組件進行渲染（涉及父子組件傳參）

三、在第2題基礎上，頁面最下方有一個 h2 標籤，用來渲染用戶當前選擇的廣告（點擊哪一個廣告就是選中哪一個廣告）
i）當沒有點擊任何廣告，h2 標籤顯示：未選中任何廣告
ii）當點擊其中一個廣告，如tv1，h2 標籤顯示：tv1被選中
"""