coderwhy-vue学习

(新)2019Vue、Vuejs最详细教程-入门到项目实战

一、邂逅Vuejs

1、认识Vuejs

1.1 简单认识一下Vuejs

1. Vue (读音 /vjuː/，类似于 view)，不要读错。
2. Vue是一个渐进式的框架，什么是渐进式的呢？

   渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
   或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
   比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

3. Vue有很多特点和Web开发中常见的高级功能

   解耦视图和数据
   可复用的组件
   前端路由技术
   状态管理
   虚拟DOM
   这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行讲解。

4. 学习Vuejs的前提？

   从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
   但是你需要具备一定的HTML、CSS、JavaScript基础。

2、Vuejs安装方式

2.1 CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<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初体验

3.1 Hello Vuejs

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. 插值操作

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

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

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

绑定class有两种方式：

• 对象语法
  用法一：直接通过{}绑定一个类

<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>

• 数组语法
  用法一：直接通过{}绑定一个类

<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有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有两种方式：

• 对象语法
  :

style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

• 数组语法

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

3.计算属性

3.1什么是计算属性？

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{ {firstName}} { {lastName}}
我们可以将上面的代码换成计算属性：
OK，我们发现计算属性是写在实例的computed选项中的.

3.2 计算属性的复杂操作

3.3 计算属性的setter和getter

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

3.4 let/var

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

3.5 const的使用

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

3.6对象增强写法

4. 事件监听

4.1v-on

• v-on:click可以写成@click
  

4.2 v-on参数

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

4.3v-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中。

5.2 条件渲染案例

用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。

5.3 案例小问题

小问题：
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？
问题解答：
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
解决方案：
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同

5.4 v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：
v-if和v-show对比
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

6. 循环遍历

6.1 v-for遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
格式如下：item in items的形式。

6.2 v-for遍历对象

6.3 组件的key属性

6.4 检测数组更新

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()