vue组件

Vue组件

一、组件介绍

每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

二、局部组件

<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>

局部组件

三、全局组件

<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>

全局组件

四、父组件传递数据给子组件

通过绑定属性的方式进行数据传递

<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>

父组件传递数据给子组件

五、子组件传递数据给父组件

通过发送事件请求的方式进行数据传递

<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>

子组件传递数据给父组件

六、父子组件实现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

七、搭建Vue开发环境

1、安装nodeJS

官网下载安装：https://nodejs.org/zh-cn/

2、安装脚手架

vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)

安装全局vue：npm install -g @vue/cli

在指定目录创建vue项目：vue create my-project

进入项目目录启动项目：npm run serve

通过指定服务器路径访问项目页面：http://localhost:8080/

3、项目创建

babel：是一个 JavaScript 编译器。
eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

4、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