vue元件

2022-08-05 13:27:26 字數 1177 閱讀 8387

vue是元件化開發,整個專案由各種元件組成

什麼是元件?

每個page就是一個元件(註冊元件、登入元件、商品列表元件)

頁面的組成部分(輪播圖、選項卡、下拉選單...)

一個元件就是一個vue例項

根例項(new vue()) 其實根例項就是根元件

元件的組成:

data

methods

computed

watch

template 模板

鉤子函式

...

註冊元件
vue.component(元件名,

},methods,

template:'html',

...})

元件的使用
 my-button>

使用元件的時候 會建立vue例項

類似於 html 自定義元素

每個元件都有獨立的作用域
 my-button>

my-button>

這兩個例項的作用域是獨立的

元件的模板
1.模板字串

2.內聯模板 inline-template 不推薦使用

3.x-template

4.單檔案元件(最優)

5.render 渲染函式 代替 template

注意模板內 必須有個根元素

全域性元件和區域性元件
vue.component(元件,  {})  全域性元件  在哪都可用

//vue例項中

, '元件名': {},

'元件名': {}

}}

元件之間的互相通訊

通過prop向子元件傳遞資料

vue.component('child', }'

})

通過事件向父級元件傳送訊息

vue.component('button-counter', }',

data: function ()

},methods:

},})new vue(,

methods:

}})

vue vue resource

vue resource是一個非常輕量的用於處理http請求的外掛,它提供了兩種方式來處理http請求 使用vue http或this http 使用vue resource或this resource 這兩種方式本質上沒有什麼區別,閱讀vue resource的原始碼,你可以發現第2種方式是基於第1...

vue vue router

本地放一份完整的選單資料 通過後臺返回角色的選單列表 兩者對比 篩選需要顯示的選單資料繫結 這裡有個問題就是路由vue例項初始化就生成了 載入的全部 人為輸入地址是可以訪問到角色許可權以外的資料 所以還要加路由構子router beforeeach 去做判斷哪些是角色許可權以內的路由 1 給router...

Vue Vue指令

v cloak是解決解決插值表示式的閃爍問題 。 給插值表示式的元素加上v cloak 為v cloak定義樣式 v cloak 用法 v text和插值表示式的相同與區別 如果需要將msg以html的形式輸出,需要使用v html,v html也會覆蓋掉元素中原本的內容 例如 msg v bind...