Vue试炼3组件化
組件化
在大型應用開發的時候，頁面可以劃分成很多部分。往往不同的頁面，也會有相同的部分。例如可能會有相同的頭部導航。
但是如果每個頁面都獨自開發，這無疑增加了我們開發的成本。所以我們會把頁面的不同部分拆分成獨立的組件，然后在不同頁面就可以共享這些組件，避免重復開發。
全局組件
Vue的component方法來定義一個全局組件。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>COMPONENT</title> </head> <body> <div id="app"><counter></counter> </div> <script src="node_modules/vue/dist/vue.js"></script> <script>Vue.component("counter",{template:'<button @click="count++">添加關注{{count}}</button>',data(){return {count:0}}})new Vue({el:"#app",}) </script> </body> </html>
如果現在頁面中顯示多個控件需要用div包裹，否則只能顯示一個控件
- 組件其實也是一個Vue實例，因此它在定義時也會接收：data、methods、生命周期函數等
- 不同的是組件不會與頁面的元素綁定，否則就無法復用了，因此沒有el屬性。
- 但是組件渲染需要html模板，所以增加了template屬性，值就是HTML模板
- 全局組件定義完畢，任何vue實例都可以直接在HTML中通過組件名稱來使用組件了。
- data必須是一個函數，不再是一個對象。
局部組件
全局注冊，就意味著即便以后你不再使用這個組件，它依然會隨著Vue的加載而加載。
因此，對于一些并不頻繁使用的組件，我們會采用局部注冊。
- components就是當前vue對象子組件集合。
- 其key就是子組件名稱
- 其值就是組件對象名
- 效果與剛才的全局注冊是類似的，不同的是，這個counter組件只能在當前的Vue實例中使用
props（父向子傳遞）
父組件使用子組件，并自定義了title屬性：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>COMPONENT</title> </head> <body> <div id="app"><props_component content="這就是我說的Content父傳遞子"></props_component><t_list :items="users"></t_list> </div> <script src="node_modules/vue/dist/vue.js"></script> <script>Vue.component("props_component",{template:'<h1>{{content}}</h1>',props:["content"]})const props_list = {template:'\<ul>\<li v-for="item in items">{{item.name}}</li>\</ul>\',props: {items:{type:Array,default:[],required:true}}}new Vue({el: "#app",components:{t_list:props_list,},data:{users:[{id:1,name:"趙四"},{id:2,name:"王五"},{id:3,name:"老六"},{id:4,name:"大佬"}]}}) </script> </body> </html>- 這個子組件可以對 items 進行迭代，并輸出到頁面。
- <t_list :items=“users”></t_list> 接受時需要 在前面加:號
- props：定義需要從父組件中接收的屬性
- items：是要接收的屬性名稱
- type：限定父組件傳遞來的必須是數組
- default：默認值
- required：是否必須
$emit 子向父的通信
實例
<!DOCTYPE html> <html lang="en" > <head><meta charset="UTF-8"><title>EMIT</title> </head> <body> <div id="app"><h1>number:{{number}}</h1><emit_template :num="number" v-on:plus="add_plus" @reduce="min_reduce"></emit_template> </div> <script src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript">const emit_template = {template: "<div>" +"<button v-on:click='plus'>Add</button>" +"<button @click='reduce'>min</button>" +"</div>",props: ['num'],// count是從父組件獲取的。methods: {plus() {this.$emit("plus")},reduce() {this.$emit("reduce")}}}new Vue({el: "#app",data: {number: 0},methods: {add_plus() {this.number++;},min_reduce() {this.number--;}},components: {emit_template: emit_template}}) </script> </body> </html>
通過v-on指令將父組件的函數綁定到子組件
在子組件中定義函數，函數的具體實現調用父組件的實現，并在子組件中調用這些函數。當子組件中按鈕被點擊時，調用綁定的函數
vue提供了一個內置的this.$emit()函數，用來調用父組件綁定的函數
路由vue-router
vue-router簡介和安裝
使用vue-router和vue可以非常方便的實現 復雜單頁應用的動態路由功能。
官網：https://router.vuejs.org/zh-cn/
使用npm安裝：npm install vue-router --save
在index.html中引入依賴：
Login.js
const loginForm = {template:'\<div>\<h2>登錄頁</h2> \用戶名：<input type="text"><br/>\密碼：<input type="password"><br/>\</div>\' }Register.js
const registerForm = {template:'\<div>\<h2>注冊頁</h2> \用 戶 名：<input type="text"><br/>\密  碼：<input type="password"><br/>\確認密碼：<input type="password"><br/>\</div>\' }在父組件中引用
<div id="app"><span>登錄</span><span>注冊</span><hr/><div><!--<loginForm></loginForm>--><!--疑問：為什么不采用上面的寫法？由于html是大小寫不敏感的，如果采用上面的寫法，則被認為是<loginform></loginform>所以，如果是駝峰形式的組件，需要把駝峰轉化為“-”的形式--><login-form></login-form><register-form></register-form></div> </div> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script src="user/login.js"></script> <script src="user/register.js"></script> <script type="text/javascript">var vm = new Vue({el: "#app",components: {loginForm,registerForm}}) </script>總結
- 上一篇： Java脚本：评委打分
- 下一篇： 大卫 异星觉醒 机器人_《异星觉醒》披着