vue組件

時間  2019-11-24
標籤 vue 組件 简体版
原文   原文鏈接

Vue組件

1、組件介紹

  • 每個組件都是一個vue實例javascript

  • 每一個組件均具備自身的模板template，根組件的模板就是掛載點html

  • 每一個組件模板只能擁有一個根標籤vue

  • 子組件的數據具備做用域，以達到組件的複用java

2、局部組件

<div id="app">
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script>
    var localTag = {
        data () {
            return {
                count: 0
           }
       },
        template: '<button @click="btnAction">局部{{ count }}</button>',
        methods: {
            btnAction () {
                this.count ++
           }
       }
   }
    new Vue({
        el: "#app",
        components: {
            'local-tag': localTag
       }
   })
</script>
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>局部組件</title>
 6     <script type="text/javascript" src="js/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <!-- 錯的 -->
11         <!-- <localTag></localTag> -->
12 
13         <!-- ① -->
14         <!-- <localtag></localtag> -->
15         
16         <!-- ② ③ ④ ⑤ -->
17         <local-tag></local-tag>
18         <local-tag></local-tag>
19 
20         <!-- 總結：組件與html公用的名稱(組件名、方法名、變量名)，不要出現大寫，提倡使用-語法 -->
21     </div>
22 </body>
23 <script type="text/javascript">
24     // 建立局部組件:就是一個擁有模板(知足vue寫法)的對象
25     var localTag = {
26         // 模板
27         // 錯誤: 只能解析第一個標籤，以它做爲根標籤
28         // template: '<div>局部組件1</div><div>局部組件2</div>'
29         template: '\
30         <div>\
31             <div>局部組件1</div>\
32             <div>局部組件2</div>\
33         </div>'
34     }
35     // 局部組件須要被使用它的父組件註冊才能在父組件中使用
36 
37     // 模板: html代碼塊
38     // 根組件，擁有模板，能夠顯式的方式來書寫template，通常不提倡，模板就是掛載點及內部全部內容
39     // 注：掛載點內部通常不書寫任何內容
40     new Vue({
41         el: '#app', // old
42         // template: '<div></div>' // new
43         // 用components進行組件的註冊
44 
45         // ①
46         // components: {
47         //     'localtag': localTag
48         // }
49 
50         // ②
51         // components: {
52         //     'local-tag': localTag
53         // }
54 
55         // ③
56         // components: {
57         //     'localTag': localTag
58         // }
59 
60         // ④
61         components: {
62              'LocalTag': localTag
63         }
64 
65         // ⑤
66         // ES6 key與value一直，能夠單獨寫key
67         // components: {
68         //     localTag
69         // }
70     })
71 </script>
72 </html>
局部組件 
 

3、全局組件

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script>
 Vue.component('global-tag', {
  data () {
   return {
    count: 0
   }
  },
  template: '<button @click="btnAction">全局{{ count }}</button>',
  methods: {
   btnAction () {
    this.count ++
   }
  }
 })
    new Vue({
        el: "#app"
   })
</script>
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>全局組件</title>
 6     <script type="text/javascript" src="js/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <global-tag></global-tag>
11         <global-tag></global-tag>
12     </div>
13 </body>
14 <script type="text/javascript">
15     // 建立全局組件： 組件名, {template:''}
16     Vue.component('global-tag', {
17         // data: function () {
18         //     return {
19         //         num: 0
20         //     }
21         // },
22         data () {
23             return {
24                 num: 0
25             }
26         },
27         template: '<button @click="btnClick">點擊了{{num}}下</button>',
28         methods: {
29             btnClick () {
30                 console.log("你丫點我了！！！");
31                 this.num ++
32             }
33         }
34     })
35 
36     new Vue({
37         el: '#app',
38         data: {
39 
40         }
41     })
42 </script>
43 </html>
全局組件 
 

4、父組件傳遞數據給子組件

  • 經過綁定屬性的方式進行數據傳遞node

<div id="app">
    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
 Vue.component('global-tag', {
  props:['sup_data1', 'supdata2'],
  template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
 })
 new Vue({
  el: '#app',
  data: {
   sup_data1: '數據1',
   sup_data2: '數據2'
  }
 })
</script>
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>父傳子</title>
 6     <script type="text/javascript" src="js/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <!-- 經過屬性綁定的方式 -->
11         <!-- <global-tag v-bind:abc='sup_d1' :supD2='sup_d2'></global-tag> -->
12         <global-tag v-bind:abc='sup_d1' :sup_d2='sup_d2'></global-tag>
13         <!-- 模板名用-鏈接命名，屬性名用_鏈接命名 -->
14     </div>
15 </body>
16 <script type="text/javascript">
17     // 子組件須要接受數據
18     Vue.component('global-tag', {
19         // 經過props來接收綁定數據的屬性
20         // props: ['abc', 'supd2'],
21         props: ['abc', 'sup_d2'],
22         // template: '<div><p @click="fn">{{ abc }}</p></div>',
23         template: '<div><p @click="fn(abc)">{{ abc }}</p></div>',
24         methods: {
25             // fn () {
26             //     alert(this.abc)
27             // }
28             fn (obj) {
29                 console.log(obj, this.sup_d2)
30             }
31         }
32     })
33 
34     // 數據是父組件的
35     new Vue({
36         el: '#app',
37         data: {
38             sup_d1: "普通字符串",
39             sup_d2: [1, 2, 3, 4, 5]
40         }
41     })
42 </script>
43 </html>
父組件傳遞數據給子組件 
 

