Vue.js学习系列（三）

最新推荐文章于 2024-09-11 15:05:16 发布

『地球是猿的』

最新推荐文章于 2024-09-11 15:05:16 发布

阅读量819

点赞数 2

分类专栏： Vue.js学习系列文章标签： vue.js js 前端前端框架 javascript

本文链接：https://blog.csdn.net/weixin_44117737/article/details/121437513

版权

Vue.js学习系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

文章目录

Vue.js学习系列（三）

九、Vue的组件化

9.1 什么是“组件化”

Vue的组件化设计思想借鉴了Java的面向对象的思想。Java认为万物皆对象，在Vue中，万物皆组件。

也就是说，在实际Vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。

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

9.1.1 组件的全局注册

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue的事件修饰符</title>
    </head>
    <body>
        <div id="app">
            <model3></model3>
            <model3></model3>
        </div>
        <hr>
        <div id="app2">
            <model3></model3>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。
        /*
        参数1：组件名       参数2：具体组件的内容
        */
        Vue.component("model3",{
            template: "<div><h3>{{title}}</h3><button type='button' @click='show'>{{writer}}</button></div>",
            data: function() {
                return {
                    title: "Hello Vue",
                    writer: "LZY-[O]"
                }
            },
            methods: {
                show: function() {
                    alert("I Love You");
                }
            }
        });

        new Vue({
            el: "#app"
        })
        new Vue({
            el: "#app2"
        })
    </script>
</html>

通过Vue.component(组件名,具体组件的内容)实现组件的全局注册，全局注册后的组件可以被重复使用。
组件的内容：
template属性：视图层，只能有一个根标签
data属性：需要由function() {return{ 键1: 值1, 键2:值2… }}的方式填写
data: function(){
	return {
		title: "Hello Vue",
	}
}
使用组件时，组件必须在一个被Vue绑定的视图层元素里

9.1.2 组件的本地注册

Vue的全局注册，也就意味着页面的任意一个被vue绑定过的div中，都可以使用全局注册了的vue组件。

但是，如果是对vue组件进行本地注册，那么在其他被vue绑定的div中，不能使用该组件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue组件的本地注册</title>
    </head>
    <body>
        <div id="app">
            <model1></model1>
            <model2></model2>
        </div>
        <hr>
        <div id="app2">
            <model1></model1>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //组件的本地注册：在vue对象里面去注册一个组件
        new Vue({
            el: "#app",
            components: {
                //组件1
                'model1': {
                    template: "<div><h3>{{title}}</h3><button type='button' @click='show()'>{{writer}}</button></div>",
                    data: function() {
                        return {
                            title: "组件的本地注册",
                            writer: "LZY_[O]"
                        }                       
                    },
                    methods: {
                        show: function() {
                            alert("我是一名军人");
                        }
                    }
                },
                //组件2
                'model2':{
                    template: "<div><h3>{{title}}</h3><button type='button' @click='show()'>{{writer}}</button></div>",
                    data: function() {
                        return {
                            title: "组件的本地注册2",
                            writer: "LZY_[猿]"
                        }                       
                    },
                    methods: {
                        show: function() {
                            alert("退伍不褪色");
                        }
                    }
                }
            }
        })
        
        new Vue({
            el: "#app2"
        })
    </script>
</html>

components：该属性里可以填写多个组件，采用键值对的方式填写，如： ‘模块名1’:{组件具体内容},‘模块名2’:{组件具体内容}，…

同一本地注册组件，模块不一样，命名可以一样
当某一div调用别的vue绑定的局部组件时，若采用开发环境的vue.js，控制台会报错(如上述例子的“#app2”的div)：
vue.js:634 [Vue warn]: Unknown custom element: <model1> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

9.1.3 小结

这是一个完整的Vue组件。该组件包含了三个部分：template（html视图层内容）、script（Model层）、style（CSS样式）。这样封装好的组件可以被复用，也可以作为其他组件的组成部分而被封装——Java的面向对象再次体现。
特点1：template属性内，必须有且只有一个根标签。
特点2：component中注册的组件的data属性，必须是以函数的形式。
data: function(){
	return {
		title: "Hello Vue",
	}
}

9.2 组件的生命周期

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue的生命周期</title>
    </head>
    <body>
        <div id="app">
            {{title}}
            <br>
            <button type="button" @click="changTitle">点我</button>
            <button type="button" @click="destroyObject">销毁组件</button>
        </div>
        <hr>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                title: "生命周期"
            },
            methods: {
                //es5写法（目前浏览器都支持es5写法）
                changTitle: function() {
                    this.title = "人生有几个十年？";
                },
                destroyObject: function() {
                    //vue对象的实例属性
                    this.$destroy();
                }
            },
            //es6写法（目前只有少部分浏览器支持，但vue会将es6写法自动转为es5写法）
            beforeCreate() {
                console.log("beforeCreate");
            },
            created() {
                console.log("创建后");
            },
            beforeMount() {
                console.log("beforeMount");
            },
            mounted() {
                console.log("绑定后");
            },
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            updated() {
                console.log("更新后");
            },
            beforeDestroy() {
                console.log("beforeDestroy");
            },
            destroyed() {
                console.log("销毁后");
            }
        })
        
    </script>
