案例： 封裝乙個 loading 元件
loading是用來做什麼的？
基於使用者體驗
loading使用方式很多
第三方的ui庫/元件庫
自定義封裝
過程：建立乙個目錄資料夾，稱之為loading
在loading中建立乙個叫做component目錄，用來放模板
在loading目錄下建立乙個index.js
~
import vue from
'vue'
import tpl from
'./component/index.html'
const loading =)}
}export
default loading
v-on:click = 『aa』
v-on:yyb = 『aa』
v-on:before-enter: 『』
父子元件通訊
props接收
子父元件通訊
自定義事件
父元件將乙個方法直接通過單向資料繫結的形式傳遞給子元件，子元件通過props接收，然後直接使用
父元件可以將乙個物件型的資料傳遞給子元件，子元件修改了這個資料，父元件也同樣會修改
非父子元件通訊
使用ref鏈繫結
使用事件匯流排（bus匯流排）
多元件的狀態共享 vuex（ 目前不講， 後天）
多級元件通訊 ) $attr( 擴充套件
vue-router （ 目前不講， 明天）
cli是什麼？
cli是vue提供的乙個快速（自動化） 構建專案的乙個腳手架 ，類似於我們之前所學的 express-generator
cli的版本
目前最新 3.x
老版本是 2.x
cli的底層的自動化工具是： webpack
cli的安裝
npm/cnpm/yarn 都可以使用
$ yarn add @vue/cli global這個是cli3的版本
如果我們還想使用cli2的腳手架，那麼我們可以在安裝乙個包
$ yarn add @vue/cli-init global
如果有的同學安裝3失敗了，
那麼你可以使用cnpm繼續安裝 @vue/cli @vue/cli-init
1.$ cnpm i @vue/cli -g這個是cli3的版本
如果我們還想使用cli2的腳手架，那麼我們可以在安裝乙個包
1.$ cnpm i @vue/cli-init -g
如果還有問題：
那麼你就不要使用cli3了，你可以單獨安裝cli2
`$ cnpm i vue-cli -g`驗證是否安裝成功
命令列輸入：$ vue看是否有東西輸出，如果輸出命令提示，證明安裝成功
建立專案
cli3版本建立
1. 命令建立 【 推薦 】
$ vue create project
- 手動選擇配置
- 如果安裝node-sass出問題，如何解決：
- 先切換成npm源 nrm use npm
- 使用cnpm 安裝 cnpm i node-sass sass-loader -d
2. 圖形介面建立
`$ vue ui`
1. 標準版
$ vue init webpack project
2. 簡易版
$ vue init webpack-****** project
自定義元件，元件通訊
在專案開發時，採用元件化得思想開發，搭建專案時，src下有views目錄，一般放頁面級元件，在建立乙個comment目錄來放公共元件，比如頭部元件和底部元件，然後在建立乙個feature目錄來放功能元件，比如輪播元件，上拉載入更多元件，搜尋元件，tabbar元件等，元件提公升專案得開發效率，解決了傳...
uniapp自定義元件及通訊
文章目錄 隱藏 新建乙個 vue 檔案，根據以下格式定義元件.1 引用元件 import 元件名稱 from components 元件名.vue 2 註冊元件 export default,3 在試圖模板中使用元件 元件名稱 元件屬性 對應的值 元件直接引數傳遞方式和 vue 方法一樣 父元件 子...
自定義元件
myedittext 清除輸入的資料 setcompunddrawable 設定edittext ontouchevent ondraw 作用 繪製view顯示的內容,由系統自動呼叫 常用類 paint,canvas invalidate,postinvalidate 貪吃蛇原理 改變集合中的資料，...