Vue（狂神学习笔记）2021-10-8

Vue（狂神学习笔记）

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

HTML + CSS + JS : 视图：给用户看，刷新后台给的数据

网络通信： axios

页面跳转： vue-router

状态管理：vuex

Vue-UI : ICE , Element UI

一、前端核心分析

1. VUE 概述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

2. 前端三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为

3. JavaScript框架

jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;

Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)

React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;

Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;

Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

前端三大框架：Angular、React、Vue

二、第一个Vue程序

1. 什么是MVVM

MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。

MVVM 源自于经典的MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5OozVE1x-1633706509488)(Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.assets/20200720222239842.png)]

2. 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3. Vue 是 MVVM 模式的实现者

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-78xcCL8I-1633706509492)(Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.assets/20200720222311692.png)]

Model : 模型层，在这里表示JavaScript对象
View : 视图层,在这里表示DOM (HTML操作的元素)
ViewModel : 连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

Vue在线cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

三、Vue基本语法

1. `v-bind`

现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。

我们可以使用v-bind来绑定元素属性！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><div id="app"><span v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script>var vm = new Vue({el:"#app",data:{msg:"你好，Vue"}})</script>
</body>
</html>

2. `v-if` `v-else`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>狂神说Java</p><!--view层 模板-->
<div id="app"><h1 v-if="type==='A'">A</h1><h1 v-else-if="type==='B'">B</h1><h1 v-else>C</h1>
</div>
</body><!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el: "#app",data: {type: "A"}})
</script>
</html>

3. `v-for`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><div><li v-for="item in items">姓名{{item.name}}-->年龄{{item.age}}</li></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script>var vm = new Vue({el:"#app",data:{items:[{name:"坚韧",age:21},{name:"勇气",age:16},{name:"理想",age:18}]}})</script>
</body>
</html>

4. `v-on` 事件绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>狂神说Java</p><!--view层 模板-->
<div id="app"><button v-on:click="sayHi">Click Me</button>
</div>
</body><!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el: "#app",data: {message: "你点我干嘛？"},methods: {//方法必须绑定在Vue的Methods对象中，v-on:事件sayHi: (function (event) {alert(this.message)})}})
</script>
</html>

四、Vue双向绑定 v-model

1、什么是双向绑定

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2、为什么要实现数据的双向绑定

在Vue.js 中，如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

3、在表单中使用双向数据绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，

你应该通过JavaScript在组件的data选项中声明。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><div id="app">下拉框：<select v-model="selected"><option value="" disabled>--请选择--</option><option >A</option><option >B</option><option >C</option></select><p>value{{selected}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script>var vm = new Vue({el:"#app",data:{selected:""}})</script>
</body>
</html>

五、Vue组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LfpOqds-1633706509495)(Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.assets/20200720222347392.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--view层 模板--><div id="app"><zhao v-for="item in items" v-bind:lv="item"></zhao></div>
</body><!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>Vue.component("zhao",{props:['lv'],template:'<li>{{lv}}</li>'})var vm = new Vue({el:"#app",data: {items:['坚韧','勇气','理想']}})
</script>
</html>

六、Axios通信

1、什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建XMLHttpRequests

从node.js创建http请求

支持Promise API [JS中链式编程]

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF (跨站请求伪造)

GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/

2、为什么要使用Axios

由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁 !

模拟Json数据：

{"name": "weg","age": "18","sex": "男","url":"https://www.baidu.com","address": {"street": "文苑路","city": "南京","country": "中国"},"links": [{"name": "bilibili","url": "https://www.bilibili.com"},{"name": "baidu","url": "https://www.baidu.com"},{"name": "cqh video","url": "https://www.4399.com"}]
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="vue"><div>{{info.name}}</div><a v-bind:href="info.url">点我进入</a>
</div>
</body><!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>var vm = new Vue({el: "#vue",data: {items: ['Java','Python','Php']},//data:vm的属性//data():vm方法data(){return{//请求的返回参数,必须和json字符串一样info:{name: null,age: null,sex: null,url: null,address: {street: null,city: null,country: null}}}},//钩子函数，链式编程，ES6新特性mounted(){axios.get("../data.json").then(res => (this.info=res.data))}})
</script>
</html>

3. Vue计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--view层 模板--><div id="app"><div>currentTime1:{{currentTime1()}}</div><div>currentTime2:{{currentTime2}}</div></div>
</body><!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>var vm = new Vue({el:"#app",data: {message: "computed property"},methods: {currentTime1: function(){return Date.now(); //返回一个时间戳}},computed: {//计算属性：methods，computed 方法名不能重名，重名字后，只会调用methods的方法currentTime2: function(){return Date.now();// 返回一个时间戳}}})
</script>
</html>

结论:
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

七、内容分发 slot

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--view层 模板--><div id="app"><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items" style="font: bold;font-size: 30px;" v-for="item in items" v-bind:item="item"></todo-items></div>
</body><!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'})Vue.component("todo-title",{props: ['title'],template: '<h1>{{title}}</h1>'})Vue.component("todo-items",{props: ['item'],template: '<div>{{item}}</div>'})var vm = new Vue({el:"#app",data: {title: "This is my belief",items:["坚韧","勇气","理想","乐观"]}})
</script>
</html>

八、自定义事件内容分发

通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;

使用this.$emit (‘自定义事件名’,参数)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fU2mQdrt-1633706509499)(Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.assets/20200720222413865.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--view层 模板--><div id="app"><todo-title slot="todo-title" v-bind:title="title"></todo-title><todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items></div>
</body><!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>Vue.component("todo",{template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'})Vue.component("todo-title",{props: ['title'],template: '<h1>{{title}}</h1>'})Vue.component("todo-items",{props: ['item','index'],template: '<div>{{index}}---{{item}}<button @click="remove">删除</button></div>',methods: {remove: function (index){this.$emit('remove',index)}}})var vm = new Vue({el:"#app",data: {title: "This is my belief",items:["坚韧","勇气","理想","乐观"]},methods:{removeItems: function (index){console.log("删除了"+this.items[index]+"ok");this.items.splice(index,1);}}})
</script>
</html>