51

52

  <div id="app"><my-cpn></my-cpn></div><script src="../js/vue.js"></script><script>const cpnConstructor = Vue.extend({template: `<div id="app"><h2>龙门客栈</h2><p>大闹天宫</p><p>七十二变</p></div>`})Vue.component('my-cpn', cpnConstructor);const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,}})</script>

53

  <div id="app"><cpn></cpn></div><div id="app1"><cpn></cpn></div><script src="../js/vue.js"></script><script>const cpnConstructor = Vue.extend({template: `<div id="app"><h2>龙门客栈</h2><p>大闹天宫</p><p>七十二变</p></div>`})Vue.component('cpn', cpnConstructor);const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,}});const app1 = new Vue({el: '#app1'})</script>

  <div id="app"><cpn></cpn></div><div id="app1"><cpn></cpn></div><script src="../js/vue.js"></script><script>const cpnConstructor = Vue.extend({template: `<div id="app"><h2>龙门客栈</h2><p>大闹天宫</p><p>七十二变</p></div>`})// Vue.component('cpn', cpnConstructor);const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,},components: {cpn: cpnConstructor}});const app1 = new Vue({el: '#app1'})</script>

54

  <div id="app"><!-- <cpn1></cpn1> --><cpn2></cpn2></div><script src="../js/vue.js"></script><script>// const cpn = Vue.extend({})const cpnConstructor1 = Vue.extend({template: `<div id="app"><h2>龙门客栈</h2><p>大闹天宫</p><p>七十二变</p></div>`})const cpnConstructor2 = Vue.extend({template: `<div id="app"><h2>大鱼海棠</h2><cpn1></cpn1></div>`,components: {cpn1: cpnConstructor1}})// Vue.component('cpn', cpnConstructor);const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,},components: {// cpn1: cpnConstructor1,cpn2: cpnConstructor2}});</script>

55

全局

  <div id="app"><cpn1></cpn1></div><script src="../js/vue.js"></script><script>// const cpnConstructor1 = Vue.extend({//   template: `//   <div id="app">//     <h2>龙门客栈</h2>//   </div>//   `// })Vue.component('cpn1',{template: `<div id="app"><h2>龙门客栈</h2></div>`});const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,},// components: {//   cpn1: cpnConstructor1// }});</script>

局部

  <div id="app"><cpn1></cpn1></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,},components: {'cpn1': {template: `<div><h2>大鱼海棠</h2></div>`}}})</script>

56

  <div id="app"><cpn1></cpn1></div><script type="text/x-template" id="cpn"><div><h2>失落沙洲</h2></div></script><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,},components: {'cpn1': {template: '#cpn'}}})</script>

  <template id="cpn"><div><h2>失落沙洲</h2></div></template>

这样更简便

57

  <div id="app"><cpn1></cpn1></div><template id="cpn"><div><h2>{{title}}</h2></div></template><script src="../js/vue.js"></script><script>Vue.component('cpn1', {template: '#cpn',data() {return {title: '樱吹雪'}}})const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,}})</script>

###data是函数形式的，不能是对象；函数有作用域

  <div id="app"><cpn1></cpn1><cpn1></cpn1><cpn1></cpn1></div><template id="cpn"><div><h2>当前计数：{{counter}}</h2><button @click='increment'>+</button><button @click='decrement'>-</button></div></template><script src="../js/vue.js"></script><script>Vue.component('cpn1', {template: '#cpn',data() {return {counter: 0}},methods: {increment(){this.counter++;},decrement(){this.counter--;}}})const app = new Vue({el: '#app',data: {firstName: 'Kobe',age: 17,}})</script>

58-父==>子

<div id="app"><cpn :csuperstar='superstar' :cname='name'></cpn>
</div>
<template id="cpn"><div><p>{{cname}}</p><ul><li v-for='item in csuperstar'>{{item}}</li></ul></div>
</template><script src="../js/vue.js"></script>
<script>//Vue.compoment('cpn',{})const cpn = {template: '#cpn',// props: ['csuperstar','cname'],props: {// 1,类型限制// csuperstar: Array,// cname: String// 2,提供默认值以及必传值cname: {type: String,default: 'Kobe',required: true},// 类型为对象或数组（引用值）时候，默认值必须是一个函数csuperstar: {type: Array,default(){return []}}},data(){return {}},methods: {}}const app = new Vue({el: '#app',data: {name: 'Bryant',superstar: ['Curry','Jordan','James','Dukan','Onial']},components: {cpn}})
</script>

59-Vue小驼峰

<div id="app"><cpn :c-Super-Star='superStar' :c-Name='name'></cpn>
</div>
<template id="cpn"><div><p>{{cName}}</p><ul><li v-for='item in cSuperStar'>{{item}}</li></ul></div>
</template><script src="../js/vue.js"></script>
<script>// Vue.compoment('cpn',{})const cpn = {template: '#cpn',// props: ['csuperstar','cname'],props: {// 1,类型限制// csuperstar: Array,// cname: String// 2,提供默认值以及必传值cName: {type: String,default: 'Kobe',required: true},// 类型为对象或数组（引用值）时候，默认值必须是一个函数cSuperStar: {type: Array,default(){return []}}},data(){return {}},methods: {}}const app = new Vue({el: '#app',data: {name: 'Bryant',superStar: ['Curry','Jordan','James','Dukan','Onial']},components: {cpn}})
</script>

60

<div id="app"><!-- // 父组件监听 --><cpn @itemclick="cpnClick"></cpn>
</div><template id="cpn"><div><button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button></div>
</template><script src="../js/vue.js"></script>
<script>// Vue.compoment('cpn',{})const cpn = {template: '#cpn',data(){return {categories: [{id: 'a', name: '热门推荐'},{id: 'b', name: '手机数码'},{id: 'c', name: '家用电器'},{id: 'd', name: '电脑办公'}]}},methods: {btnClick(item){// 子组件发射事件: 自定义事件this.$emit('itemclick', item)}}}const app = new Vue({el: '#app',data: {name: 'Bryant',superStar: ['Curry','Jordan','James','Dukan','Onial']},components: {cpn},methods: {cpnClick(item){console.log(item.name);}}})
</script>

62-回顾

2020-11-22 Vue-10组件化开发（1）相关推荐

Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
Vue.js 组件化开发
三.组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件语法糖 1.5 组件模板抽离的写法 1.6 组件数据存放 1.7 ...
Vue/React组件化开发的一些思考
组件化开发的优势组件化开发利用了面向对象的威力,易于构建规模比较大的应用并且获得比较高的可维护性,可扩展性.Vue.React厂商及社区不但提供了组件化开发的框架,而且提供了易于起步并包含了从编码. ...
【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件组件数据父子组件的通信父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
Thymeleaf + Vue组件化开发
Thymeleaf 搭配 Vue 完成组件化开发前言一.vue2 1.引入静态文件 2.声明组件二.语法搭配使用vue方法调用th数据前言提示:thymeleaf 固然好,但是 vue 也 ...
Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
vue组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
Vue组件化开发 - 非常详细，不要错过哦~
源码示例链接:https://pan.baidu.com/s/1NEYDmLl2K7nNa-AKWtJqVA 提取码:2c7a 目标能够知道组件化开发思想能够知道组件的注册方式能够说出组件间的数 ...

2020-11-22 Vue-10组件化开发（1）

51

52

53

54

55

全局

局部

56

这样更简便

57

###data是函数形式的，不能是对象；函数有作用域

58-父==>子

59-Vue小驼峰

60

62-回顾

2020-11-22 Vue-10组件化开发（1）相关推荐

最新文章

热门文章