vue知识点（coderwhy+其他总结）

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

2.2 下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

2.3 NPM安装管理（较多使用）

后续通过webpack和CLI的使用，我们使用该方式。较多使用

3、Vuejs初体验P04

3.1 Hello Vuejs

在这里插入图片描述

let 定义变量 const 定义常量

el挂载要管理的元素 data定义数据

声明式编程，数据和界面完全分离，响应式开发

4、Vuejs的MVVM

什么是MVVM呢？
通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)
https://zh.wikipedia.org/wiki/MVVM
我们直接来看Vue的MVVM

View层：
视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。

Model层：
数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

5. 创建Vue实例传入的options

你会发现，我们在创建Vue实例的时候，传入了一个对象options。这个options中可以包含哪些选项呢？
详细解析
目前掌握这些选项：

el:
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
data:
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。也可以是从服务器加载的
methods:
类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

6.Vue的生命周期

二、模板语法

1. 插值操作 P12-P13

1.1 Mustache

1.2 v-once

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

1.3 v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
如果我们直接通过{ {}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示
可以使用v-html指令
该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染

1.4 v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型

1.5 v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

1.6 v-cloak

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
cloak: 斗篷

2. 绑定属性 v-bind P14

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)
在开发中，有哪些属性需要动态进行绑定呢？
还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href，代码如下：

在这里插入图片描述
v-bind有一个对应的语法糖，也就是简写方式
在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
简写方式如下：

绑定class有两种方式：

对象语法P15

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

数组语法P16

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>//单引号里就是写死的

用法二：也可以传入多个值
<h2 :class=“[active, line]">Hello World</h2>//不加是变量，可以在vue里指定值

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

v-bind绑定style有两种方式：P18

对象语法

 <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
<h2 :style="{fontSize: '50px'}">{
  {message}}</h2>
style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

<h2 :style="getStyles()">{
  {message}}</h2>//对象可以作为函数去返回，但是在方法里记得写this
methods: {
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }

数组语法

div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型
多个值以，分割即可

3.计算属性

3.1什么是计算属性？P20

对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{ {firstName}} { {lastName}}
我们可以将上面的代码换成计算属性：
计算属性是写在实例的computed选项中的.该选项有set和get两种方法，当set不设置时，会省略get字样的书写。

与methods不同点在于这里是当成属性去写的，有缓存机制，方法每一次调用都会重新计算

3.2 计算属性的复杂操作P21

在这里插入图片描述

P22第一天的课堂回顾

3.3 计算属性的setter和getter

每个计算属性都包含一个getter和一个setter
在上面的例子中，我们只是使用getter来读取。
在某些情况下，你也可以提供一个setter方法（不常用）。
在需要写setter的时候，代码如下：

3.4 let/var

JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.
其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。

let会在一个{}有单独的块级作用域

3.5 const的使用

什么时候使用const呢?
当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性.
建议: 在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let.

一旦给const修饰的标识符被赋值之后, 不能修改

在使用const定义标识符,必须进行赋值

常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性.结合存储规则理解

3.6对象增强写法

在这里插入图片描述

4. 事件监听

4.1v-on

在这里插入图片描述

v-on:click可以写成@click

4.2 v-on参数

情况一：()可以不添加。如果该方法不需要额外参数，那么方法后的（）省略
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

v-on 修饰符
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件

5. 条件判断

5.1 v-if、v-else-if、v-else

v-if、v-else-if、v-else
这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
v-if的原理：
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。