一.表单输入绑定
1 <body> 2 <div id="app"> 3 <!--在vue中没有value属性,用v-model代替--> 4 //v-model只能应用在input texteare select 中 5 <input type="text" v-model="msg"> 6 <p>{{ msg }}</p> 7 </div> 8 <script src="vue.js"></script> 9 <script> 10 new Vue({ 11 el:"#app", 12 data(){ 13 return{ 14 msg:"" 15 } 16 } 17 }) 18 </script> 19 </body>
双向绑定原理图
双向数据绑定实现效果
也可以绑定value自己实现
1 <body> 2 <div id="app"> 3 //@input方法,用于实时监听input的value变化,以实现视图到模型的数据改变 4 <input type="text" :value="msg" @input="changeHandler"> 5 <p>{{ msg }}</p> 6 </div> 7 <script src="vue.js"></script> 8 <script> 9 new Vue({ 10 el:"#app", 11 data(){ 12 return{ 13 msg:"ccc" 14 } 15 }, 16 methods:{ 17 changeHandler(event){ 18 this.msg=event.target.value 19 } 20 } 21 }) 22 </script> 23 </body>
多行文本,复选框,单选按钮,选择框查看官方文档
2.修饰符
v-model.number:只能输入数字
v-model.trim:清除前后没用的空格
二.vue社区
vue awesome,vue中文社区:里面有大量的库和框架,如bootstrap -vue可以代替bootstrap
https://www.vue-js.com/topic/5b9699fccd6b2d5e4fd9e53e三组件
三.组件
(1)如果仅仅是在实例化vue对象中,即有el,又有template,且template中定义了模板的内容,那么template中的模板的优先级大于el
1 <body> 2 <div id="app"> 3 {{ msg }},{{ msg }} 4 </div> 5 <script src="vue.js"></script> 6 <script> 7 new Vue({ 8 el:"#app", 9 data(){ 10 return{msg:"aaa"} 11 }, 12 //tempalte中必须是一个闭合标签 13 template:` 14 <div class="app"> 15 <h2>{{ msg }}</h2> 16 </div> 17 ` 18 }) 19 </script> 20 </body>
前端页面
(2)局部组件的使用
1 1.声子 2 //组件的名字,首字母要大写,用来跟标签区分 3 let App={ 4 data(){ 5 return{text:"shy" } 6 }, 7 //template中一定是一个闭合标签 8 template:` 9 <div> 10 <h2>{{ text }}</h2> 11 </div> 12 ` 13 } 14 //以后谁想用App导入就可以 15 16 挂子 17 new Vue({ 18 el:"#app" 19 data(){ 20 return{ 21 msg:"shy" 22 } 23 }, 24 25 //3.用子 26 //template中的模板一定要有一个根元素 27 template:` 28 <div class='app'> 29 <App />//挂子语法 30 </div> 31 `, 32 33 //2.挂子 34 components:{ 35 //如果key和value一样可以只写一个 36 //正常key:value 37 App 38 } 39 })
(3)局部组件使用2
Vue中用到了App组件,App组件中用到了Vheader组件
1 <body> 2 <div id="app"> 3 //步骤2 4 <App></App> 5 </div> 6 <script src="vue.js"></script> 7 <script> 8 let Vheader={ 9 data(){return{text:"dsz" }}, 10 template:` 11 <div> 12 <h3>{{ text }}</h3> 13 </div> 14 ` 15 } 16 17 let App={ 18 data(){ 19 return{text:"shy" } 20 }, 21 template:` 22 <div> 23 <h2>{{ text }}</h2> 24 <Vheader></Vheader> 25 </div> 26 `, 27 components:{ 28 Vheader 29 } 30 } 31 32 new Vue({ 33 el:"#app", 34 data(){ 35 return{ 36 msg:"shy" 37 } 38 }, 39 //用子的另一种方式 40 //步骤1 41 template:` 42 <App/> 43 `, 44 components:{ 45 App 46 } 47 }) 48 </script> 49 </body>
3.全局组件
1 <body> 2 <div id="app"> 3 <App></App> 4 <!--<Vheader></Vheader>--> 5 </div> 6 <script src="vue.js"></script> 7 <script> 8 //第一个参数是组件的名字,第二个参数 options参数 它是全局组件 9 //全局组件语法 10 //1.声子 11 Vue.component("Vasid",{ 12 data(){return{gn:"按钮"}}, 13 template:`<button>{{ gn }}</button>` 14 }) 15 let Vheader={ 16 data(){return{text:"dsz" }}, 17 template:` 18 <div> 19 <h3>{{ text }}</h3> 20 //2.用子(全局组件没有挂子的过程) 21 <Vasid></Vasid> 22 </div> 23 `, 24 components:{ 25 // Vasid 26 } 27 } 28 29 let App={ 30 data(){ 31 return{text:"shy" } 32 }, 33 template:` 34 <div> 35 <h2>{{ text }}</h2> 36 <Vheader></Vheader> 37 </div> 38 `, 39 components:{ 40 Vheader 41 } 42 } 43 44 new Vue({ 45 el:"#app", 46 data(){ 47 return{ 48 msg:"shy" 49 } 50 }, 51 template:` 52 <div> 53 <App/> 54 55 </div> 56 57 `, 58 components:{ 59 App 60 } 61 }) 62 </script> 63 </body>
1 <body> 2 <div id="app"> 3 <App></App> 4 <!--<Vheader></Vheader>--> 5 </div> 6 <script src="vue.js"></script> 7 <script> 8 Vue.component("Vasid",{ 9 data(){return{gn:"按钮"}}, 10 template:` 11 <div> 12 <button>按钮</button> 13 //slot中的内容由调用的组件自定义,大大提高了该组件可扩展性 14 <button><slot></slot></button> 15 </div> 16 ` 17 }) 18 let Vheader={ 19 data(){return{text:"dsz" }}, 20 template:` 21 <div> 22 <h3>{{ text }}</h3> 23 <Vasid>登录</Vasid> 24 <Vasid>注册</Vasid> 25 </div> 26 `, 27 components:{ 28 // Vasid 29 } 30 } 31 32 let App={ 33 data(){ 34 return{text:"shy" } 35 }, 36 template:` 37 <div> 38 <h2>{{ text }}</h2> 39 <Vheader></Vheader> 40 </div> 41 `, 42 components:{ 43 Vheader 44 } 45 } 46 47 new Vue({ 48 el:"#app", 49 data(){ 50 return{ 51 msg:"shy" 52 } 53 }, 54 template:` 55 <div> 56 <App/> 57 58 </div> 59 60 `, 61 components:{ 62 App 63 } 64 }) 65 </script> 66 </body>
5.组件传值
(1)父级往子级组件传值:props
在子组件中用props声明,可以直接在子组件中任意使用
1 <body> 2 <div id="app"> 3 </div> 4 <script src="vue.js"></script> 5 <script> 6 let Child={ 7 data(){ 8 return{myage:18} 9 }, 10 template:`<span>我的年龄是{{myage}},我是child</span>`, 11 } 12 let Father={ 13 data(){ 14 return{myname:"dsz"} 15 }, 16 //1.在子组件中用props声明 17 props:["aaa","bbb"], 18 template:`<span> 19 <p>{{ aaa }}</p> 20 我的名字叫{{ myname }},我是father,用到了'<Child></Child>' 21 <span> {{ bbb.name }}aaa</span> 22 </span>`, 23 components:{ 24 Child 25 } 26 } 27 new Vue({ 28 el:"#app", 29 data(){ 30 return{ 31 //传递的值可以是字符串,布尔值,数组,对象,对象的所有属性 32 text:"父组件的数据", 33 lis:{ 34 id:1, 35 name:"sdf" 36 }} 37 }, 38 template:` 39 //2.挂载自定义属性,也可以传一个固定的值,如ccc属性 40 <span>我是Vue,我用到了father的'<Father :bbb="lis" :aaa="text" ccc="yuan"></Father>'</span> 41 `, 42 components:{ 43 Father 44 } 45 }) 46 </script> 47 </body>
(2)子级往父级组件传值
子组件中 通过$emit()触发父组件中自定义的事件
1 <body> 2 <div id="app"></div> 3 <script src="vue.js"></script> 4 <script> 5 let Child={ 6 data(){ 7 return{num:1} 8 }, 9 //1.写事件,对应方法 10 template:`<button @click="click_child">我是child,我的num是{{ num }}</button>`, 11 methods:{ 12 //2.方法 13 click_child(){ 14 //this.$emit('父组件声明自定义的事件','传值'); 15 this.$emit("clickChild",this.num) 16 } 17 } 18 } 19 let Father={ 20 data(){ 21 return{ 22 aaa:"", 23 name:"shy" 24 } 25 }, 26 template:`<div> 27 //3.父组件中的该方法 28 我是Father,我用到了:<Child @clickChild="clickchild"></Child> 29 father用到了child的{{ aaa }} 30 </div>`, 31 components:{ 32 Child 33 }, 34 methods:{ 35 //4.该方法的声明,参数就是子组件传过来的值,可以随意调用 36 clickchild(val){ 37 console.log(val); 38 this.aaa=val 39 this.$emit("clicked",this.name) 40 } 41 } 42 } 43 new Vue({ 44 el:"#app", 45 data(){ 46 return{ccc:''} 47 }, 48 template:`<div>我是vue,我用到了:<Father @clicked="click_1"></Father>vue用到了father的{{ ccc }}</div>`, 49 components:{ 50 Father 51 }, 52 methods:{ 53 click_1(val){ 54 this.ccc=val 55 } 56 } 57 }) 58 </script> 59 </body>
test1组件===》test2组件
1.前提:这两个方法必须绑定在同一个实例化对象（bus）
2.test1组件要触发事件 $emit('A组件中声明的事件名','值')
3.test2组件要声明事件 $on('事件的名字',function(val){})
1 <body> 2 <div id="app"></div> 3 <script src="vue.js"></script> 4 <script> 5 //1.公交车对象 6 let bus=new Vue(); 7 8 Vue.component("Test1",{ 9 data(){return{meg:"我是test1中的内容"}}, 10 template:`<div>我是test1 <button @click="clickHandler">传递</button></div>`, 11 methods:{ 12 //2.test1组件要触发事件 $emit('A组件中声明的事件名','值') 13 clickHandler(){ 14 bus.$emit("testdata",this.meg) 15 } 16 } 17 }); 18 19 Vue.component("Test2",{ 20 data(){return{ 21 test:'' 22 }}, 23 template:`<div>我是test2,我在test2中用到了test1中的数据:{{ test }}</div>`, 24 created(){ 25 //test2组件要声明事件 $on('事件的名字',function(val){}) 26 bus.$on("testdata",(val)=>{ 27 this.test=val 28 }) 29 } 30 }); 31 32 let Vheader={ 33 data(){return{}}, 34 template:`<div>我是vheader,我用到了<Test1></Test1><Test2></Test2></div>`, 35 36 }; 37 38 let App={ 39 data(){ 40 return{} 41 }, 42 template:`<div>我是App,我用到了:<Vheader></Vheader></div>`, 43 components:{ 44 Vheader 45 } 46 }; 47 48 new Vue({ 49 el:"#app", 50 data(){ 51 return{} 52 }, 53 template:`<div>我是vue,我用到了app:<App></App></div>`, 54 components:{ 55 App 56 } 57 }) 58 </script> 59 </body>