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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。