1.数据的双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="username">用户名：</label> <input type="text" id="username" v-model="msg"> <p>{{ msg }}</p> <textarea name="" id="" v-model="msg"></textarea> <input type="checkbox" id="checked" v-model="checked"> <label for="checked">{{ checked }}</label> <!--多个复选框 使用列表保存--> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <br> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> <!--懒监听 只有回车之后才会将数据同步--> <input type="text" v-model.lazy="msg"> <!--数字显示--> <input type="number" v-model.number="age"> <!--清除前后空格--> <input type="text" v-model.trim="msg"> </div> <script src="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>Title</title> </head> <body> <div id="app"> <input type="text" :value="msg" @input="changeHandler"> <p>{{ msg }}</p> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return { msg:'alex' } }, methods:{ changeHandler(e){ console.log(e); this.msg = e.target.value } } }) </script> </body> </html>
3.局部组件的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ msg }} </div> <script src="vue.js"></script> <script> //如果仅仅是实例化vue对象中，既有el又有template，如果template中 //定义模板内容，那么template模板优先级大于el // App header aside content //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 let App = { data(){ return { text:"日天" } }, template:` <div> <h2>{{ text }}</h2> </div> `, methods:{ } }; new Vue({ el:"#app", data(){ return { msg:"alex" } }, //3用子 template:` <div class="app"> <App /> </div> `, components:{ //2挂子 // 如果key和value一样 可以只写一个 // App:App App } }) </script> </body> </html>
4.局部组件的使用更改（全局组件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ msg }} </div> <script src="vue.js"></script> <script> //如果仅仅是实例化vue对象中，既有el又有template，如果template中 //定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件 //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容 Vue.component("VBtn",{ data(){ return { } }, template:` <button> <slot></slot> </button> ` }); // App header aside content //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 let Vheader = { data(){ return { } }, //template定义模板内容 //Component template should contain exactly one root element template:` <div> <h2>日天</h2> <h2>日天</h2> <VBtn>登录</VBtn> <VBtn>注册</VBtn> <VBtn>按钮</VBtn> <VBtn>提交</VBtn> </div> ` } let App = { data(){ return { text:"日天" } }, template:` <div> <h2>{{ text }}</h2> <Vheader></Vheader> <VBtn>删除</VBtn> <br> </div> `, methods:{ }, components:{ Vheader } }; new Vue({ el:"#app", data(){ return { msg:"alex" } }, //3用子 template:` <div class="app"> <App /> </div> `, components:{ //2挂子 // 如果key和value一样 可以只写一个 // App:App App } }) </script> </body> </html>
5.父往子传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ msg }} </div> <script src="vue.js"></script> <script> //如果仅仅是实例化vue对象中，既有el又有template，如果template中 //定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件 //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容 Vue.component("VBtn",{ data(){ return { } }, template:` <button> {{ id }} </button> `, props:["id"] }); // App header aside content //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 let Vheader = { data(){ return { } }, //template定义模板内容 //Component template should contain exactly one root element template:` <div> <h2>日天</h2> <h2>{{ msg }}</h2> <h2>{{ post.title }}</h2> <VBtn :id="post.id">提交</VBtn> </div> `, props:["msg","post"] } let App = { data(){ return { text:"我是父组件的数据", post:{ id:1, title:"My Journey with Vue" } } }, template:` <div id="a"> <Vheader :msg="text" :post="post"></Vheader> </div> `, methods:{ }, components:{ Vheader } }; new Vue({ el:"#app", data(){ return { msg:"alex" } }, //3用子 template:` <div class="app"> <App /> </div> `, components:{ //2挂子 // 如果key和value一样 可以只写一个 // App:App App } }) </script> </body> </html>
6.子往父传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ msg }} </div> <script src="vue.js"></script> <script> //如果仅仅是实例化vue对象中，既有el又有template，如果template中 //定义模板内容，那么template模板优先级大于el //第一个参数是组件的名字，第二个参数 options参数 它是全局组件 //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容 Vue.component("VBtn",{ data(){ return { } }, template:` <button @click="clickHandler"> {{ id }} </button> `, props:["id"], methods:{ clickHandler(){ this.id++; // this.$emit('父组件声明自定义的事件','传值'); this.$emit("clickHandler",this.id) } } }); // App header aside content //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 let Vheader = { data(){ return { } }, //template定义模板内容 //Component template should contain exactly one root element template:` <div> <h2>我是header组件</h2> <h2>日天</h2> <h2>{{ msg }}</h2> <h2>{{ post.title }}</h2> <VBtn :id="post.id" @clickHandler="clickHandler">提交</VBtn> </div> `, props:["msg","post"], methods:{ clickHandler(val){ alert(val); this.$emit("fatherHandler",val) } } } let App = { data(){ return { text:"我是父组件的数据", post:{ id:1, title:"My Journey with Vue" } } }, template:` <div id="a"> <Vheader :msg="text" :post="post" @fatherHandler="father_handler"></Vheader> </div> `, methods:{ father_handler(val){ this.post.id = val } }, components:{ Vheader } }; new Vue({ el:"#app", data(){ return { msg:"alex" } }, //3用子 template:` <div class="app"> <App /> </div> `, components:{ //2挂子 // 如果key和value一样 可以只写一个 // App:App App } }) </script> </body> </html>
7.平行组件传值
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <App/> </div> <script src="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)=> { alert(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:'wusir' } }, 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>