Vue进阶 1.全局组件和局部组件 2..父组件和子组件 3.组件通信-父传子 4.组件通信-子传父 5.组件通信结合双向绑定 6.Vue实现一个简单计算器 7.Vue实现全选和反选
< html> < head> < metacharset = " utf-8" > < title> title > head > < body> < divid = " app" > < com> com > < com> com > < jubu> jubu > div > < divid = " app2" > < com> com > div > < templateid = " qj" > < button@click = " count++" > button > template > < templateid = " jb" > < h1> h1 > template > < scriptsrc = " js/vue.js" type = " text/javascript" charset = " utf-8" > script > < scripttype = " text/javascript" > Vue. component ( "com" , { template: '#qj' , data ( ) { return { count: 0 } } } ) ; const jubu = Vue. extend ( { template: '#jb' } ) ; const vue = new Vue ( { el: "#app" , components: { 'jubu' : jubu} } ) ; const vue2 = new Vue ( { el: '#app2' } ) ; script > body > html > < html> < head> < metacharset = " utf-8" > < title> title > head > < body> < divid = " app" > < parent> parent > < parent> parent > div > < templateid = " zi" > < h1> h1 > template > < templateid = " fu" > < div> < h2> h2 > < child> child > div > template > < scriptsrc = " js/vue.js" type = " text/javascript" charset = " utf-8" > script > < scripttype = " text/javascript" > const con1 = Vue. extend ( { template: '#zi' } ) ; const con2 = Vue. extend ( { template: '#fu' , components: { child: con1} } ) ; const app = new Vue ( { el: '#app' , components: { parent: con2} } ) script > body > html > < html> < head> < metacharset = " utf-8" > < title> title > head > < body> < divid = " app" > < parent> parent > div > < templateid = " child" > < ul> < liv-for = " (value,key) in x" > li > ul > template > < templateid = " parent" > < div> < h2> h2 > < child:x = " attr1" :y = " count" > child > div > template > < scriptsrc = " js/vue.js" type = " text/javascript" charset = " utf-8" > script > < scripttype = " text/javascript" > const child = Vue. extend ( { template: '#child' , props: { x: { type: [ String, Object] } , y: { type: Number} } } ) ; const parent = Vue. extend ( { template: '#parent' , data ( ) { return { count: 0 } } , props: { attr1: { type: [ String, Number, Object] , default : function ( ) { return { id: '001' , name: 'zs' } ; } } } , components: { 'child' : child} } ) ; new Vue ( { el: '#app' , data: { message: 'i am hahah' } , components: { 'parent' : parent} } ) script > body > html > < html> < head> < metacharset = " utf-8" > < title> title > head > < body> < divid = " app" > < br> < parent@asc = " lasc" @desc = " ldesc" > parent > < parent@asc = " lasc" @desc = " ldesc" > parent > div > < templateid = " child" > < div> < button@click = " increment" > button > < button@click = " decrement" > button > div > template > < scriptsrc = " js/vue.js" type = " text/javascript" charset = " utf-8" > script > < scripttype = " text/javascript" > const child = Vue. extend ( { template: '#child' , data: function ( ) { return { counter: 0 } } , props: { } , methods: { increment: function ( ) { this . counter++ ; this . $emit ( 'asc' , this . counter) } , decrement: function ( ) { this . counter-- ; this . $emit ( 'desc' , this . counter) } } } ) ; const app = new Vue ( { el: '#app' , data: { totalprice: 200 } , components: { parent: child} , methods: { lasc: function ( value) { console. log ( value+ '+++++++++++++' ) ; this . totalprice += value; } , ldesc: function ( value) { console. log ( value+ '-------------' ) ; this . totalprice -= value; } } } ) ; script > body > html > < html> < head> < metacharset = " utf-8" > < title> title > head > < body> < divid = " app" > < h1> h1 > < h1> h1 > < parent:attr1 = " num1" :attr2 = " num2" @first = " firsttop" @second = " secondtop" > parent > div > < templateid = " child" > < div> < h1> h1 > < inputtype = " text" :value = " attrfirst" @input = " add1" /> < br> < h2> h2 > < inputtype = " text" :value = " attrsecond" @input = " add2" /> div > template > < scriptsrc = " js/vue.js" type = " text/javascript" charset = " utf-8" > script > < scripttype = " text/javascript" > const child = Vue. extend ( { template: '#child' , props: { attr1: { type: Number, required: true } , attr2: { type: Number, required: true } } , data ( ) { return { attrfirst: this . attr1, attrsecond: this . attr2} } , methods: { add1: function ( evnet) { this . attrfirst = event. target. value; this . $emit ( 'first' , this . attrfirst) ; this . attrsecond = this . attrfirst* 100 ; this . $emit ( 'second' , this . attrsecond) ; } , add2: function ( event) { this . attrsecond = event. target. value; this . $emit ( 'second' , this . attrsecond) ; this . attrfirst = this . attrsecond/ 100 ; this . $emit ( 'first' , this . attrfirst) ; } } } ) ; const app = new Vue ( { el: '#app' , data: { num1: 1 , num2: 2 } , components: { parent: child} , methods: { firsttop: function ( value) { this . num1 = parseFloat ( value) ; } , secondtop: function ( value) { this . num2 = parseFloat ( value) ; } } } ) script > body > html > < html> < head> < metacharset = " utf-8" > head > < body> < divid = " app" > < inputtype = " text" v-model = " num1" /> < selectv-model = " oper" > +option > < optionvalue = " -" > option > < optionvalue = " *" > option > < optionvalue = " /" > option > select > < inputtype = " text" v-model = " num2" /> < inputtype = " button" value = " =" @click = " eval01" /> < inputtype = " text" v-model = " num3" /> div > < scriptsrc = " js/vue.js" type = " text/javascript" charset = " utf-8" > script > < scripttype = " text/javascript" > const vue = new Vue ( { el: "#app" , data: { num1: 0 , oper: "+" , num2: 0 , num3: 0 } , methods: { eval01 ( ) { this . num3= eval ( this . num1+ this . oper+ this . num2) } } } ) script > body > html > < html> < head> < metacharset = " utf-8" > < title> title > head > < body> < divid = " app" > < h1 style =" color : royalblue; " > h1 > < br> < h1 style =" color : #4476A7; " > h1 > < inputid = " ck01" type = " checkbox" :checked = " ck[0]" @input = " change(0)" /> < labelfor = " ck01" > label > < br> < inputid = " ck02" type = " checkbox" :checked = " ck[1]" @input = " change(1)" /> < labelfor = " ck02" > label > < br> < inputid = " ck03" type = " checkbox" :checked = " ck[2]" @input = " change(2)" /> < labelfor = " ck03" > label > < br> < inputid = " ck04" type = " checkbox" :checked = " ck[3]" @input = " change(3)" /> < labelfor = " ck04" > label > < br> < inputtype = " button" value = " 全选" @click = " qx" /> < inputtype = " button" value = " 反选" @click = " fx" /> < br> div > < scriptsrc = " js/vue.js" type = " text/javascript" charset = " utf-8" > script > < scripttype = " text/javascript" > const app = new Vue ( { el: '#app' , data: { ck: [ false , false , false , false ] , flag: true } , methods: { qx: function ( ) { if ( this . flag) { for ( let index in this . ck) { this . ck. splice ( index, 1 , true ) } } else { for ( let index in this . ck) { this . ck. splice ( index, 1 , false ) } } this . flag = ! this . flag; } , fx: function ( ) { for ( let index in this . ck) { this . ck. splice ( index, 1 , ! this . ck[ index] ) ; } } , change: function ( index) { this . ck. splice ( index, 1 , ! this . ck[ index] ) ; } } } ) script > body > html >
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】 进行投诉反馈！