</html>

destroyObject方法里的$destroy()称为vue的实例属性

十、使用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的介绍及安装

10.2.1 node.js的介绍

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

web项目的服务器是Tomcat（后端服务器）

对于前端来说，node.js就是前端服务器

10.2.2 node.js的安装

从官网下载安装即可：

http://nodejs.cn/download/

https://nodejs.org/zh-cn/download/

测试node.js是否安装成功：在dos命令窗口中输入“node-v”查看版本，如果看到版本号，就表示安装成功。

10.3 使用node.js安装Vue-Cli

使用如下命令安装vue-cli（npm是node.js里）

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 install vue-cli -g
cnpm install
cnpm run dev

10.4 使用Vue-Cli下载项目骨架搭建我们的项目

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

vue list：帮我们查看vue现在支持的官方提供的常用骨架

10.5 创建项目目录并打开

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

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

进入到项目存放的目录下，创建项目：

命令格式： vue init 骨架名项目名

vue init webpack my-vue-demo1

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

1. 进入项目工程（cd my-vue-demo1）

2. 安装项目依赖（npm install），此步根据需要进行的操作，若在项目创建时安装，此时不用安装

3. 以开发者模式运行项目（npm run dev）

4. 进入项目网址（http://localhost:8080）

创建项目各选项作用：

Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；

Project description ---- 项目描述，按需填写。无需填写可以直接回车；

Author ---- 作者

Vue build ---- 构建模式，一般默认第一个；

Install vue-router? ---- 是否安装vue-router（vue的路由）。选Y。后边构建项目会用到。

Use ESLint to lint yout code? ---- 格式校验，是否使用ESLint校验器检验代码（ESLint前端语法校验器，校验严谨），按需；

Set up unit tests ---- 是否安装测试模块，测试相关，按需；

Setup e2e tests with Nightwatch? ---- 是否安装e2e测试模块，测试相关，按需；

Should we run ‘npm install’ for you after the project has been created? ----项目创建完后是否要对当前项目安装依赖（可能当前项目会依赖其他项目的内容），按需，这里我选Yes, use NPM。如果选No，后续自己在目标目录下执行npm install即可。

npm install：安装项目所需要的依赖

npm run dev：以开发的模式运行项目

项目工程目录结构及作用：

src目录

.vue的文件与在html编写的js文件的区别：

main.js文件

10.7 webpack项目的几个常用命令

# install dependencies（安装项目所需要的依赖）
npm install

# serve with hot reload at localhost:8080  （以开发模式运行项目）
npm run dev

# build for production with minification	（构件项目）
npm run build

# build for production and view the bundle analyzer report
npm run build --report

十一、在idea中安装vue插件进行集成开发

11.1 安装vue.js插件

打开idea后，打开 File -> Settings…

Plugins -> Marketplace（插件市场） -> 搜索框搜索vue.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RWDlEz0A-1637382330493)(Vue学习.assets/image-20201217162117340.png)]

然后 Editor -> File Types -> Vue.js template（vue模板）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zOi2ZLU-1637382330494)(Vue学习.assets/image-20201217162659520.png)]

11.2 使用vue插件开发

进入到vue项目工程中，鼠标右键 -> New -> Vue Component，创建出vue组件模板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSkJGWyz-1637382330495)(Vue学习.assets/image-20201217163552555.png)]

十二、Vue组件间的参数传递

App.vue是整个页面的核心组件（页面要展示的页面）。

所有的组件都会在App.vue里进行注册，对用户来说，整个项目只会展现App.vue这个组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyJrdCc9-1637382330496)(file://F:/%E5%BB%96%E9%95%87%E5%9E%A3/%E5%AD%A6%E4%B9%A0/Vue/Vue%E5%AD%A6%E4%B9%A0.assets/image-20201218095443845.png?lastModify=1608259165)]

12.1 如何在App.vue中使用子组件

1. 创建子组件

2. 注册组件（在main.js中进行注册）/ 也可以在App.vue中进行注册

3. 在App.vue中添加注册好的组件

4. npm run dev 运行vue项目

5.根据运行后的网址进入项目

12.2 父传子

通过子组件的props部分，来指明可以接受的参数，父组件通过在标签中写明参数的键值对来传递参数。

props是表示一个组件的参数部分，其写法有两种：

1） props: [参数列表]

如： props: [ ‘MyProp1’, ‘MyProp2’, … ]

2) props: { 参数名1:{type: String, required: true, default: ‘XX’}, 参数名2:{…} }