系统做网站的地方,今天广州出什么大事了,网站建设公司的出路,网站建设分为vue组件套娃1. vue自定义组件2. 组件和插槽套娃3. vue组件通过自定义事件更改vue实例中的数据1. vue自定义组件
语法
Vue.component(自定义组件名, {props: [var1, var2, var3], //每个属性可以和页面绑定值template: p{{ var1 }}/p // 自定义模板 里面套htm…
vue组件套娃1. vue自定义组件2. 组件和插槽套娃3. vue组件通过自定义事件更改vue实例中的数据1. vue自定义组件
语法
Vue.component(自定义组件名, {props: [var1, var2, var3], //每个属性可以和页面绑定值template: p{{ var1 }}/p // 自定义模板 里面套html标签, 可以取属性的值
})第一个自定义组件
scriptVue.component(lover, {template: ptaylor swift - lover.mp3/p});let app new Vue({el: #app,data: {}});
/script
div idapp!-- 使用自定义组件模板注意绑定了vue对象才有用 --lover/lover
/div将自定义组件里面的数据写活
script
/* 自定义组件模板 bitqian标签 */
Vue.component(bitqian, {props: [language],template: li{{ language }}/li
});let app new Vue({el: #app,data: {items: [java, python, go]}
});/script!-- 获得每个item并将items里面的每个item通过组件的language属性绑定到bitqian标签 --bitqian v-foritem in items v-bind:languageitem v-bind:keyitem.index/bitqian完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevue 组件绑定值/titlescript src../js/vue.js/script
/head
bodydiv idapp!-- 使用自定义组件模板注意绑定了vue对象才有用 --lover/loverhr/!-- 获得每个item并将items里面的每个item通过组件的language属性绑定到bitqian标签 --bitqian v-foritem in items v-bind:languageitem v-bind:keyitem.index/bitqian/divscriptVue.component(lover, {template: ptaylor swift - lover.mp3/p});/* 自定义组件模板 bitqian标签 */Vue.component(bitqian, {props: [language],template: li{{ language }}/li});let app new Vue({el: #app,data: {items: [java, python, go]}});/script/body
/html2. 组件和插槽套娃
插槽slot/slot就是一个孔可以套vue组件用组件套组件的方式代替普通的html标签
!DOCTYPE html
html langen
headmeta charsetUTF-8titleslot插槽 结合vue组件 实现模板化/titlescript src../js/vue.js/script
/head
bodydiv idapp!-- 将每个item的值绑定到模板中的属性上 --my-component v-foritem in items v-bind:languageitem/my-component/div!-- 插槽的目的 为了实现代码模板化 --div idapp1!--p后端语言/pullijava/lilipython/liligo/lililinux/li/ul--demo-component!-- 记得绑定插槽 --demo-title slotdemo-title v-bind:titletitle/demo-titledemo-item slotdemo-item v-for(item, index) in items:itemitem v-bind:indexindex/demo-item/demo-component/divscript// vue组件复习Vue.component(my-component, {props: [language],template: li{{ language }}/li})new Vue({el: #app,data: {items: [c, cpp, object-c]}})/* slot 插槽定义 组件通过插槽套组件 */Vue.component(demo-component, {template:div slot namedemo-title/slot ul slot namedemo-item/slot /ul /div})// 标题组件Vue.component(demo-title, {props: [title],template: p{{ title }}/p})// 标题下面对应的每一项Vue.component(demo-item, {props: [item, index],template: li{{ index }}{{ item }} /li})// vue实例 给组件提供数据 let vm new Vue({el: #app1,data: {title: 后端语言,items: [java, python, go, linux]}})/script
/body
/html3. vue组件通过自定义事件更改vue实例中的数据
this.$emit(‘functionName’, params…)实现自定义事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevue 插槽复习/titlescript src../js/vue.js/script
/head
bodydiv idappmy-component!-- 给组件插槽 绑定vue实例对象中的title --!-- v-bind:indexindex :indexindex --!-- v-on:clickshow clickshow --my-title slotmy-title v-bind:titletitle/my-titlemy-content slotmy-content v-for(item, index) in items:contentitem :indexindex :keyindexv-on:removeremoveItems(index) !-- 自定义移除事件remove 并绑定了vue实例中的removeItems --/my-content/my-component/divscriptVue.component(my-component, {/* 使用插槽代替 模板对象 */template:div\slot namemy-title/slot\ulslot namemy-content/slot/ul\/div})Vue.component(my-title, {props: [title],template: p{{ title }}/p})Vue.component(my-content, {props: [content, index], // 定义index属性接收页面的绑定值template: li{{ index }} {{ content }} button clickremove移除/button /li, //绑定了removemethods: {remove: function (index) {// 自定义事件分发 移除vue实例中的数据// alert(remove .. index)// 调用自定义函数 并传入参数this.$emit(remove, index)}}})let vm new Vue({el: #app,data: {title: a title,items: [java, python, go]},methods: {removeItems: function (index) {// 从index这一位移除this.items.splice(index, 1);}}});/script/body
/html