5、子組件傳遞數據給父組件

  • 經過發送事件請求的方式進行數據傳遞webpack

<div id="app">
    <global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
 Vue.component('global-tag', {
  data () {
   return {
    sub_data1: "數據1",
    sub_data2: '數據2'
   }
  },
  template: '<div @click="clickAction">發生</div>',
  methods: {
   clickAction () {
    this.$emit('send_action', this.sub_data1, this.sub_data2)
   }
  }
 })
 new Vue({
  el: '#app',
  methods: {
   receiveAction (v1, v2) {
    console.log(v1, v2)
   }
  }
 })
</script>
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>子傳父</title>
 6     <script type="text/javascript" src="js/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <!-- 經過發送事件請求的方式進行數據傳遞(數據做爲請求事件的參數) -->
11         <global-tag @send_data='receiveData'></global-tag>
12         <p>{{ msg }}</p>
13     </div>
14 </body>
15 <script type="text/javascript">
16     Vue.component('global-tag', {
17         data () {
18             return {
19                 sub_v1: '普通字符串',
20                 sub_v2: [1, 2, 3, 4, 5]
21             }
22         },
23         template: '<button @click="btnClick">發送</button>',
24         methods: {
25             btnClick () {
26                 console.log("子>>> ", this.sub_v1, this.sub_v2);
27                 // 經過emit方法將數據已指定的事件發生出去
28                 // 事件名, 參數...
29                 this.$emit("send_data", this.sub_v1, this.sub_v2)
30             }
31         }
32     })
33 
34     // 數據是父組件的
35     new Vue({
36         el: '#app',
37         data: {
38             msg: ''
39         },
40         methods: {
41             receiveData(obj1, obj2) {
42                 console.log("父>>> ", obj1, obj2)
43                 this.msg = obj2;
44             }
45         }
46     })
47 </script>
48 </html>
子組件傳遞數據給父組件 
 

6、父子組件實現todoList

<div id="app">
    <div>
        <input type="text" v-model='value'>
        <button @click='click'>提交</button>
    </div>
    <ul>
        <item
              v-for='(e, i) in list'
              :key='i'
              :ele='e'
              :index='i'
              @delete='deleteAction'
              ></item>
    </ul>
</div>
<script type="text/javascript">
 Vue.component('item', {
  props: ['ele', 'index'],
  template: '<li @click="item_click">{{ ele }}</li>',
  methods: {
   item_click: function () {
    this.$emit('delete', this.index)
   }
  }
 })
 new Vue({
  el: '#app',
  data: {
   value: '',
   list: [],
  },
  methods: {
   click: function () {
    this.list.push(this.value)
    this.value = ''
   },
   deleteAction: function (index) {
    this.list.splice(index, 1)
   }
  }
 })
</script>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>組件todoList</title>
 6     <script type="text/javascript" src="js/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <div>
11             <input type="text" v-model='in_val'>
12             <button @click='pushAction'>提交</button>
13         </div>    
14         <!-- <ul>
15             <li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>
16         </ul> -->
17 
18         <!-- 父 將list傳輸給 子 -->
19         <todo-list :list_data='list' @delete_action='deleteAction'></todo-list>
20 
21     </div>
22 </body>
23 <script type="text/javascript">
24     Vue.component('todo-list', {
25         props: ['list_data'],
26         template: '<ul><li v-for="(e, i) in list_data" :key="i" @click="li_action(i)">{{e}}</li></ul>',
27         methods: {
28             li_action (index) {
29                 // 子 反饋index給 父
30                 this.$emit('delete_action', index);
31             }
32         }
33     })
34 
35 
36     new Vue({
37         el: '#app',
38         data: {
39             in_val: '',
40             list: []
41         },
42         methods: {
43             pushAction () {
44                 this.list.push(this.in_val);
45                 this.in_val = ''
46             },
47             deleteAction (index) {
48                 this.list.splice(index, 1);
49             }
50         }
51     })
52 </script>
53 </html>
組件實現todolist 
 

7、搭建Vue開發環境

一、安裝nodeJS

二、安裝腳手架

  • vue官網 => 學習 => 教程 => 安裝 => 命令行工具(CLI)vue-cli

安裝全局vue：npm install -g @vue/cli
​
在指定目錄建立vue項目：vue create my-project
​
進入項目目錄啓動項目：npm run serve
​
經過指定服務器路徑訪問項目頁面：http://localhost:8080/

三、項目建立

babel：是一個 JavaScript 編譯器。
eslint：是一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。

四、vue基礎模板

<template>
 
</template>
<script>
    export default {
        
   }
</script>
<style scoped>
</style>
npm install -g vue-cli​vue init webpack my-project​npm install -g cnpm --registry=https://registry.npm.taobao.org
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程