Vue基础-02

作者: 撕心裂肺1232 | 来源:发表于2019-03-18 02:37 被阅读0次

vue2 基础学习02 （Vue组件）
Vue 基础-02-重点
Vue 基础02
Vue基础-02
初识 Vue
最新web前端相关课程学习链接
Vue.js 第一课
02-vue.js基础-Vue实例
Vue基础-day02
02、Vue-基础学习

1.计算属性

image.png

2.组件

创建组件法一：
组件的创建和注册：
①创建组件构造器
②注册组件
③挂载作用域下实例化组件

全局组件：

image.png

简写：

image.png

局部组件：

image.png

简写：

image.png

父子组件

image.png

创建组件法二：
template标签创建全局属性：

image.png

template标签创建局部属性：

image.png

创建组件法三：
script标签创建全局组件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <my-date></my-date>
        </div>

        <!-- 1.创建template标签 -->
        <!-- 注意：template标签最外层只能有一个元素标签 -->
        <script type="text/template" id="div1">
            <div>
                <p>我是由script标签构建的组件</p>
            </div>
        </script>
        
        <script>

            //2.注册全局组件
            Vue.component('my-date',{ 
                // 指定template内容
                template: '#div1'
            });
           
            let vm = new Vue({
                el: '#app',       
                data: {            
                    message1: '你好',
                    message2: 'vue'
                },
                
            })
        
        </script>
    </body>
</html>

image.png

script标签创建局部组件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <my-date></my-date>
        </div>

        <!-- 1.创建template标签 -->
        <!-- 注意：template标签最外层只能有一个元素标签 -->
        <script type="text/template" id="div1">
            <div>
                <p>我是由script标签构建的局部组件</p>
            </div>
        </script>
        
        <script>
            let vm = new Vue({
                el: '#app',       
                data: {            
                    message1: '你好',
                    message2: 'vue'
                },
                //2.注册局部组件
                components: {
                    'my-date': {
                        template: '#div1'
                    }
                }
                
            })
        
        </script>
    </body>
</html>

image.png

3. 组件间的通信

父组件通过prop给子组件传递数据，子组件通过触发$emit()事件来传数据给父组件。

父组件传给子组件：

image.png

多层组件间的通信：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- 5.实例化组件 -->
            <my-parent :title1="message1" :title2="message2"></my-parent>            
        </div>

        <!-- 1.创建组件1模板 -->
        <template id="my_h1">
            <h1>{{msg1}}</h1>
        </template>

        <!-- 1.创建组件2模板 -->
        <template id="my_h2">
            <h2>{{msg2}}</h2>
        </template>


        <!-- 3.创建父组件 -->
        <template id="parent_div">
            <div>
                <child1 :msg1='title1'></child1>
                <child2 :msg2='title2'></child2>
            </div>
        </template>

        <script src="js/vue.min.js"></script>
        <script>
            // 2.实例化子组件
            let child1 = Vue.extend({
                template: '#my_h1',
                props: ['msg1']
            })

            let child2 = Vue.extend({
                template: '#my_h2',
                props: ['msg2']
            })

            // 4.注册父组件
            Vue.component('my-parent',{
                template: '#parent_div',
               // props: ['title1','title2'],
                components: {                        //子组件
                    'child1': child1,
                    'child2': child2
                }
            })


            //2.注册全局组件
          //  Vue.component('my-date',{ 
            //    template: '#my_div',
            //    props: ['msg', 'imgsrc','imgalt']
           // });
           
            let vm = new Vue({
                el: '#app',       
                data: {            
                    message1: '你好',
                    message2: 'vue'
                },
            })
        
        </script>
    </body>
</html>

image.png

4. 自定义事件

子组件通过自定义事件把数据传递给父组件。
每个Vue实例都实现了事件接口（Event interface）即：

使用$on(eventName)监听事件,
使用$emit(eventName)触发事件

另外，父组件可以在使用子组件的地方直接使用v-on来监听子组件的触发事件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>我总共点击了{{countersTotal}}次</p>
            <my-btn @total= "clickTotal"></my-btn>
            <my-btn @total= "clickTotal"></my-btn>
            <my-btn @total= "clickTotal"></my-btn>
            <my-btn @total= "clickTotal"></my-btn>
        </div>

        <!-- 1.组件模板 -->
        <template id="my-btn">
            <button @click="clickbtn">点击了{{counter}}次</button>
        </template>
        <script src="js/vue.min.js"></script>
        <script>
            //2.注册全局组件
            Vue.component('my-btn',{ 
                template: '#my-btn',
                data() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    clickbtn: function() {
                        this.counter += 1;
                        this.$emit('total');
                    }
                }
            });
           
            let vm = new Vue({
                el: '#app',       
                data: {            
                    countersTotal: 0,
                },
                methods: {
                    clickTotal: function() {
                        this.countersTotal += 1;
                    }
                }
            })
        </script>
    </body>
</html>

注意：
$emit()传入的事件名称只能是小写，不能驼峰式。
也可以传参数：

image.png

5.匿名插槽

<slot></slot>

image.png

6.实名插槽

image.png

7.路由

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>路由</h1>
            <!-- 使用router-link来导航 -->
            <router-link to='/test1'>to test1</router-link>
            <router-link to='/test2'>to test2</router-link>

            <router-view></router-view>
        </div>

        <script src="js/vue.min.js"></script>
        <script src="js/vue-router.js"></script>

        <script>

            // 1.创建路由组件
            const test1 = { template: 
                            `<div>111111111
                                <router-link to='/test1/child1'>二级路由test11</router-link>
                                <router-link to='/test1/child2'>二级路由test22</router-link>
                                <br>
                                <router-view></router-view>
                            </div>` };
            const test2 = { template: '<div>2222222222</div>' };

            const test11 = { template: '<div>test11</div>'};
            const test22 = { template: '<div>test22</div>'};

            // 2.定义路由（路径和组件）
            const routes = [
                { 
                    path: '/test1', 
                    component: test1,
                    children: [
                        {path: 'child1', component: test11},
                        {path: 'child2', component: test22},
                        {path: '/', redirect: 'child1'}
                    ],

                },
                { path: '/test2', component: test2},
                { path: '/', redirect: '/test1'}
            ]

            // 3.创建router实例
            const router = new VueRouter({
                routes     //== routes: routes
            })

            // 4.创建和挂载根实例（注入路由）
            let vm = new Vue({       
                data: {            
                    message1: '你好',
                    message2: 'vue'
                },
                router
            }).$mount('#app');
        
        </script>
    </body>
</html>