标签：数字 app 登录 ber dev func 大于 content creat
1.数据的双向绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 10 <label for="username">用户名：</label> 11 <input type="text" id="username" v-model="msg"> 12 <p>{{ msg }}</p> 13 <textarea name="" id="" v-model="msg"></textarea> 14 15 <input type="checkbox" id="checked" v-model="checked"> 16 <label for="checked">{{ checked }}</label> 17 <!--多个复选框 使用列表保存--> 18 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> 19 <label for="jack">Jack</label> 20 <input type="checkbox" id="john" value="John" v-model="checkedNames"> 21 <label for="john">John</label> 22 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> 23 <label for="mike">Mike</label> 24 <br> 25 <span>Checked names: {{ checkedNames }}</span> 26 27 <br> 28 <select v-model="selected"> 29 <option disabled value="">请选择</option> 30 <option>A</option> 31 <option>B</option> 32 <option>C</option> 33 </select> 34 <span>Selected: {{ selected }}</span> 35 <!--懒监听 只有回车之后才会将数据同步--> 36 <input type="text" v-model.lazy="msg"> 37 <!--数字显示--> 38 <input type="number" v-model.number="age"> 39 <!--清除前后空格--> 40 <input type="text" v-model.trim="msg"> 41 </div> 42 <script src="vue.js"> 43 44 </script> 45 <script> 46 new Vue({ 47 el:"#app", 48 data(){ 49 return { 50 msg:"alex", 51 checked:false, 52 checkedNames:[], 53 selected:"", 54 age:0 55 } 56 } 57 }) 58 </script> 59 </body> 60 </html>
2.双向数据绑定实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <input type="text" :value="msg" @input="changeHandler"> 10 <p>{{ msg }}</p> 11 </div> 12 <script src="vue.js"></script> 13 <script> 14 new Vue({ 15 el:‘#app‘, 16 data(){ 17 return { 18 msg:‘alex‘ 19 } 20 21 }, 22 methods:{ 23 changeHandler(e){ 24 console.log(e); 25 this.msg = e.target.value 26 } 27 } 28 }) 29 </script> 30 </body> 31 </html>
3.局部组件的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 {{ msg }} 10 </div> 11 <script src="vue.js"></script> 12 <script> 13 //如果仅仅是实例化vue对象中，既有el又有template，如果template中 14 //定义模板内容，那么template模板优先级大于el 15 16 // App header aside content 17 //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 18 let App = { 19 data(){ 20 return { 21 text:"日天" 22 } 23 }, 24 template:` 25 <div> 26 <h2>{{ text }}</h2> 27 </div> 28 `, 29 methods:{ 30 31 } 32 }; 33 34 35 new Vue({ 36 el:"#app", 37 data(){ 38 return { 39 msg:"alex" 40 } 41 }, 42 //3用子 43 template:` 44 <div class="app"> 45 <App /> 46 </div> 47 48 49 `, 50 components:{ 51 //2挂子 52 // 如果key和value一样 可以只写一个 53 // App:App 54 App 55 } 56 57 }) 58 </script> 59 </body> 60 </html>
4.局部组件的使用更改（全局组件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 {{ msg }} 10 </div> 11 <script src="vue.js"></script> 12 <script> 13 //如果仅仅是实例化vue对象中，既有el又有template，如果template中 14 //定义模板内容，那么template模板优先级大于el 15 16 //第一个参数是组件的名字，第二个参数 options参数 它是全局组件 17 //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容 18 Vue.component("VBtn",{ 19 data(){ 20 return { 21 22 } 23 }, 24 template:` 25 <button> 26 <slot></slot> 27 </button> 28 29 ` 30 }); 31 32 33 34 35 // App header aside content 36 //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 37 let Vheader = { 38 data(){ 39 return { 40 41 } 42 }, 43 //template定义模板内容 44 //Component template should contain exactly one root element 45 template:` 46 <div> 47 <h2>日天</h2> 48 <h2>日天</h2> 49 <VBtn>登录</VBtn> 50 <VBtn>注册</VBtn> 51 <VBtn>按钮</VBtn> 52 <VBtn>提交</VBtn> 53 </div> 54 ` 55 } 56 57 58 let App = { 59 data(){ 60 return { 61 text:"日天" 62 } 63 }, 64 template:` 65 <div> 66 <h2>{{ text }}</h2> 67 <Vheader></Vheader> 68 <VBtn>删除</VBtn> 69 <br> 70 </div> 71 `, 72 methods:{ 73 74 }, 75 components:{ 76 Vheader 77 } 78 }; 79 80 81 new Vue({ 82 el:"#app", 83 data(){ 84 return { 85 msg:"alex" 86 } 87 }, 88 //3用子 89 template:` 90 <div class="app"> 91 <App /> 92 </div> 93 94 95 `, 96 components:{ 97 //2挂子 98 // 如果key和value一样 可以只写一个 99 // App:App 100 App 101 } 102 103 }) 104 </script> 105 </body> 106 </html>
5.父往子传值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 {{ msg }} 10 </div> 11 <script src="vue.js"></script> 12 <script> 13 //如果仅仅是实例化vue对象中，既有el又有template，如果template中 14 //定义模板内容，那么template模板优先级大于el 15 16 //第一个参数是组件的名字，第二个参数 options参数 它是全局组件 17 //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容 18 Vue.component("VBtn",{ 19 data(){ 20 return { 21 22 } 23 }, 24 template:` 25 <button> 26 {{ id }} 27 </button> 28 29 `, 30 props:["id"] 31 }); 32 33 34 35 36 // App header aside content 37 //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 38 let Vheader = { 39 data(){ 40 return { 41 42 } 43 }, 44 //template定义模板内容 45 //Component template should contain exactly one root element 46 template:` 47 <div> 48 <h2>日天</h2> 49 <h2>{{ msg }}</h2> 50 <h2>{{ post.title }}</h2> 51 <VBtn :id="post.id">提交</VBtn> 52 </div> 53 `, 54 props:["msg","post"] 55 } 56 57 58 let App = { 59 data(){ 60 return { 61 text:"我是父组件的数据", 62 post:{ 63 id:1, 64 title:"My Journey with Vue" 65 } 66 } 67 }, 68 template:` 69 <div id="a"> 70 71 <Vheader :msg="text" :post="post"></Vheader> 72 73 74 </div> 75 `, 76 methods:{ 77 78 }, 79 components:{ 80 Vheader 81 } 82 }; 83 84 85 new Vue({ 86 el:"#app", 87 data(){ 88 return { 89 msg:"alex" 90 } 91 }, 92 //3用子 93 template:` 94 <div class="app"> 95 <App /> 96 </div> 97 98 99 `, 100 components:{ 101 //2挂子 102 // 如果key和value一样 可以只写一个 103 // App:App 104 App 105 } 106 107 }) 108 </script> 109 </body> 110 </html>
6.子往父传值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 {{ msg }} 10 </div> 11 <script src="vue.js"></script> 12 <script> 13 //如果仅仅是实例化vue对象中，既有el又有template，如果template中 14 //定义模板内容，那么template模板优先级大于el 15 16 //第一个参数是组件的名字，第二个参数 options参数 它是全局组件 17 //<slot></slot> solt是vue中提供的内容组件 ，它会去分发内容 18 Vue.component("VBtn",{ 19 data(){ 20 return { 21 22 } 23 }, 24 template:` 25 <button @click="clickHandler"> 26 {{ id }} 27 </button> 28 29 `, 30 props:["id"], 31 methods:{ 32 clickHandler(){ 33 this.id++; 34 // this.$emit(‘父组件声明自定义的事件‘,‘传值‘); 35 this.$emit("clickHandler",this.id) 36 } 37 } 38 }); 39 40 41 42 43 // App header aside content 44 //1声子 Vue 中组件的名字 首字母大写，跟标签区分 组建中的data必须是一个函数，热切要有return一个对象 45 let Vheader = { 46 data(){ 47 return { 48 49 } 50 }, 51 //template定义模板内容 52 //Component template should contain exactly one root element 53 template:` 54 <div> 55 <h2>我是header组件</h2> 56 <h2>日天</h2> 57 <h2>{{ msg }}</h2> 58 <h2>{{ post.title }}</h2> 59 <VBtn :id="post.id" @clickHandler="clickHandler">提交</VBtn> 60 </div> 61 `, 62 props:["msg","post"], 63 methods:{ 64 clickHandler(val){ 65 alert(val); 66 this.$emit("fatherHandler",val) 67 } 68 } 69 } 70 71 72 let App = { 73 data(){ 74 return { 75 text:"我是父组件的数据", 76 post:{ 77 id:1, 78 title:"My Journey with Vue" 79 } 80 } 81 }, 82 template:` 83 <div id="a"> 84 85 <Vheader :msg="text" :post="post" @fatherHandler="father_handler"></Vheader> 86 87 88 </div> 89 `, 90 methods:{ 91 father_handler(val){ 92 this.post.id = val 93 } 94 }, 95 components:{ 96 Vheader 97 } 98 }; 99 100 101 new Vue({ 102 el:"#app", 103 data(){ 104 return { 105 msg:"alex" 106 } 107 }, 108 //3用子 109 template:` 110 <div class="app"> 111 <App /> 112 </div> 113 114 115 `, 116 components:{ 117 //2挂子 118 // 如果key和value一样 可以只写一个 119 // App:App 120 App 121 } 122 123 }) 124 </script> 125 </body> 126 </html>
7.平行组件传值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 <body> 11 <div id="app"> 12 <App/> 13 </div> 14 <script src="vue.js"></script> 15 <script> 16 let bus = new Vue(); 17 //A===》B B要声明事件 $on(‘事件的名字‘,function(val){}) A要触发事件 $emit(‘A组件中声明的事件名‘,‘值‘) 18 19 //前提 这两个方法必须绑定在同一个实例化对象（bus） 20 Vue.component(‘Test2‘, { 21 data() { 22 return { 23 text:‘‘ 24 } 25 }, 26 template: ` 27 <h2>{{ text }}</h2> 28 `, 29 methods: { 30 31 }, 32 created(){ 33 bus.$on(‘testData‘, (val)=> { 34 alert(val); 35 this.text = val; 36 }) 37 } 38 }) 39 Vue.component(‘Test‘, { 40 data() { 41 return { 42 msg: ‘我是子组件的数据‘ 43 } 44 }, 45 props:[‘txt‘], 46 template: ` 47 <button @click = ‘clickHandler‘>{{ txt }}</button> 48 `, 49 methods: { 50 clickHandler() { 51 52 bus.$emit(‘testData‘,this.msg) 53 } 54 } 55 }) 56 57 let Vheader = { 58 data() { 59 return { 60 txt:‘wusir‘ 61 } 62 63 }, 64 template: ` 65 <div class="header"> 66 67 <Test :txt = ‘txt‘/> 68 <Test2 /> 69 70 </div> 71 ` 72 } 73 let App = { 74 data() { 75 return {} 76 77 }, 78 template: ` 79 <div class="app"> 80 81 <Vheader /> 82 83 </div> 84 `, 85 components: { 86 Vheader 87 } 88 } 89 new Vue({ 90 el: ‘#app‘, 91 data() { 92 return {} 93 }, 94 components: { 95 App 96 } 97 }) 98 99 </script> 100 </body> 101 </html>
标签：数字 app 登录 ber dev func 大于 content creat
原文地址：https://www.cnblogs.com/zhangqing979797/p/10085368.html
