Vue學習之不同元件之間的訊息傳遞
阿新 • • 發佈：2019-01-11
<!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>