1. 程式人生 > >Vue學習之不同組件之間的消息傳遞

Vue學習之不同組件之間的消息傳遞

自動 dev 代碼實現 元素 path checkout debugger content mod

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="vue.js"></script>
</head>
<body>

    <!-- watch監聽——只能監聽包含在watch中 定義 的變量
        watch: {
            msg: function (){
                //打印日誌
                console.log()

            }
        }
        computed能監聽在computed中所使用的所有變量
            computed: {
                msg1: function() {
                    return
                }
            }
        
        使用場景介紹,watch(一個變量/常量/數組,異步場景),computed(數據聯動)
    
        如何進行拆分
        1、不超過300行
        2、復用

        組件化帶來的問題:
        1、組件狀態管理(vuex)
        2、多組件的混合使用,多頁面,復雜業務(vue-router)
        3、組件間的傳參、消息、事件管理(props,emit/on,bus)

        vue代碼風格
        1、好習慣,少走坑
        2、寫出自己看得懂的代碼
        3、寫出別人看得懂的代碼

        vue-router
        1、<router-link to="/info"></router-link> 去連接到組件
        2、在router.js中定義組件
        import Info from './views/Info.vue';
        {
            path:'/info',
            name:'info',
            component:Info,
        }
        3、自己去定義組件
        <template>
            <div></div>
        </template>
        <script>
        </script>
        <style scoped>
        </style>

        vuex 
        1、單項數據流概念
        2、store.js
        {
            //組件的狀態
            state: {

            },
            //改變狀態的方法集
            mutations: {

            },
            actions: {

            }
        }
        https://www.imooc.com/video/18564

        vue調式方法,瀏覽器檢查元素進入到console
        1、console.log()
        2、alert('sd')
        3、debugger //程序會運行到這裏停止

        #### 開發工作流
        + 需求調研(確定需求)
        + 交互設計、邏輯設計、接口設計
        + 代碼實現(1/3的時間)、測試運行(1/10)、線上部署

        git簡介
        //創建空的倉庫,查看本地/遠程分支的
        git status
        //查看分支的情況
        git branch -a
        //創建新分支用於開發,名叫dev
        git checkout -b dev

        //把dev分支合並到master
        //首先切換到master
        git check master
        git merge dev
        //刪除本地分支
        git branch -D dev
        //刪除遠程分支
        git push origin :dev

        //版本回退
        git reset --hard head^

        //查看log
        git reflog
        //回退到制定版本
        git reset --hard reglog的id

        打包部署
        cd 目錄
        npm build 自動打包,運行完形成dist文件夾,把此文件夾放到服務器就可以訪問了
        

    -->

    <!-- 此為父組件模板 -->
    <div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item
             v-for="(item, index) of list"
             :key="index"
             :content="item"
             :index="index"
             @delete="handleDelete"
            >
            </todo-item>
        </ul>
    </div>
    
    <script>

        //子組件
        Vue.component('todo-item', {
            props:['content','index'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods:{
                handleClick: function() {
                    //向外觸發一個事件
                    this.$emit('delete', this.index)
                }
            }
        })

        // var TodoItem = {
        //     template: '<li>item</li>'
        // }

        //父組件
        new Vue({
            el:"#root",
            // components:{
            //     'todo-item': TodoItem
            // },
            data:{
                inputValue: 'hello',
                list: []
            },
            methods: {
                handleSubmit: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleDelete: function(index){
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>

Vue學習之不同組件之間的消息傳遞