Vue學習之不同組件之間的消息傳遞
阿新 • • 發佈：2019-01-12
自動 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學習之不同組件之間的消息傳遞