組價件化開發(fā)
組件
- 組件就是一個自定義的html標(biāo)簽玉工，通過組件名作為自定義標(biāo)簽名
組件注冊
- 全局組件
- 全局祖冊設(shè)置在根實例注冊之前
Vue.component('組件名',{
/*
選項內(nèi)容
*/
template: '<div>這是全局祖冊的組件</div>'
});
-
選項內(nèi)容
- template選項
- 設(shè)置組件的結(jié)構(gòu)拼窥，最終被引入根實例或其他組件中
- 只能有一個根元素
- data選項 必須是一個函數(shù)，return返回數(shù)據(jù)
- template選項
-
局部組件
new Vue ({ ... components: { 'my-con':{ template : '#tmp', data(){ return { title : '標(biāo)題' } } } } })
組件通信
組件間數(shù)據(jù)傳遞叫組件通信
-
父組件傳遞給子組件
- 通過子組件的props選項接收父組件的傳值
- 父子組件間的所以props都是單向下行綁定的
- props屬性的命名規(guī)則：
- 建議使用camelCase 采用kebab-case進行綁定
<html> <div id="app"> <h1>我是標(biāo)題</h1> <my-con :title="title" :content="content"></my-con> </div> </html> <script> new Vue({ ... data : { title: '我是標(biāo)題', content:'我是內(nèi)容哈哈哈' }, components: { 'my-con':{ template : ` <div> <h2>{{title}}</h2> <p>{{content}}</p> </div>`, props: ['title','content'] } } }); </script> -
子組件傳遞給父組件
- 通過事件向父組件傳值
<html> <div id="app"> <product-item v-for="product in products" :title="product.title" :key="product.id" @count-change="totalCount+=$event"></product-item> </div> </html> <script> Vue.component('product-item',{ props : ['title'], template : ` <div> <span>商品名稱：{{title}}</span> <span>商品個數(shù): {{count}}</span> <button @click="countIns">+1</button> </div> `, data(){ return { count:0 } }, methods: { countIns(){ this.$emit('count-change',); this.count++; } } }) new Vue({ el : '#app', data : { products : [ {id:1,title:'蘋果1斤'} ], totalCount: 0 } }) </script> -
組件與v-model
- v-model用于組件時嗤疯，需要通過props與自定義事件實現(xiàn)
-
非父子組件的傳值
- 兄弟組件的傳值
-
其他的通信方式
- eventBus
- 發(fā)送數(shù)據(jù)的組件觸發(fā)bus事件，接收的組件給bus注冊對應(yīng)的事件
- 給bus注冊對應(yīng)的事件通過$on()操作
- $root 訪問當(dāng)前組件樹的根實例，不建議使用
-
chidren 用于便捷訪問父子組件 不建議使用
- $refs 獲取設(shè)置ref屬性的html標(biāo)簽或子組件
- 給子組件設(shè)置ref屬性亥鬓，渲染后通過$refs獲取子組件實例
組件插槽
- 插槽 slot
- 單個插槽
<body>
<div id="app">
<com-a>
<p>這是第一個組件的內(nèi)容</p>
</com-a>
</div>
</body>
<script>
Vue.componet('com-a',{
template:`
<div>
<h3>組件的標(biāo)題</h3>
<slot></slot>
</div>
`
})
</script>
- 可以在插槽中設(shè)置默認內(nèi)容，如果沒有傳入內(nèi)容默認就是顯示默認內(nèi)容
- 具名插槽
<body>
<div id="app">
<com-a>
<p slot="header">這是第一個組件的內(nèi)容</p>
<p slot="footer">我是腳步</p>
</com-a>
</div>
</body>
<script>
Vue.componet('com-a',{
template:`
<div>
<h3>組件的標(biāo)題</h3>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
`
})
</script>
內(nèi)置組件
- 動態(tài)組件
- 適用于多個組件頻繁切換的處理
- component用于將一個元組件渲染為動態(tài)組件域庇，以is屬性決定渲染哪個組件
- is屬性會每次切換組件時嵌戈，vue都會創(chuàng)建一個新的組件實例
- keep-live組件
- 用于保留組件狀態(tài)或避免組件重新渲染
- include可以是數(shù)組可以是正則可以是字符串
- exclude屬性用于指定哪些組件不會被緩存
- max屬性用于設(shè)置最大緩存?zhèn)€數(shù)
<body> <keep-live :include="/Com[ABC] /"> <component :is="currentCom"></compontent> </keep-live> </body> - 過渡組件
- 用于在vue插入，更新听皿，或者移除DOM時熟呛，提供多種不同方式的應(yīng)用過渡，動畫效果
- transition組件
- 條件渲染 v-if
- 條件展示 v-show
- 動態(tài)組件
- 組件根節(jié)點
- 進入的類名
- v-enter
- v-enter-to
- v-enter-active
- 離開的類名
- v-leave
- v-leave-to
- v-leave-active
- 設(shè)置了name的transition組件需要將v-改成name-
- 自定義過渡類名
- transition-group
- 用于給列表統(tǒng)一設(shè)置過渡動畫
vue Router
- vue router 是vue.js的官方插件尉姨，用來快速實現(xiàn)單頁應(yīng)用
單頁應(yīng)用
- 指的是網(wǎng)站的所以功能都在的單個頁面中進行呈現(xiàn)
- 具有代表性的有后臺管理系統(tǒng)庵朝，移動端，小程序等
- 優(yōu)點：
- 前后端分離，提高了開發(fā)效率
- 業(yè)務(wù)場景切換時偿短，局部更新結(jié)構(gòu)
- 用戶體驗好欣孤，更加接近本地應(yīng)用
- 缺點：
- 不利于seo
- 初次首屏加載速度比較慢
- 頁面復(fù)雜度比較高
前端路由
- 前端路由指的是url與內(nèi)容間的映射關(guān)系
- hash方式
- 通過haskchange事件監(jiān)聽hash變化，并進行網(wǎng)頁內(nèi)容更新
- location.hash.replace('#','');
const router = { routes: {}, route(path,callback){ this.routes[path] = callback; }, //初始化路由 init(){ const that = this; window.onhashchange = function(){ const hash = location.hash.replace('#',''); that.routes[hash] && this.routes[hash](); } } }; - history方式
- 采用的是html5提供的新功能實現(xiàn)前端路由
const router = { routes: {}, route(path,callback){ this.routes[path] = callback; }, go(path){ history.pushState(null,null,path){ this.routes[path] && this.routes[path](); } } };
vue router
- 基本使用
- 安裝
- 提供了 router-link router-view
- router-link 默認是a標(biāo)簽 可以通過tag設(shè)置
- router-view顯示路由匹配到的組件
- 命名視圖
- 如果導(dǎo)航后昔逗，希望同時在同級展示多個視圖(組件),這時就需要進行命名視圖
- 路由中通過components屬性進行設(shè)置不同視圖的對應(yīng)組件
- 編程式導(dǎo)航
- router.push()用來導(dǎo)航到一個新的url
- router-link的to屬性使用綁定方式也可屬性對象結(jié)構(gòu)
- 導(dǎo)航守衛(wèi)
router.beforeEach((to,from,next)=>{ console.log(to,from); next(); })
vue-cli
- 創(chuàng)建項目 vue create project-demo
- 啟動項目 npm run serve
- 目錄與文件
- public 預(yù)覽文件目錄
- src
- assets 靜態(tài)資源目錄
- components 項目組件目錄
- App.vue 根目錄
- main.js 入口文件
- 打包與部署
- 打包
- npm run build 打包
- 部署
- npm i -g serve 靜態(tài)文件服務(wù)器
- 在dist下通過serve直接開啟一個服務(wù)器
- 打包
