建设网站好难,木卢seo教程,网络营销的八大功能,网站建设APP的软件组件可以扩展HTML元素#xff0c;封装可重用的HTML代码#xff0c;我们可以将组件看作自定义的HTML元素。组件系统提供了一种抽象#xff0c;让我们可以使用独立可复用的小组件来构建大型应用。 一个简单组件例子(全局注册#xff09; !DOCTYPE html
html封装可重用的HTML代码我们可以将组件看作自定义的HTML元素。组件系统提供了一种抽象让我们可以使用独立可复用的小组件来构建大型应用。 一个简单组件例子(全局注册 !DOCTYPE html
htmlbodydiv idapp!-- 3. #app是Vue实例挂载的元素应该在挂载元素范围内使用组件--the-component/the-component/div/bodyscript srcjs/vue.js/scriptscript// 1.创建一个组件构造器var myComponent Vue.extend({template: div my first component!/div})// 2.注册组件并指定组件的标签组件的HTML标签为the-component Vue.component(the-component, myComponent)new Vue({el: #app});/script
/html 运行结果 分析 1.Vue.extent() 是Vue构造器的扩展调用Vue.extend()创建的是一个组件构造器而不是一个具体的组件实例。它里面的选项对象的template属性用于定义组件要渲染的HTML。 2.Vue.component() 注册组件时需要提供2个参数第一个参数是组件的标签第二个是组件构造器。它调用了组件构造器myComponent创建一个组件实例。 3.组件应该挂载在某个Vue实例下 new Vue({el: #app
}); 这段代码必须要有表示挂载在#app元素上否则不会生效。 局部注册 script// 1.创建一个组件构造器var myComponent Vue.extend({template: div my first2 component!/div})new Vue({el: #app,components: {// 2. 将myComponent组件注册到Vue实例下the-component : myComponent}});/script 父组件和子组件 可以在组件中定义并使用其他组件构成父子组件关系。 例子注意版本用vue.js 1.0的2.0版本button都出现不了 !DOCTYPE html
htmlheadmeta charsetutf-8/headbody!-- 子组件模板 --template idchild-templateinput v-modelmsgbutton v-on:clicknotifyDispatch Event/button/template!-- 父组件模板 --div idevents-examplepMessages: {{ messages | json }}/pchild/child/div/bodyscript srchttp://cdn.bootcss.com/vue/1.0.0-csp/vue.js/scriptscript// 注册子组件// 将当前消息派发出去Vue.component(child, {template: #child-template,data: function () {return { msg: hello }},methods: {notify: function () {if (this.msg.trim()) {this.$dispatch(child-msg, this.msg)this.msg }}}})// 初始化父组件// 将收到消息时将事件推入一个数组var parent new Vue({el: #events-example,data: {messages: []},// 在创建实例时 events 选项简单地调用 $onevents: {child-msg: function (msg) {// 事件回调内的 this 自动绑定到注册它的实例上this.messages.push(msg)}}})/script
/html 运行结果 props示例 !DOCTYPE html
htmlheadmeta charsetutf-8/headbodytemplate idmyComponenttabletrth colspan2子组件数据/th/trtrtdmyname/tdtd v-textmyName/td/trtrtdmyage/tdtd v-textmyAge/td/tr/table/templatediv idappmy-component v-bind:my-namename v-bind:my-ageage/my-component/div/bodyscript srchttp://cdn.bootcss.com/vue/1.0.0-csp/vue.js/scriptscriptvar vm new Vue({el: #app,data: {name: wangjuan,age: 24},components: {my-component: {template: #myComponent,props: [myName, myAge]}}});/script
/html 结果为 prop双向绑定 !DOCTYPE html
htmlheadmeta charsetutf-8/headbodytemplate idmyComponenttabletrth colspan3子组件数据/th/trtrtdmyname:/tdtd v-textmyName/tdtdinput typetext v-modelmyName //td/trtrtdmyage:/tdtd v-textmyAge/tdtdinput typetext v-modelmyAge //td/tr/table/templatediv idapptabletrth colspan3父组件数据/th/trtrtdname:/tdtd{{ name }}/tdtdinput typetext v-modelname //td/trtrtdage:/tdtd{{ age }}/tdtdinput typetext v-modelage //td/tr/tablemy-component v-bind:my-namename v-bind:my-ageage/my-component/div/bodyscript srchttp://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js/scriptscriptvar vm new Vue({el: #app,data: {name: wangjuan,age: 24},components: {my-component: {template: #myComponent,props: [myName, myAge]}}});/script
/html 结果 prop默认是单向绑定不过这里我感觉默认是双向绑定不知道哪里出问题了。。。 使用.sync或.once 绑定修饰符显式地强制双向或单次绑定。 子组件可以用this.$parent访问它的父组件。根实例的后代可以用this.$root访问它。父组件有一个数组this.$children包含它所有的子元素。 转载于:https://www.cnblogs.com/wj204/p/5923045.html
