汤小洋Vue全家桶笔记-day03 组件与组件间通信&vue-router、vue-cli和单文件组件

作者: 小疯子 分类: Vue 发布时间: 2019-11-13 21:25

Vue.js 五天 汤小洋

一、 组件component

1. 什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码
组件是自定义元素(对象)

2. 定义组件的方式(01.html)

方式1:先创建组件构造器,然后由组件构造器创建组件
方式2:直接创建组件

代码示例:

<div id="itany">
        <hello></hello>
        <my-world></my-world>
    </div>
```javascript
<script>
    /**
     * 方式1:先创建组件构造器,然后由组件构造器创建组件
     */
    //1.使用Vue.extend()创建一个组件构造器
    var MyComponent=Vue.extend({
        template:'<h3>Hello World</h3>'
    });
    //2.使用Vue.component(标签名,组件构造器),根据组件构造器来创建组件
    Vue.component('hello',MyComponent);

    /**
     * 方式2:直接创建组件(推荐)
     */
    // Vue.component('world',{
    Vue.component('my-world',{
        template:'<h1>你好,世界</h1>'
    });

    var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
        el:'#itany',
        data:{
            msg:'网博'
        }
    }); 
</script>

3. 组件的分类

分类:全局组件、局部组件 02.html

代码示例:

<div id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>
    <script>
        /**
         * 全局组件,可以在所有vue实例中使用
         */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',
            data:function(){ //在组件中存储数据时,必须以函数形式,函数返回一个对象
                return {
                    name:'alice'
                }
            }
        });

        /**
         * 局部组件,只能在当前vue实例中使用
         */
        var vm=new Vue({
            el:'#itany',
            data:{
                name:'tom'
            },
            components:{ //局部组件,可以读取此vue实例中的name属性值,也可以获取组件自身中定义的data age值。
                'my-world':{
                    template:'<h3>{{age}}</h3>',
                    data(){
                        return {
                           age:25}
                   }
                }
            }
        }); 
    </script>

4. 引用模板 03.html

将组件内容放到模板<template>中并引用
如果组件模板内容过多的情况下使用模板标签,me:关于模板<template>标签在html设置后并不会显示,而是用于去定义component的,只有创建了component,template才生效

代码示例:

<div id="itany">
        <my-hello></my-hello><!-- 创建的两个组件是各自独立的,只是用相同的代码创建出来而已 -->
        <my-hello></my-hello>
    </div>
    <template id="wbs">
        <!-- <template>必须有且只有一个根元素 -->
        <div>
            <h3>{{msg}}</h3>
            <ul>
                <li v-for="value in arr">{{value}}</li>
            </ul>
        </div>
    </template>

    <script>
        var vm=new Vue({
            el:'#itany',
            components:{
                'my-hello':{ // my-hello其实是组件的id,也就是使用时候的标签名
                    name:'wbs17022',  //指定组件的名称,默认为标签名,可以不设置,页面展示的元素名为<Wbs17022>
                    template:'#wbs', //和template的id值对应
                    data(){
                        return {
                            msg:'欢迎来到南京网博',
                            arr:['tom','jack','mike']
                        }
                    }
                }
            }
        }); 
    </script>

5. 动态组件 04.html

<component :is="">组件
多个组件使用同一个挂载点,然后动态的在它们之间切换 me: 都是在同一个位置显示的,只是根据不同的条件显示的组件不同

<keep-alive>组件缓存非活动组件:https://cn.vuejs.org/v2/api/#component
代码示例:

<div id="itany">
        <button @click="flag='my-hello'">显示hello组件</button>
        <button @click="flag='my-world'">显示world组件</button>
        <div>
            <!-- 使用keep-alive组件缓存非活动组件,可以保留状态,避免重新渲染,默认每次都会销毁非活动组件并重新创建 -->
            <keep-alive>
                <component :is="flag"></component>  <!-- is后面跟的是一个变量名称,变量名值是组件的标签名-->
            </keep-alive>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                flag:'my-hello'
            },
            components:{
                'my-hello':{
                    template:'<h3>我是hello组件:{{x}}</h3>',
                    data(){
                        return {
                            x:Math.random()
                        }
                    }
                },
                'my-world':{
                    template:'<h3>我是world组件:{{y}}</h3>',
                    data(){
                        return {
                            y:Math.random()
                        }
                    }
                }
            }
        }); 
    </script>

二、 组件间数据传递 05.html

1. 父子组件

在一个组件内部定义另一个组件,称为父子组件
子组件只能在父组件内部使用
默认情况下,子组件无法访问父组件中的数据,每个组件实例的作用域是独立的 me:父组件不能访问子组件的数据,子组件也不能访问父组件的数据,二者之间没有关系

代码示例:

<div id="itany">
        <my-hello></my-hello>
    </div>
    <template id="hello">
        <div>
            <h3>我是hello父组件</h3>
            <h3>访问自己的数据:{{msg}},{{name}},{{age}},{{user.username}}</h3>
            <hr>
            <my-world></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是world子组件</h4> <h4>访问父组件中的数据此时不可行不可行:{{message}}</h4>
        </div>
    </template>

    <script>
        var vm=new Vue({ //根组件
            el:'#itany',
            components:{
                'my-hello':{  //父组件
                    data(){
                        return {
                            msg:'网博',
                            name:'tom',
                            age:23,
                            user:{id:9527,username:'唐伯虎'},
                        }
                    },
                    template:'#hello',
                    components:{
                        'my-world':{ //子组件
                            template:'#world'
                        }
                    }
                }
            }
        }); 
    </script>

2. 组件间数据传递 (通信)

2.1 子组件访问父组件的数据

a)在调用子组件时,绑定想要获取的父组件中的数据:<my-world :message="msg" :name="name" :age="age" :user="user"></my-world>
b)在子组件内部,使用props选项声明获取的数据,即接收来自父组件的数据
总结:父组件通过props向下传递数据给子组件
注:组件中的数据共有三种形式:data、props、computed 
me:props设置:https://cn.vuejs.org/v2/api/#props

代码示例:

<template id="world">
<div>
<h4>我是world子组件</h4>
<h4>访问父组件中的数据:{{message}},{{name}},{{age}},{{user.username}}</h4>
</div>

</template>
components:{
                        'my-world':{ //子组件
                            data(){
                                return {
                                    sex:'male',
                                    height:180.5
                                }
                            },
                            template:'#world',
                            // props:['message','name','age','user'] //简单的字符串数组
                            props:{ //也可以是对象,允许配置高级设置,如类型判断、数据校验、设置默认值
                                message:String,
                                name:{
                                    type:String,
                                    required:true
                                },
                                age:{
                                    type:Number,
                                    default:18,
                                    validator:function(value){ //如果不满足要求,则会提示错误
                                        return value>=0;
                                    }
                                },
                                user:{
                                    type:Object,
                                    default:function(){ //对象或数组的默认值必须使用函数的形式来返回
                                        return {id:3306,username:'秋香'};
                                    }
                                }
                            }

}

2.2 父组件访问子组件的数据

a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件,事件名自定义
<template id="world">
        <div>
            <h4>我是world子组件</h4>
            <h4>访问自己的数据:{{sex}},{{height}}</h4>
            <button @click="send">将子组件的数据向上传递给父组件</button>
        </div>
</template>
components:{
                        'my-world':{ //子组件
                            data(){
                                return {
                                    sex:'male',
                                    height:180.5
                                }
                            },
                            template:'#world',
                            methods:{
                                send(){
                                    // console.log(this);  //此处的this表示当前子组件实例
                                    this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件,发送数据
                                }
                            }
                        }
                    }

b)父组件在使用子组件的地方监听子组件触发的事件(通过@e-world写法来监听,后面跟随的方法是侦听到事件后要执行的方法),并在父组件中定义方法,用来获取数据
<template id="hello">
  <div>
    <h3>我是hello父组件</h3>
    <h3>访问自己的数据:{{msg}},{{name}},{{age}},{{user.username}}</h3>
    <h3>访问子组件的数据:{{sex}},{{height}}</h3>
    <hr>
    <my-world :message="msg" :age="age" @e-world="getData"></my-world>
  </div>
</template>
var vm=new Vue({ //根组件
            el:'#itany',
            components:{
                'my-hello':{  //父组件
                    methods:{
                        getData(sex,height){
                            this.sex=sex;
                            this.height=height;
                        }
                    },
                    data(){
                        return {
                            msg:'网博',
                            name:'tom',
                            age:23,
                            user:{id:9527,username:'唐伯虎'},
                            sex:'',
                            height:''
                        }
                    },...

总结:子组件通过events给父组件发送消息,实际上就是子组件把自己的数据发送到父组件

3. 单向数据流 06.html

props是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来
而且不允许子组件直接修改父组件中的数据,报错
解决方式:
    方式1:如果子组件想把它作为局部数据来使用,可以将数据存入另一个变量中再操作,不影响父组件中的数据
    方式2:如果子组件想修改数据并且同步更新到父组件,两个方法:
        a.使用.sync(1.0版本中支持,2.0版本中不支持,2.3版本又开始支持)
            需要显式地触发一个更新事件
        b.可以将父组件中的数据包装成对象,然后在子组件中修改对象的属性(因为对象是引用类型,指向同一个内存空间),推荐    

代码示例:

<div id="itany">
        <h2>父组件:{{name}}</h2>
        <input type="text" v-model="name">
        <h2>父组件:{{user.age}}</h2>
        <hr>
        <my-hello :name.sync="name" :user="user"></my-hello>
    </div>

    <template id="hello">
        <div>
            <h3>子组件:{{name}}</h3>
            <h3>子组件:{{user.age}}</h3>
            <button @click="change">修改数据</button>
        </div>
    </template>

    <script>
        var vm=new Vue({ //父组件
            el:'#itany',
            data:{
                name:'tom',
                user:{
                    name:'zhangsan',
                    age:24
                }
            },

            components:{
                'my-hello':{ //子组件
                    template:'#hello',
                    props:['name','user'],
                    data(){
                        return {
                            username:this.name //方式1:将数据存入另一个变量中再操作,me:此时父组件的name值更改,username不会自动监视进行修改,可以用computed设置计算属性但是没有太多意义,因为计算属性在方法中是没法修改的
                        }
                    },

                    methods:{
                        change(){
                            // this.username='alice';
                            // this.name='alice'; me: 不可以直接修改props中父组件传递过来的数据
                            // this.$emit('update:name','alice'); //方式2:a.使用.sync,需要显式地触发一个更新事件
                            this.user.age=18;//光换属性不是真的换对象,换对象是this.user={}直接给它一个新对象
                        }
                    }
                }
            }
        }); 
    </script>

4. 非父子组件间的通信 07.html

非父子组件间的通信,可以通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data =&gt; {});

代码示例:

<div id="itany">
        <my-a></my-a>
        <my-b></my-b>
        <my-c></my-c>
    </div>

    <template id="a">
        <div>
            <h3>A组件:{{name}}</h3>
            <button @click="send">将数据发送给C组件</button>
        </div>
    </template>
    <template id="b">
        <div>
            <h3>B组件:{{age}}</h3>
            <button @click="send">将数组发送给C组件</button>
        </div>
    </template>
    <template id="c">
        <div>
            <h3>C组件:{{name}},{{age}}</h3>
        </div>
    </template>

    <script>
        //定义一个空的Vue实例
        var Event=new Vue();
        var A={
            template:'#a',
            data(){
                return {
                    name:'tom'
                }
            },
            methods:{
                send(){
                    Event.$emit('data-a',this.name); // 发送事件
                }
            }

        }

        var B={
            template:'#b',
            data(){
                return {
                    age:20
                }
            },
            methods:{ // 如果在组件的mounted中发送,可能时机问题造成组件C还没侦听但是已经在B中触发了,所以导致侦听不到,所以应该先侦听再触发
                send(){
                    Event.$emit('data-b',this.age);
                }
            }
        }

        var C={
            template:'#c',
            data(){
                return {
                    name:'',
                    age:''
                }
            },
            mounted(){ //在模板编译完成后执行
                Event.$on('data-a',name => { //箭头回调函数的this指的是当前C,不会产生新的组件
                    this.name=name;
                    // console.log(this); 如果使用方法而非回调函数的话 function(name){console.log(this);中的this指的是Event}
                });
                Event.$on('data-b',age => { // 监听事件
                    this.age=age;
                });
            }
        }
        var vm=new Vue({
            el:'#itany',
            components:{
                'my-a':A,//和之前直接在components中定义对象效果一样
                'my-b':B,
                'my-c':C
            }
        }); 
    </script>

三、 slot内容分发 08.html

本意:位置、槽 https://cn.vuejs.org/v2/guide/components-slots.html
作用:用来获取组件中的原内容,类似angular中的transclude指令 me:获取组件标签中写的内容

代码示例:

<div id="itany">
        <!-- <my-hello>wbs17022</my-hello> -->
        <my-hello>
            <ul slot="s1"> <!-- 具名插槽 -->
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
            <ol slot="s2">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </my-hello>
    </div>

    <template id="hello">
        <div>
            <slot name="s2"></slot>
            <h3>welcome to itany</h3>
            <!-- <slot>如果没有原内容,则显示该内容,如果有就显示设置的内容</slot> -->
            <slot name="s1"></slot>
        </div>
    </template>
    <script>
        var vm=new Vue({
            el:'#itany',
            components:{
                'my-hello':{
                    template:'#hello'
                }
            }
        }); 
    </script>

四、 vue-router路由

1. 简介

使用Vue.js开发SPA(Single Page Application)单页面应用
根据不同url地址,显示不同的内容,但显示在同一个页面中,称为单页面应用

参考 

https://router.vuejs.org/zh/

bower info vue-router
cnpm install vue-router -S
me:将vue-router.js拷贝到js路径下

2. 基本用法 09.html

a.布局
b.配置路由

https://router.vuejs.org/zh/guide/

<style>
        /* .router-link-active{ 查看页面导航标签元素当前选中的的class名称
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        } */
        .active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        }
    </style>
<script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="itany">
        <div>
            <!-- 使用router-link组件来定义导航,to属性指定链接url,最后默认变成a标签 -->
            <router-link to="/home">主页</router-link> 
            <router-link to="/news">新闻</router-link><!-- 主页 和 新闻 都是定义组件来进行显示的 -->
        </div>
        <div>

            <!-- router-view用来显示路由内容 -->
             <!-- 路由出口 -->
             <!-- 路由匹配到的组件将渲染在这里 -->               <router-view></router-view>          </div>     </div>     <script>         //1.定义组件          var Home={             template:'<h3>我是主页</h3>'         }         var News={             template:'<h3>我是新闻</h3>'         }         //2.配置路由 ,数组中的每个对象代表一个路由,将组件放到路由配置中,vue实例会引用路由配置也就配置了组件了          const routes=[ const定义的变量不可以修改,而且必须初始化。 .var定义的变量可以修改,如果不初始化会输出undefined,不会报错。.let是块级作用域,函数内部使用let定义后,对函数外部无影响。             {path:'/home',component:Home},             {path:'/news',component:News},             {path:'*',redirect:'/home'} //重定向。目前是实现默认显示根显示,要不然一开始home和news都不显示          ]         //3.创建路由实例          const router=new VueRouter({             routes, //简写,相当于routes:routes,如果配置路由名字为routes1,则必须这样routes:routes1,只有名字等于routes才可以简写             // mode:'history', //更改模式,hash模式会模拟一个完整的url显示在浏览器url中/day03/09.html#/news, https://router.vuejs.org/zh/api/#mode             linkActiveClass:'active' //更新活动链接的class类名         });         //4.创建根实例并将路由挂载到Vue实例上          new Vue({             el:'#itany',             router //注入路由         });     </script>

3. 路由嵌套和参数传递 10.html

传参的两种形式:
    a.查询字符串:login?name=tom&pwd=123
        {{$route.query}}
    b.rest风格url:regist/alice/456
        {{$route.params}}

代码示例:

<head>
    <meta charset="UTF-8">
    <title>路由嵌套和参数传递</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        .active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>

<body>
    <div id="itany">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>

        <div>
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <router-view></router-view>
            </transition>
        </div>

        <hr>
        <button @click="push">添加路由</button>
        <button @click="replace">替换路由</button>
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul><!-- 因为是user路由的嵌套,所以定义的路由连接地址是/user/xxx;然后默认router-link转换为a标签,这里想转为li标签,则使用tag-->
                <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>
                <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link><!-- 获取参数:{  "username": "alice",  "password": "456"},/user/regist/alice/456-->
            </ul>
            <!-- 子路由内容显示 -->
            <router-view></router-view> 
        </div>
    </template>
    <script>
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={ https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1
            template:'<h4>用户登陆。。。获取参数:{{$route.query}},{{$route.path}}</h4>'
        }
        var Regist={
            template:'<h4>用户注册。。。获取参数:{{$route.params}},{{$route.path}}</h4>'
        }
        const routes=[
            {
                path:'/home',
                component:Home
            },
            {
                path:'/user',
                component:User,
                children:[
                   {
                        path:'login',
                        component:Login
                    },
                    {
                        path:'regist/:username/:password', //必须在这里制定,否则使用的时候不知道是参数捏还是子路由子子路由捏
                        component:Regist
                    }
                ]
            },

            {
                path:'*',
                redirect:'/home'
            }
        ]

        const router=new VueRouter({
            routes, //简写,相当于routes:routes
            linkActiveClass:'active' //更新活动链接的class类名
        });
        new Vue({
            el:'#itany',
            router, //注入路由
            methods:{
                push(){
                    router.push({path:'home'}); //添加路由,切换路由
                },
                replace(){
                    router.replace({path:'user'}); //替换路由,没有历史记录
                }
            }
        });
    </script>
</body>

4. 路由实例的方法 10.html见上例子的酒红色部分

router.push()  添加路由,功能上与<route-link>相同,区别就是<route-link>是死的要写在页面上的,而这个是活的,可以动态添加,实际上就是切换路由
router.replace() 替换路由,不产生历史记录    

5. 路由结合动画

10.html css/animate.css

五、 单文件组件

1. .vue文件

.vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js

.vue文件由三部分组成:<template>、<style>;、<script>;
   <template>;
        html
    </template>;

    <style>;
        css
    </style>;

    <script>;
        js
    </script>;

2. vue-loader

浏览器本身并不认为.vue文件,所以必须对.vue文件进行加载解析,此时需要vue-loader
类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的     me:webpack相当于一个工具,工具中使用的技术是各种loader,通过二者结合实现对应资源的加载——loader和打包——webpack?

3. webpack

webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理
实际上,webpack是通过不同的loader将这些资源加载后打包,然后输出打包后文件 
简单来说,webpack就是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出

[官网](http://webpack.github.io/)     

webpack版本:v1.x v2.x

webpack有一个核心配置文件:webpack.config.js,必须放在项目根目录下

4. 示例,步骤:

4.1 创建项目,目录结构 如下:

webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件,项目目录下执行cmd命令 npm init --yes就有了

4.2 编写App.vue

简单的三个部分都包含的vue文件
<template>
  <h1>welcome</h1>
  <h2 @click="change">{{name}}</h2>
  <User></User>
</template>

<script>
//导入模块
    import User from './components/User.vue'
    // console.log(111);
    export default {
        data(){
            return {
                name:'tom'
            }
        },
        methods:{
            change(){
                this.name='汤姆';
            }
        },
        components:{
            User
        }
    }
</script>

<style>
  body{
    background-color:#ccc;
  }
</style>

4.3 安装相关模板

怎么用上面的vue文件,需要安装相关模板

cnpm install vue -S

cnpm install webpack -D  #仅仅是开发的时候需要vue-loader去加载解析.vue文件,而它又需要webpack,线上就没有这个需求了 -D就是开发环境的保存的缩写
cnpm install webpack-dev-server -D

cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install css-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D

cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D  //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板

合并:cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

4.4 编写main.js

在webpack里面每一个文件都是模块,都可以进行资源的引入

/**
* 使用ES6语法引入模板,me:相当于之前在html中通过<script></script>引入
*/
import Vue from 'vue' //会从安装好的模块中找,在node_modules下找vue
import App from './App.vue' //自定义模块,在同一个路径下也必须需要加上 ./

new Vue({
  el:'#app',
  render:function(h){ //使用render函数渲染组件 me:https://cn.vuejs.org/v2/guide/render-function.html,h就是createElement,往页面id=app的元素上渲染它App组件内容?
    return h(App);
  }
});

4.5 编写webpack.config.js

module.exports={
    //配置入口文件
    entry:'./main.js',
    //配置入口文件输出位置
    output:{
        path:__dirname, //项目根路径
        filename:'build.js'
    },
    //配置模块加载器
    module:{
        rules:[
            {
                test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载
                loader:'vue-loader'
            },
            {
                test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载,除了node_modules以外
                loader:'babel-loader',
                exclude:/node_modules/ //排除这个目录
            }
        ]
    }
}

4.6 编写.babelrc

{
  "presets":[
     ["env",{"module":false}]
  ]
}

4.7 编写package.json

定义修改测试脚本:
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8800"
}, 打开浏览器+热加载+端口

还有一个index.html文件内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="build.js"></script>
</body>
</html>

4.8 运行测试

npm run dev    (这里面的dev就是上面红色设置的名字,整个项目详细看代码文件夹:webpack-demo)

me:参考着完整项目代码梳理一下:
首先App.vue和User.vue就是单文件组件,它们就是组件,只不过摘到单独的文件中去了,关于写法和之前直接在页面<script>中定义组件的写法不同,就是有了上面说的三个部分组成template\script\style, 在template中写html页面内容,在script中定义组件包含的数据、方法、子组件等信息,style中就是写样式了。

入口文件main.js,在其中通过es6语法来引入Vue和自定义的App.vue单文件组件,类似于之前的vue根组件创建时候定义components:这个选项添加组件;

为何main.js作为入口文件,是在webpack.config.js中定义的,设置入口文件为main.js,设置编译打包后?输出文件为build.js,这个build.js包含了整个配备好vue实例组件,将这个文件放到访问首页index.html中,同时index.html中的div设置id="app"来于vue实例组件中定义的el属性对应起来

六、 vue-cli脚手架

1. 简介

vue-cli是一个vue脚手架,可以快速构造项目结构
vue-cli本身集成了多种项目模板:
    simple  很少简单
    webpack 包含ESLint代码规范检查和unit单元测试等
    webpack-simple 没有代码规范检查和单元测试
    browserify 使用的也比较多
    browserify-simple

2. 示例,步骤:

2.1 安装vue-cli,配置vue命令环境

cnpm install vue-cli -g
vue --version
vue list

2.2 初始化项目,生成项目模板

语法:vue init 模板名  项目名

2.3 进入生成的项目目录,安装模块包

cd vue-cli-demo
cnpm install

2.4 运行

npm run dev  //启动测试服务
npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

3. 使用webpack模板

vue init webpack vue-cli-demo2

ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格

官网

问题Bug:如果版本升级到node 8.0 和 npm 5.0,控制台会报错:
    GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
解决方法:
    a)降低Node版本到7.9或以下
    b)修改build/dev-server.js文件,如下:
        var hotMiddleware = require('webpack-hot-middleware')(compiler, {
          log: () =&gt; {},
          heartbeat:2000 //添加此行
        })
    参考:https://github.com/vuejs-templates/webpack/issues/731    </code></pre>

七、模块化开发(day04: vue_cli_demo)

1. vue-router模块化

cnpm install vue-router -S

1.1 编辑main.js

1.2 编辑App.vue    me使用插件:https://cn.vuejs.org/v2/api/#Vue-use;this.$route获取下面设置好路由之后的路由信息,下面设置好了,在组件中就可以访问路由对象了,vue-router是一个全局的插件,一次配置了之后所有组件都可以使用

1.3 编辑router.config.js 专门新建一个文件进行路由的配置

2. axios模块化

cnpm install axios -S

使用axios的两种方式:(不是全局插件,每个组件使用都要引入)
方式1:在每个组件中引入axios

import axios from 'axios'
methods:{
    send(){
      axios.get('https://api.github.com/users/tangyang8942')
        .then(resp => {
          console.log(resp.data);
        }).catch(err => {
          console.log(err);
        });
    }
  },

方式2:在main.js中全局引入axios并添加到Vue原型中

import axios from 'axios'
Vue.prototype.$http=axios; 添加vue实例方法$http只想axios
在App.vue中调用axios的方式为
this.$http.get('https://api.github.com/users/tangyang8942')... 其中this指的就是vue实例,.vue文件中的this到底何时代表何东西需要看看

3. 为自定义组件添加事件

3.1 自定义一个按钮组件:components/Mybutton.vue

3.2 App.vue中引入组件并注册:
import MyButton from './components/MyButton.vue'

components:{
MyButton
}
3.3 添加事件:<MyButton @click="send"></MyButton>点击事件不生效自定义按钮绑定不了事件,https://cn.vuejs.org/v2/api/#v-on 添加.nativ即可监听组件根元素的原生事件
<MyButton @click.native="send"></MyButton>
0

发表评论

电子邮件地址不会被公开。 必填项已用*标注