（四）Vue入門 簡單的元件編寫

一、使用vs code進行編輯

1、在componets目錄上，新建乙個檔案login.vue，然後輸入template，script，style三件套，完成樣式如下：

#新增新的element匯入

import from 'element-ui'

vue.use(button)

#新element使用

vue.use(form)

vue.use(formitem)

vue.use(input)

3、切換到路由，開啟router目錄，編輯index.js，import login from 'component'，並新增path等

import vue from 'vue'

import vuerouter from 'vue-router'
//匯入剛才新建的login.vue，新舊版本要注意這裡的路徑，本文的路由是放到了router目錄下的
import login from '../components/login.vue'
vue.use(vuerouter)
const routes = [ ]
const router = new vuerouter()
export default router

每當儲存router等js檔案的時候，系統會自動編譯，如果有錯誤，頁面上會提示錯誤的位置，可根據錯誤找原因。

儲存後沒有問題，顯示：

Vue入門 元件通訊

先觸發子元件的mounted鉤子，再觸發父元件的mounted鉤子。在父元件的模版中對子元件標籤進行屬性繫結 在子元件中使用props屬性顯式地接收 若需要動態繫結屬性，則需使用v bind，或簡寫 message hello 使用字面量語法child message 1 此時繫結的是字串 1 若想...

Vue入門 元件基礎

元件 專案的開發,就是乙個元件樹,元件可以進行復用。元件的名字 1.html標籤不區分大小寫 2.不能跟系統標籤重名 3.遵循 w3c 規範中的自定義元件名 字母全小寫且必須包含乙個連字元 4.支援駝峰命名.myheader,但是在引用的時候,需要使用my header的方式元件支援兩種定義方式 全...

簡單的vue日曆元件

根據公司設計圖製作了乙個簡單的日曆元件，主要包括切換上一年 上一月 下一年 下一月，鎖定開始時間 結束時間等功能，以上就是效果圖。html child date0 child date1 js kim new vue date1 vue.component mcalendar methods els...