vuejs教程3 -尊龙游戏旗舰厅官网
目录
- 13、vue实例
- 13.1 动态组件（tab切换、简化版留言板）
- 13.2 使用vue开发todolist
- 14、vue cli
- 14.1 使用vue-cli开发todolist
接着vuejs教程2。
13.1 动态组件（tab切换、简化版留言板）
- 参考：https://vuejs.bootcss.com/v2/guide/components.html
- 参考：vuejs-component标签
举例1（component标签：是vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件）：
1 doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 7 <meta http-equiv="content-language" content="zh-cn" /> 8 <title>my test pagetitle> 9 <script src="https://unpkg.com/vue">script> 10 <style> 11 .tab-button { 12 padding: 6px 10px; 13 border-top-left-radius: 3px; 14 border-top-right-radius: 3px; 15 border: 1px solid #ccc; 16 cursor: pointer; 17 background: #f0f0f0; 18 margin-bottom: -1px; 19 margin-right: -1px; 20 } 21 22 .tab-button:hover { 23 background: #e0e0e0; 24 } 25 26 .tab-button.active { 27 background: #e0e0e0; 28 } 29 30 .tab { 31 border: 1px solid #ccc; 32 padding: 10px; 33 } 34 style> 35 head> 36 37 <body> 38 <div id="app"> 39 <button v-for="(tab, index) in tabs" v-bind:key="index" v-bind:class="{'tab-button': current_tab === tab}" 40 @click="current_tab = tab">{{ tab }}button> 41 42 <component :is="currenttabcomponent" class="tab">component> 43 div> 44 45 <script> 46 vue.component('tab-home', { 47 template: 'home component
'
48 })
49 vue.component('tab-posts', {
50 template: 'posts component
'
51 })
52 vue.component('tab-archive', {
53 template: 'archive component
'
54 })
55
56 var app = new vue({
57 el: '#app',
58 data: {
59 current_tab: 'home',
60 tabs: ['home', 'posts', 'archive']
61 },
62 computed: {
63 currenttabcomponent() {
64 return 'tab-' this.current_tab.tolowercase();
65 }
66 },
67 })
68 script>
69 body>
70
71 html> 输出结果：
13.2 使用vue开发todolist
举例1：
1 doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>my test pagetitle> 7 <script src="https://cdn.jsdelivr.net/npm/vue">script> 8 head> 9 10 <body> 11 <div id="app"> 12 <input type="text" placeholder="请输入事项" v-model="msg"> 13 <button @click="handlesubmitbtn">提交button> 14 15 <todo-list v-for="(item, index) in list" :todo_item="item" :todo_index="index" 16 @click-sub-event="handledelbtn($event)">todo-list> 17 div> 18 19 <script> 20 vue.component("todo-list", { 21 props: ['todo_item', 'todo_index'], 22 template: ` 23 <ul> 24 <li> 25 {{ todo_index }}. {{ todo_item }} 26 <button @click=handleclicksubcomp(todo_index)>x</button> 27 </li> 28 </ul> 29 `, 30 data: function () { 31 return { 32 33 } 34 }, 35 methods: { 36 handleclicksubcomp: function (index) { 37 this.$emit("click-sub-event", index); 38 } 39 } 40 }); 41 42 var app = new vue({ 43 el: '#app', 44 data: { 45 msg: "", 46 list: [], 47 }, 48 methods: { 49 handlesubmitbtn: function () { 50 this.list.push(this.msg); 51 this.msg = ''; 52 }, 53 handledelbtn: function (index) { 54 this.list.splice(index, 1); 55 console.log(index); 56 } 57 } 58 }) 59 script> 60 body> 61 62 html>输出结果：
举例2（结合 非父子组件之前传值（bus/总线/发布订阅模式/观察者模式））：
1 doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>my test pagetitle> 7 <script src="https://cdn.jsdelivr.net/npm/vue">script> 8 head> 9 10 <body> 11 <div id="app"> 12 <todo-list-header>todo-list-header> 13 <todo-list-body>todo-list-body> 14 div> 15 16 <script> 17 vue.prototype.bus = new vue(); 18 19 vue.component("todo-list-header", { 20 props: [], 21 template: ` 22 <div> 23 <input type="text" placeholder="请输入事项" v-model="msg"> 24 <button @click="handlesubmitbtn">提交</button> 25 </div> 26 `, 27 data: function () { 28 return { 29 index: 0, 30 msg: "", 31 } 32 }, 33 methods: { 34 handlesubmitbtn: function () { 35 this.bus.$emit('click-submit-event', this.msg, this.index); 36 this.msg = ''; 37 this.index; 38 }, 39 }, 40 mounted: function () { 41 42 } 43 }); 44 45 vue.component("todo-list-body", { 46 props: [], 47 template: ` 48 <ul> 49 <li v-for="(item, idx) in list"> 50 {{ item }} 51 <button @click=handledelbtn(idx)>x</button> 52 </li> 53 </ul> 54 `, 55 data: function () { 56 return { 57 index: '', 58 list: [], 59 } 60 }, 61 methods: { 62 handledelbtn: function (idx) { 63 this.bus.$emit("click-delete-event", idx); 64 } 65 }, 66 mounted: function () { 67 var this_ = this; 68 69 this.bus.$on('click-submit-event', function (msg, idx) { 70 this_.list.push(msg); 71 this_.index = idx; 72 }); 73 74 this.bus.$on('click-delete-event', function (idx) { 75 this_.list.splice(idx, 1); 76 console.log(idx); 77 }); 78 } 79 }); 80 81 var app = new vue({ 82 el: '#app', 83 data: { 84 85 }, 86 methods: { 87 88 } 89 }) 90 script> 91 body> 92 93 html>输出结果：
举例3（在上述例子基础上进行简化（优化））：
1 doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>my test pagetitle> 7 <script src="https://cdn.jsdelivr.net/npm/vue">script> 8 head> 9 10 <body> 11 <div id="app"> 12 <todo-list-header>todo-list-header> 13 <todo-list-body>todo-list-body> 14 div> 15 16 <script> 17 vue.prototype.bus = new vue(); 18 19 vue.component("todo-list-header", { 20 props: [], 21 template: ` 22 <div> 23 <input type="text" placeholder="请输入事项" v-model="msg"> 24 <button @click="handlesubmitbtn">提交</button> 25 </div> 26 `, 27 data: function () { 28 return { 29 index: 0, 30 msg: "", 31 } 32 }, 33 methods: { 34 handlesubmitbtn: function () { 35 this.bus.$emit('click-submit-event', this.msg, this.index); 36 this.msg = ''; 37 this.index; 38 }, 39 }, 40 mounted: function () { 41 42 } 43 }); 44 45 vue.component("todo-list-body", { 46 props: [], 47 template: ` 48 <ul> 49 <li v-for="(item, idx) in list"> 50 {{ item }} 51 <button @click=handledelbtn(idx)>x</button> 52 </li> 53 </ul> 54 `, 55 data: function () { 56 return { 57 index: '', 58 list: [], 59 } 60 }, 61 methods: { 62 handledelbtn: function (idx) { 63 this.list.splice(idx, 1); 64 console.log(idx); 65 } 66 }, 67 mounted: function () { 68 var this_ = this; 69 70 this.bus.$on('click-submit-event', function (msg, idx) { 71 this_.list.push(msg); 72 this_.index = idx; 73 }); 74 } 75 }); 76 77 var app = new vue({ 78 el: '#app', 79 data: { 80 81 }, 82 methods: { 83 84 } 85 }) 86 script> 87 body> 88 89 html>输出结果：同上。
14.1 使用vue-cli开发todolist
转载于:https://www.cnblogs.com/zyjhandsome/p/11179701.html
总结
- 上一篇：
- 下一篇：