24. 前端-js框架-Vue

---

前言

微前端‌

  Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，帮助提高前端开发效率。它不仅易于上手，还便于与第三方库或既有项目整合。
  本文介绍Vue.js的基础知识，包括安装、基本语法、数据绑定、事件处理、组件、异步请求等内容。

---

一、Vue介绍

1. 学习导图

2. 特点

​Vue通过MVVM模式,能够实现视图与模型的双向绑定。简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化。

1. 解耦视图和数据
2. 可复用的组件
3. 前端路由技术
4. 状态管理
5. 虚拟DOM

3. 安装

1. 方式一：独立版本

我们可以在Vue.js的官网上直接下载vue.js。
并在 .html 中通过 script 标签中引用。

<script src = ../vue.js> </script> 

开发环境不要使用最小压缩版，不然会没有错误提示和警告！（页面中直接使用）

使用vue多页面开发：

• 引入vue.js
• 创建一个vue根实例 new Vue({选项})

2. 方式二：CDN方法

可以选择引入开发环境版本还是生产环境版本。

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

• BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js （国内不稳定）
• unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）
• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>

3. 方式三：NPM方法（推荐使用）

通过webpack和CLI的使用。

  在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如 Webpack 或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

1. 首先，先罗列接下来需要的东西：

• node.js环境（npm包管理器）
• vue-cli 脚手架构建工具
• cnpm npm的淘宝镜像

4. 搭建Vue的开发环境（大纲）

1. 必须安装node.js node安装步骤

2. 搭建vue的开发环境，安装vue的脚手架工具，官方命令行工具

npm install --global vue-cli

3. 创建项目 需要cd到对应的一个项目里面

vue init webpack vuedome03
cd  vuedome03

如果创建报错，需要执行

cnpm install   /  npm install   /  npm install --force

4. 运行项目

npm run dev/npm run start

5. 另一种创建项目的方式中小型项目 （推荐）

vue init webpack-simple vuedemo04
cd  vuedemo04
cnpm install   /  npm install
npm run dev

拿到既存项目不能正常运行后看有没有 node_modules 这个文件（项目所有的依赖），若没有，cd到项目中安装项目的依赖：cnpm install / npm install / npm install --force

5. 工程结构

介绍一下目录及其作用：

• build：最终发布的代码的存放位置。

• config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

• node_modules：npm 加载的项目所需要的各种依赖模块。

• src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件**：

• assets：放置一些静态资源文件、css、js、图片(会根据图片大小分类进行base64命名还是其他方式命名)等；如果静态资源是放在src/assets目录那么会经过webpack/vite打包处理，包括压缩、重命名等，其他所有的构建后的JS、CSS都会放在dist/assets文件下。

• components：目录里放的是一个个的组件文件(一般公共组件)

• router/index.js：配置路由的地方

• App.vue：项目入口组件（根组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的必不可少。

• **main.js **：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

• api：接口

• store：状态管理vuex

• styles：样式

• utils：工具函数

• views/pages：页面

• test：初始测试目录，可删除

• .XXXX文件：配置文件。

• static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。

• public：该目录为纯静态文件，图片等放该目录后，打包构建时不会做任何处理。

• public/index.html：html单页面的入口页面（生产访问的页面），可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

• package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）

• package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）

• README.md：项目的说明文件。

• webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

• .babelrc：是检测es6语法的配置文件，例：适配哪些浏览器的限制

• .gitignore：上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

• .postcssrc.js：前缀的配置 （css转化的配置）

• .editorconfig：对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格…（建议定义这个规范）

• .eslintrc.js：配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

• .eslintignore：忽略eslint对项目某些文件的语法规则的检查

这就是整个项目的目录结构，其中，我们主要在src目录中做修改（模块化开发）。

6. 安装依赖资源

cd 项目名；进入项目中

