VUE学习笔记（三）

2021-11-14 10:36:28

九、Vue的组件化

9.1 什么是“组件化”

Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象，在Vue中，万物皆组件。
也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。

要想实现组件化，需要在页面中注册组件：关于注册的方式有两种，分别是全局注册和本地注册。

9.1.1 组件的全局注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的全局注册</title>
</head>
<body>
    <div id="app">
        <model1></model1>
        <model1></model1>
        <model1></model1>
    </div>
        <hr/>
    <div id="app1">
        <model1></model1>
        <model1></model1>
        <model1></model1>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    //通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。
    Vue.component("model1",{
        template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
        data:function(){
            return {
                title:"hello vue"
            }
        },
        methods:{
            btnfn:function(){
                alert("hello !!!");
            }
        }
    });
    new Vue({
        el:'#app'
    })
    new Vue({
        el:'#app1'
    })
</script>
</html>

9.1.2 组件的本地注册

vue的全局注册，也就意味着在页面的任意一个被vue绑定过的div中，都可以使用全局注册了的vue组件。
但是，如果是对vue组件进行本地注册，那么在其他被vue绑定的div中，不能使用该组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的本地(局部)注册</title>
</head>
<body>
    <div id="app">
        <model11></model11>
    </div>
    <hr/>
    <!--在这里使用组件model11会报错-->
    <div id="app1">
        <model11></model11>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        components:{
            "model11":{
                template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
                data:function(){
                    return {
                        title:"hello vue"
                    }
                },
                methods:{
                    btnfn:function(){
                        alert("hello !!!");
                    }
                }
            }
        }
    })
    new Vue({
        el:'#app1'
    })
</script>

9.1.3 小结

这是一个完整的Vue组件。该组件包含了三个部分：template（html视图层内容）、script（Model层）、style（CSS样式）。这样封装好的组件可以被复用，也可以作为其他组件的组成部分而被封装——Java的面向对象再次体现。

特点1： template标签内，必须有且只能有一个根标签。

特点2： componet中注册的组件中的data，必须是已函数的形式。
如下：

data:function(){
     return {
           title:"hello vue"
     }
 }

9.2 组件的生命周期

Vue中的组件也是有生命周期的。一个Vue组件会经历：初始化、创建、绑定、更新、销毁等阶段，不同的阶段，都会有相应的生命周期钩子函数被调用。

<html>
    <head>
        <meta charset="UTF-8">
        <title>生命周期</title>
    </head>
    <body>
        <div id="app1">
            {{title}}
            <button type="button" @click="changeTitle">change title</button>
            <button type="button" @click="destroy">destroy</button>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script>
        new Vue({
            el:"#app1",
            data:{
                title:"this is title"
            },
            methods:{
                changeTitle:function(){
                    this.title= "new title";
                },
                destroy:function(){
                    this.$destroy();
                }
            },
            beforeCreate(){
                console.log("beforeCreate")
            },
            created(){
                console.log("created")
            },
            beforeMount(){
                console.log("beforeMount")
            },
            mounted(){
                console.log("mounted")
            },
            beforeUpdate(){
                console.log("beforeUpdate")
            },
            updated(){
                console.log("updated")
            },
            beforeDestroy(){
                console.log("beforeDestory")
            },
            destroyed(){
                console.log("destory")
            }
        })
    </script>
</html>

组件的生命周期钩子

十、使用Vue-Cli搭建Vue项目

10.1 什么是vue-cli

cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。

10.2 node.js的介绍及安装

node.js的介绍

node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。

node.js的安装

从官网下载安装即可：
http://nodejs.cn/download/
| 测试node.js是否安装成功：在DOS窗口中输入“node -v” 查看版本，如果看到版本，就表示安装成功。 |

10.3 使用node.js安装vue-cli

使用如下命令安装vue-cli

npm install vue-cli -g

npm：使用node.js的命令

install：安装

vue-cli：要安装的vue-cli

-g：全局安装

| 当出现以下界面，表示正在安装： |

如果使用npm官方镜像速度比较慢，可以使用淘宝镜像来安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后使用npm命令时就可以替换成cnpm

cnpm install vue-cli -g
cnpm install
cnpm run dev

10.4 使用vue-cli下载项目骨架搭建我们的项目

就像maven一样，vue为我们提供了一些官方项目骨架。使用vue list命令可以列出当前官方提供的骨架，可以使用这些骨架来快速搭建出项目。

vue list

10.5 创建项目目录并打开

mkdir e:/my-vue-project
cd e:/my-vue-project

10.6 使用Webpack骨架快速创建项目

在my-vue-project目录中使用以下命令下载项目骨架

vue init webpack my-project1

webpack: 骨架名称

my-project1: 项目名称

| 过程中会出现如下界面，需要手动操作。 |

出现如下界面，表示安装成功。

进入到my-project1文件夹内后，使用以下命令来运行项目。

npm run dev

访问http://localhost:8081，页面效果如下：

此时，项目目录及各目录介绍如下：

10.7 webpack项目的几个常用命令

npm install
在运行和调试项目前，一般都需要先执行该命令，目的是安装项目运行所需要的环境。

npm run dev
以调试的方式运行项目

npm run build
生成用于项目部署所需的最小资源，生成的内容存放在build文件夹内。

码农公寓

九、Vue的组件化

9.1 什么是“组件化”

9.1.1 组件的全局注册

9.1.2 组件的本地注册

9.1.3 小结

9.2 组件的生命周期

十、使用Vue-Cli搭建Vue项目

10.1 什么是vue-cli

10.2 node.js的介绍及安装

node.js的介绍

node.js的安装

10.3 使用node.js安装vue-cli

10.4 使用vue-cli下载项目骨架搭建我们的项目

10.5 创建项目目录并打开

10.6 使用Webpack骨架快速创建项目

10.7 webpack项目的几个常用命令

相关文章