1.数据的双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1</title> </head> <body> <div id="app"> <label for="username">用户名:</label> <input type="text" v-model="msg" id="username"> <p>{{ msg }}</p> <textarea name="" id="" cols="30" rows="10" placeholder="add multiple lines" v-model = "msg"></textarea> <input type="checkbox" id="checkbox" v-model = "checked"> <label for="checkbox">{{ checked }}</label> <br> <input type="checkbox" id="jack" value="Jack" v-model = "checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="join" value="Join" v-model = "checkedNames"> <label for="join">Join</label> <input type="checkbox" id="mike" value="Mike" v-model = "checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names:{{ checkedNames }}</span> <br> <select name="" id="" v-model = "selected"> <option value="" disabled>请选择</option> <option value="">A</option> <option value="">B</option> <option value="">C</option> </select> <span>Selected:{{ selected }}</span> <!--懒监听--> <input type="text" v-model.lazy = "msg"> <!--数字显示--> <input type="text" v-model.number = "age" type = "number"> <!--清除前后空格--> <input type="text v-model.trim = "msg> </div> <script src="../vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data(){ return { msg:"alex", checked:false, checkedNames:[], selected:'', age:0 } } }) </script> </body> </html>
2.双向数据绑定实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2</title> </head> <body> <div id="app"> <input type="text" :value="msg" @input = "changeHandler"> <p>{{ msg }}</p> </div> <script src="../vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data(){ return { msg:"alex" } }, methods:{ changeHandler(e){ this.msg = e.target.value } } }) </script> </body> </html>
3.局部组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3</title> </head> <body> <div id="app"> {{ msg }} </div> <script src="../vue/dist/vue.js"></script> <script> //如果仅仅是实例化vue对象中既有el又有template,如果template中定义模板的内容, // 那么template模板的优先级大于el //1.声子, vue组件的名字首字母要大写,跟标签区分,组件中的data必须是一个函数,一定要有返回值 let App = { data(){ return { text:"ritian" } }, template:` <div id="a"> <h2>{{ text }}</h2> </div> `, methods:{} } new Vue({ el:"#app", data(){ return { msg:"alex" } }, //用子 template:` <div class="app"> <App></App> </div> `, //挂子 components:{ //如果key和value一样,可以只写一个 //App:App App } }) </script> </body> </html>
4.局部组件的使用更改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4</title> </head> <body> <div id="app"> <App></App> </div> <script src="../vue/dist/vue.js"></script> <script> //slot是vue中提供的内容组件,它会去分发内容 //可复用的vue组件 Vue.component("VBtn",{ data(){ return {} }, template:` <button><slot></slot></button> ` }); let Vheader = { data(){ return {} }, template:` <div> <h2>ritian</h2> <h2>ritian</h2> <VBtn>登录</VBtn> <VBtn>注册</VBtn> <VBtn>按钮</VBtn> <VBtn>提交</VBtn> </div> ` }; let App = { data(){ return { text:"我是ritian" } }, template:` <div id="a"> <h2>{{ text }}</h2> <Vheader></Vheader> <VBtn>删除</VBtn> <br> </div> `, methods:{}, components:{ Vheader } }; new Vue({ el:"#app", data(){ return { msg:"alex" } }, template:`<App/>`, components:{ App } }) </script> </body> </html>
5.父往子传值（通过标签传值或平行组件）
1.在子组件中,使用props声明接收父组件传过来的数据,可以直接在子组件中任意使用
2.加：动态传，不加：静态传
3.父组件 要定义自定义的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5</title> </head> <body> <div id="app"> <App></App> </div> <script src="../vue/dist/vue.js"></script> <script> Vue.component("VBtn", { data() { return {} }, template: ` <button>{{ id }}</button> `, props: ["id"] }); let Vheader = { data() { return {} }, props:["msg","post"], template:` <div class="child"> <h2>ritian</h2> <h2>{{ msg }}</h2> <h3>{{ post.title }}</h3> <VBtn v-bind:id = "post.id"></VBtn> </div> ` }; let App = { data(){ return { text:"我是父组件的数据", post:{ id:1, title:"My Journey with Vue" } } }, template:` <div id="a"> <Vheader :msg = "text" v-bind:post = "post"></Vheader> </div> `, methods:{}, components:{ Vheader } }; new Vue({ el:"#app", data(){ return { msg:"alex" } }, template:`<App />`, components:{ App } }) </script> </body> </html>
6.子往父传值
1.子组件中通过$emit("自定义事件名"，传的值)触发父组件中自定义的事件,比如this.$emit("handler",1)
2.父组件中声明自定义的事件介绍（在子标签名中@事件名）,例如：<Son @handler='父自定义事件名'/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6</title> </head> <body> <div id="app"> <App></App> </div> <script src="../vue/dist/vue.js"></script> <script> Vue.component("VBtn",{ data(){ return {} }, template:`<button @click = "clickHandler">{{ id }}</button>`, props:['id'], methods:{ clickHandler(){ //每个组件中的this指的是当前组件对象 console.log(this); this.id++; //this.$emit("父组件声明自定义的事件","传值"); this.$emit("clickHandler",this.id); } } }); let Vheader = { data(){ return {} }, props:["msg","post"], template:` <div class="child"> <h1>我是header组件</h1> <h2>ritian</h2> <h2>{{ msg }}</h2> <h3>{{ post.title }}</h3> <VBtn v-bind:id = "post.id" @clickHandler = "clickHandler"></VBtn> </div> `, methods:{ clickHandler(val){ this.$emit("fatherHandler",val) } }, created(){ console.log(this); }, }; let App = { data(){ return { text:"我是父组件的数据", post:{ id:1, title:"My Journey with Vue" } } }, template:` <div id="a"> 我是父组件的{{ post.id }} <Vheader :msg = "text" v-bind:post = "post" @fatherHandler = "father_handler"></Vheader> </div> `, methods:{ father_handler(val){ console.log(val); this.post.id = val; } }, components:{ Vheader }, created(){ console.log(this); }, }; new Vue({ el:"#app", data(){ return { msg:"alex" } }, created(){ console.log(this); }, template:`<App />`, components:{ App } }) </script> </body> </html>
7.平行组件传值
使用$on()和$emit()绑定的是同一个实例化对象
A===>B传值
1.B组件中要使用$on("事件的名字",function(){})
2.A组件中使用$emit("事件的名字",值)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7</title> </head> <body> <div id="app"> <App/> </div> <script src="../vue/dist/vue.js"></script> <script> let bus = new Vue(); // A=>B B要声明事件 $on("事件的名字",function(val){}) A要触发的事件 $emit("A组件中声明的事件名","值") //前提,这两个方法必须绑定在同一个实例化对象(bus) Vue.component("Test2",{ data(){ return { text:"" } }, template:` <h2>{{ text }}</h2> `, methods:{}, created(){ bus.$on("testData",(val)=>{ this.text = val; }) } }); Vue.component("Test",{ data(){ return { msg:"我是子组件的数据" } }, props:["txt"], template:` <button @click = "clickHandler">{{ txt }}</button> `, methods:{ clickHandler(){ bus.$emit("testData",this.msg) } } }); let Vheader = { data(){ return {txt:"wusr"} }, template:` <div class="header"> <Test :txt = "txt"/> <Test2 /> </div> ` }; let App = { data(){ return {} }, template:` <div class="app"> <Vheader /> </div> `, components:{ Vheader } }; new Vue({ el:"#app", data(){ return {} }, components:{ App } }) </script> </body> </html>
总结：
1.父往子传值：在父组件中的template中的子组件名的标签中写入要传的值，子组件通过props接收父组件传过来的值
2.子往父传值：在子组件中this.$emit("事件名"，值)，在父组件中任意标签中(例如<button @事件名="父组件自定义的事件名">),然后在父组件中的methos中写父组件自定义的事件名的方法
3.平行组件传值：先在main.js中定义全局对象(let bus = new Vue())，
父（子）往 子（父）传值：
传值的一方：this.$bus.$emit("事件名"，name)
接收值的一方：this.$bus.$on("事件名"，name=>{this.name=name})