安装项目所需要的依赖包/插件（在package.json可查看）：执行 npm install (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install

若拉取既有项目或从github下载的项目，第一步就是要在项目中 npm install ;下载项目所依赖的插件，然后 npm run dev 运行项目

npm install 命令用来安装模块到node_modules目录
npm install 安装之前，npm install会先检查，node_modules目录之中是否已经存在指定模块。如果存在，就不再重新安装了，即使远程仓库已经有了一个新版本，也是如此。
npm install --force / npm install -f 如果你希望，一个模块不管是否安装过，npm 都要强制重新安装，可以使用-f或–force参数。

安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。

安装完依赖包资源后，我们就可以运行整个项目了。

7. 运行项目

在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

项目启动后，在浏览器中输入项目启动后的地址：

在浏览器中会出现vue的logo：

项目完成后输入打包命令: npm run build ，会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。

8. Vue导入示例

• 概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

• 语法：

<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

• 示例：

<div id="app"><h1>用户名:<input type="text" v-model="name"/></h1> <br/><h1>您输入的用户名是: {{name}}</h1>
</div><script type="text/javascript">//创建一个Vue对象var app = new Vue({//指定,该对象代表<div id="app">,也就是说,这个div中的所有内容,都被当前的app对象管理el: "#app",//定义vue中的数据data: {name: ""}});
</script>

二、语法

1. 钩子函数

• 概述：Vue伴随着生命周期，提前定义好的事件, 其作用类似于Servlet的 init 和 destroy 方法。

• 语法：

  • 什么是vue生命周期?
    Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

  • vue生命周期的作用是什么?
    Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

  • vue生命周期总共有几个阶段?
    可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

  • 第一次页面加载会触发哪几个钩子?
    第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

  • DOM 渲染在 哪个周期中就已经完成?
    DOM 渲染在 mounted 中就已经完成了。

  • 简单描述每个周期具体适合哪些场景?
    生命周期钩子的一些使用方法：
    beforecreate : 可以在此阶段加loading事件，在加载实例时触发；
    created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
    mounted : 挂载元素，获取到DOM节点；
    updated : 如果对数据统一处理，在这里写上相应函数；
    beforeDestroy : 可以做一个确认停止事件的确认框；
    nextTick : 更新数据后立即操作dom；

• 示例：

<script type="text/javascript">var app = new Vue({el:"#app",//钩子函数created,该方法在页面显示之后,自动执行created() {console.log("created...");}});
</script>

2. 插值表达式

• 概述：用户把vue中所定义的数据，显示在页面上。插值表达式允许用户输入"JS代码片段"。

• 语法：{{ 变量名/对象.属性名 }}

• 示例：

<html lang="en">
<head><meta charset="UTF-8"><title>vue插值表达式</title><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="app"><h1>欢迎来到-->{{ name }}</h1></div><script type="text/javascript">//创建vue对象var app = new Vue({//让vue接管div标签el:"#app",//定义数据,里边包含一个属性name,值为"XXX"data:{name:"XXX"}});</script>
</body>
</html>

3. 显示数据(v-text和v-html)

• 概述：

• 语法：

• 示例：

4. 数据双向绑定数据(v-model)

• 概述：

• 语法：

• 示例：

5. 事件处理(v-on)

• 概述：

• 语法：

• 示例：

6. 循环遍历(v-for)

• 概述：

• 语法：

• 示例：

7. 判断语法(v-if和v-show)

• 概述：

• 语法：

• 示例：

8. 显示数据(v-bind)

• 概述：

• 语法：

• 示例：

9. Vue页面跳转

• 概述：

• 语法：

• 示例：

10. 计算属性

• 概述：一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用。

• 语法：

 var app = new Vue({el:"#app",//计算属性必须放在Vue的computed中computed:{//定义计算属性属性名(){return "返回值";}}
});

• 示例：

<div id="app"><h1>{{birth}}</h1><h1 v-text="birth"></h1><h1 v-html="birth"></h1>
</div>
<script type="text/javascript">var app = new Vue({el:"#app",computed:{//定义一个birth方法,该方法就是一个计算属性,可以在插值表达式中使用birth(){let date = new Date();let year = date.getFullYear();let month = date.getMonth()+1;let day = date.getDay();return year + "-" + month + "-" + day;}}});
</script>

11. watch监控

• 概述：watch可以监听简单属性值及其对象中属性值的变化。
  watch类似于onchange事件，可以在属性值修改的时候，执行某些操作。

• 语法：

var app = new Vue({el:"#app",data:{message:"XXX",person:{"name":"heima", "age":13}},//watch监听watch:{//监听message属性值,newValue代表新值,oldValue代表旧值message(newValue, oldValue){console.log("新值：" + newValue + "；旧值：" + oldValue);},//监控person对象的值,对象的监控只能获取新值person: {//开启深度监控；监控对象中的属性值变化deep: true,//获取到对象的最新属性数据(obj代表新对象)handler(obj){console.log("name = " + obj.name + "; age=" + obj.age);}}}
});

三、Vue组件

1. 简介

组件, 类似于模版, 模块. 在项目需要重用某个模块（头部、尾部、新闻。。。）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。

<div id="app"><!--使用组件(组件名称),如果组件名称中有大写字母,如"myList",则这里需要书写<my-list>--><counter></counter><counter></counter>
</div>
<script type="text/javascript">//定义组件const counterTemp = {//定义组件的模版template:`<button @click='num++'>你点击了{{num}}次</button>`,//定义组件中使用到的数据属性data(){return {num:0}} };    //全局注册组件：在所有的vue实例中都可以使用组件//参数1：组件名称，参数2：具体的组件//Vue.component("counter", counterTemp);var app = new Vue({el:"#app",//局部注册组件: 只能在当前Vue实例中使用components:{//组件名称:具体组件counter: counterTemp}});
</script>

注意:

组件的模版中, 只能书写一个根标签
组件的定义必须放在Vue创建对象之前, 否则加载失败会报错

2. 父组件向子组件通信

• 概述：

  子组件无法直接使用父组件中的数据, 如果需要使用, 则必须由父组件把数据传递给子组件才可以。
  本质: 让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递。

• 作用：可以把父组件中的数据, 更新传递到子组件。

• 示例：

<div id="app"><!-- 把父组件中的count传递给子组件的number属性,把父arr传递给子ids,把父p传递给子person --><aaa :number="count" :ids="arr" :person="p"></aaa>
</div><script>var aaa = {//定义组件的模版template: `<h2>{{num}}---{{number}}--{{ids}}--{{person}}</h2>`,//定义组件中使用到的数据属性data() {return {num: 0}},//给组件添加属性props: {//普通属性numbernumber: "",//数组属性idsids: [],//对象属性personperson: {}/**	//以上属性还可以书写为以下格式*	items:{*        //数据类型，如果是数组则是Array，如果是对象则是Object*       type:Array,*       //默认值*       default:[]*	}*/}};//注册:全局注册Vue.component("aaa", aaa);var app = new Vue({el: "#app",data: {count: 5,arr: [1, 2, 3],p: {username: "zhangsan", age: 23}}});
</script>

3. 子组件向父组件通信

• 概述：

  子组件无法直接给父组件传递数据，也无法操作父组件中的数据，更无法调用父组件中的方法。
  所以，所谓的子组件向父组件通讯，其实就是想办法让子组件调用父组件的方法，进而响应到父组件中的数据。

• 作用：子组件可以调用父组件中的方法

• 示例：

<div id="app"><h1>父组件中:app_num={{app_num}}</h1><!-- 把父组件的add方法,绑定给子组件的aaa属性,绑定方法使用@属性名="方法名" --><!-- 把父组件的rem方法,绑定给子组件的bbb属性,绑定方法使用@属性名="方法名 --><!-- 把父组件的app_num变量,绑定给子组件的counter_num属性,绑定变量使用:属性名="方法名 --><counter @aaa="add" @bbb="rem" :counter_num="app_num"></counter>
</div><script>//定义一个组件(模版)let counter = {template: `<div><h1>子组件中:counter_num={{counter_num}}</h1><input type="button" @click="fun1" value="+"/><input type="button" @click="fun2" value="-"/></div>`,props:{//定义属性counter_num,用来接收父组件传递的数据counter_num:null,//定义aaa属性,用来绑定父组件的方法,当然,该定义也可以省略aaa:function(){},//定义bbb属性,用来绑定父组件的方法,当然,该定义也可以省略bbb:function(){},},       methods:{fun1(){//找到aaa属性所绑定的那个方法,执行那个方法return this.$emit("aaa");},fun2(){//找到bbb属性所绑定的那个方法,执行那个方法return this.$emit("bbb");}}}var app = new Vue({el: '#app',data: {app_num: 0},components: {counter},methods:{add(){this.app_num++;},rem(){this.app_num--;}}});
</script>

四、axios异步请求

Promise是异步编程的一种解决方案。从语法上讲，Promise是一个对象，它可以获取异步操作的消息。主要是解决地狱回调的问题。

1. axios概述

axios是一个基于 Promise 的 HTTP 库，主要用于，发送异步请求，获取数据。
可以用在浏览器和 node.js 中，axios的github

1. 常见的方法：

• axios(config)
• axios.get(url, [config])
• axios.post(url, [data])

2. 为方便起见，为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

3. 发送数据常用参数：

{url: '请求的服务器',method: '请求方式', // 默认是 get// GET请求参数params: {参数名: 参数值},// POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数data: {参数名: 参数值},// 响应数据格式,默认jsonresponseType: 'json'
}

4. 响应数据常用参数：

{data: {},		//真正的响应数据(响应体)status: 200,	//响应状态码statusText: 'OK',	 //响应状态描述headers: {},	//响应头config: {}		//其他配置信息
}

2. Get请求

var app = new Vue({el: "#app",data: {user: {}},//当页面加载完毕后created() { //发送GET请求axios.get("请求路径",{ config });axios.get("请求路径",{//get请求参数params: {name:"zhangsan",age:23},//响应数据格式为"json"responseType: 'json'}).then(res => {//打印响应数据console.log(res);//把响应数据赋值给Vue中的user属性app.user = res.data;}).catch(err => {//打印响应数据(错误信息)console.log(err);});}
});

3. Post请求

var app = new Vue({el: "#app",data: {user: {}},//当页面加载完毕后created() { //发送POST请求axios.post("请求路径",{ 参数 });axios.post("请求路径",{name:"zhangsan",age:23}).then(res => {console.log(res);app.user = res.data;}).catch(err => {console.log(err);});}
});

4. 跨域请求

跨域请求：在前端js中如果发送异步请求的话，请求的地址与当前服务器的ip或者端口号不同都是跨域请求。

跨域请求需要在服务提供方, 开启允许跨域请求。

5. vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里知道vue-resource就可以。
vue-resource的github

五、综合案例

需求：完成用户的查询与修改操作

1. html

2. js

var vue = new Vue({el: "#app",data: {user: {id:"",username:"aaa",password:"",age:"",sex:"",email:""},userList: []},methods: {findAll: function () {var _this = this;axios.get("/vuejsDemo/user/findAll.do").then(function (response) {_this.userList = response.data;console.log(_this.userList);}).catch(function (err) {console.log(err);});},findById: function (userid) {var _this = this;axios.get("/vuejsDemo/user/findById.do", {params: {id: userid}}).then(function (response) {_this.user = response.data;$('#myModal').modal("show");}).catch(function (err) {});},update: function (user) {var _this = this;axios.post("/vuejsDemo/user/update.do",_this.user).then(function (response) {_this.findAll();}).catch(function (err) {});}},created(){this.findAll();}
});

---

本文的引用仅限自我学习如有侵权，请联系作者删除。
参考知识
Vue学习之从入门到神经
《Vue入门到精通系列》— 两万字带你入门Vue
vue.js 三种方式安装(vue-cli)

---