Vue 基础

1. 前端的发展史

1. HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看

2. Ajax的出现 -> 后台发送异步请求，Render+Ajax混合

3. 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形

4. Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）

5. React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）

6. 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端

7. 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端

8. 在Vue框架的基础性上 uni-app：一套编码 编到10个平台

9. 在不久的将来 ，前端框架可能会一统天下

2. Vue 入门

2.1 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

• 渐进式框架：可以一点一点地使用它，只用一部分，也可以整个工程都使用它

• 官方网站
  官网：https://cn.vuejs.org/
  文档：https://cn.vuejs.org/v2/guide/

• 引入
  可以直接打开 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 复制源码即可，也可以使用官方提供的 cdn

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Vue特点

• 易用
  通过 HTML、CSS、JavaScript构建应用
• 灵活
  不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
• 高效
  20kB min+gzip 运行大小
  超快虚拟 DOM
  最省心的优化

2.2 M-V-VM思想

三层

MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。

• Model
  vue 对象的 data 属性里面的数据，这里的数据要显示到页面中
• View
  vue 中数据要显示的 HTML 页面，在 vue 中，也称之为“视图模板” （HTML+CSS）
• ViewModel
  vue 中编写代码时的 vm 对象，它是 vue.js 的核心，负责连接 View 和 Model 数据的中转，保证视图和数据的一致性，data 里面的数据被显示到标签中就是 vm 对象自动完成的（双向数据绑定：JS 中变量变了，HTML 中数据也跟着改变）
  
  

优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

2.4 组件化开发、单页面开发

组件化开发

• 组件化即是对某些可以进行复用的功能进行封装的标准化工作。
• 组件一般会内含他的内部UI元素、样式和JS逻辑代码，它可以很方便的在应用的任何地方进行快速的嵌入。
• 组件内部可以使用其他组件来构成更复杂的组件。
• 每一个组件的内容都可以被替换和复用
  

单页面开发

• 只需要1个页面，结合组件化开发来替换页面中的内容
• 页面的切换只是组件的替换，页面还是只有1个

2.5 简单使用

<div id="app">
  {{ message }}
div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2.6 数组更新与检测

可以检测到变动的数组操作：

操作	说明
push	最后位置添加
pop	最后位置删除
shift	第一个位置删除
unshift	第一个位置添加
splice	切片
sort	排序
reverse	反转

检测不到变动的数组操作：

操作	说明
filter()	过滤
concat()	追加另一个数组
slice()
map()

原因：作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

解决方法：

// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.arrayList, 0, 'Darker')
Vue.set(vm.obj, 'gender', '未知')	# 对象

3. 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

3.1 插值

数据绑定最常见的形式就是使用 Mustache 语法 {{}}（双大括号）的文本插值

Mustache 标签 {{}} 将会被替代为对应数据对象上的值。若绑定的数据对象的值发生了改变，插值处的内容都会更新。

...
<div id="app">
    <p>{{ message }}p>
    <p>{{ age }}p>
    <p>{{ l }}p>
    <p>{{ l[0] }}p>
    <p>{{ o }}p>
    <p>{{ o.name }}p>
    <p>{{ o["pwd"] }}p>
    <p>{{ u }}p>
    <p>{{ score > 60 ? "及格" : "不及格" }}p>
div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            age: 18,
            l: [1, 2, 3],
            o: {name: 'xwx', pwd: 12},
            u: '百度一下 你就知道',
            score: 99,
        }
    })    
script>
...

将数组、对象、标签在前端展示都是字符串的格式，例如链接标签不能点击访问等等

还可以在模版语法中添加简单的 js 语法。例如示例中的三目运算符。

修改值
我们可以在 Console 中修改查看效果，修改的方式可以如下方式

• vm._date.age = 12
• vm._data[‘age’] = 12
• vm.age = 12
• vm[‘age’] = 12

4. 事件与指令

4.1 文本指令

指令	说明
v-text	把字符串原封不动显示在标签上
v-html	把标签字符串渲染后，显示在标签里
v-show	显示与不显示 ：style=“display: none;”
v-if	显示与不显示，直接将标签删除

v-once

通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

<p v-once>{{ message }}p>

v-text、v-html

<div id="app">
    <p>{{u}}p>
    <p v-text="u">p>
    <p v-html="u">p>
div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            u: '百度一下 你就知道',
        }
    })
script>

v-show 、v-if

<div id="app">
    <p>{{u}}p>
    <p v-show="true">{{u}}p>
    <p v-show="i">{{u}}p>
    <p v-if="true">{{u}}p>
    <p v-if="i">{{u}}p>
div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            u: '百度一下 你就知道',
            i: false,
        }
    })
script>

• v-show 、v-if 用于控制标签是否展示，true 表示展示，false 表示不展示
• 最好是用变量来表示，便于后面控制
• 俩者不同的是，v-show 为 false 时，会给元素添加 display: none；而 v-if 为 false 时，会操作 DOM 直接将元素标签删除。

4.2 逻辑指令

指令	说明
v-if	用于条件性地渲染一块内容
v-else-if	充当 v-if 的 else-if 块 ，可以连续使用
v-else	表示 v-if 的 else 块

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

<div id="app">
    <div v-if="type === 'A'">
        A
    div>
    <div v-else-if="type === 'B'">
        B
    div>
    <div v-else-if="type === 'C'">
        C
    div>
    <div v-else>
        Not A/B/C
    div>
div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            type: 'D',
        }
    })
script>

在 template 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个