vue组件

时间 2019-12-07

标签 vue 组件繁體版

原文原文链接

一.表单输入绑定

1.数据双向绑定,v-model

 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>

双向绑定原理图前端

双向数据绑定实现效果vue

也能够绑定value本身实现bootstrap

 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.lazy:回车时才监听app

v-model.number:只能输入数字框架

v-model.trim:清除先后没用的空格this

二.vue社区

vue awesome,vue中文社区:里面有大量的库和框架,如bootstrap -vue能够代替bootstrapspa

https://www.vue-js.com/topic/5b9699fccd6b2d5e4fd9e53e三组件双向绑定

三.组件

1.组件树

2.局部组件

(1)若是仅仅是在实例化vue对象中,即有el,又有template,且template中定义了模板的内容,那么template中的模板的优先级大于elcode

 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.全局组件

Vue中用到了App组件,App组件中用到了Vheader组件,Vheader组件中用到了Vasid全局组件

 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>

4.slot内置分发组件

 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>

(3)平行组件传值

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>