本文共 8370 字，大约阅读时间需要 27 分钟。

起因

一直想着要写一定深度的文章，然后觉得学习Vue是一个好的过程，本文将带你走进Vue的世界，支持国内框架！ 如果看完本文还不懂Vue是什么的小伙伴，可以随便打博主！（斜眼笑），前方高能，本文可能篇幅比较长，建议收藏在闲暇时间学习，也欢迎伙伴们讨论留言学习！

Vue -渐进式JavaScript框架

---

介绍

• Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架

库和框架的区别

---

Library

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

• 代表：jQuery
• jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

Framework

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

• 框架规定了自己的编程方式，是一套完整的解决方案
• 使用框架的时候，由框架控制一切，我们只需要按照规则写代码

主要区别

• You call Library, Framework calls you

• 核心点：谁起到主导作用（控制反转）

  框架中控制整个流程的是框架

  使用库，由开发人员决定如何调用库中提供的方法（辅助）

• 好莱坞原则：Don’t call us, we’ll call you.

• 框架的侵入性很高（从头到尾）

MVVM的介绍

---

• MVVM，一种更好的UI模式解决方案
• 从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普

MVC

• M: Model 数据模型（专门用来操作数据，数据的CRUD）
• V：View 视图（对于前端来说，就是页面）
• C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）

MVVM组成

• MVVM ===> M / V / VM
• M：model数据模型
• V：view视图
• VM：ViewModel 视图模型

优势对比

• MVC模式，将应用程序划分为三大部分，实现了职责分离

• 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM

• MVVM通过数据双向绑定让数据自动地双向同步

  V（修改数据） -> M

  M（修改数据） -> V
  数据是核心

• Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

学习Vue要转化思想

• 不要在想着怎么操作DOM，而是想着如何操作数据！！！

起步 - Hello Vue

---

• 安装：npm i -S vue

   
   
    {
   {
    msg }}
   
   
   

Vue实例

• 注意 1：先在data中声明数据，再使用数据
• 注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg

var vm = new Vue({
     data: {
       msg: '大家好，...'  }})vm.$data.msg === vm.msg // true

数据绑定

• 最常用的方式：Mustache(插值语法)，也就是 {
  {}} 语法
• 解释：{
  {}}从数据对象data中获取数据
• 说明：数据对象的属性值发生了改变，插值处的内容都会更新
• 说明：{
  {}}中只能出现JavaScript表达式 而不能解析js语句
• 注意：Mustache 语法不能作用在 HTML 元素的属性上

Hello, {
   {
    msg }}.
{
   {
    1 + 2 }}
{
   {
    isOk ? 'yes': 'no' }}
   

双向数据绑定 Vue two way data binding

---

• 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响

  数据的改变会引起DOM的改变

  DOM的改变也会引起数据的变化

• 原理：Object.defineProperty中的get和set方法

  getter和setter：访问器

  作用：指定读取或设置对象属性值的时候，执行的操作

/*  defineProperty语法 介绍 */var obj = {
   }Object.defineProperty(obj, 'msg', {
     // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值  set: function (newVal, oldVal) {
     },  // 读取 obj.msg 时get方法会被系统调用  get: function ( newVal, oldVal ) {
   }})

Vue双向绑定的极简实现

动态添加数据的注意点

• 注意：只有data中的数据才是响应式的，动态添加进来的数据默认为非响应式

• 可以通过以下方式实现动态添加数据的响应式

  1. Vue.set(object, key, value) - 适用于添加单个属性
  2. Object.assign() - 适用于添加多个属性

var vm = new Vue({
     data: {
       stu: {
         name: 'jack',      age: 19    }  }})/* Vue.set */Vue.set(vm.stu, 'gender', 'male')/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/vm.stu = Object.assign({
   }, vm.stu, {
    gender: 'female', height: 180 })

异步DOM更新

• 说明：Vue 异步执行 DOM 更新，监视所有数据改变，一次性更新DOM

• 优势：可以去除重复数据，对于避免不必要的计算和 避免重复 DOM 操作上，非常重要

• 如果需要拿到更新后dom中的数据 则需要通过 Vue.nextTick(callback)：在DOM更新后，执行某个操作（属于DOM操作）

  实例调用vm.$nextTick(function () {})

methods: {
     fn() {
       this.msg = 'change'    this.$nextTick(function () {
         console.log('$nextTick中打印：', this.$el.children[0].innerText);    })    console.log('直接打印：', this.$el.children[0].innerText);  }}

指令

---

• 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-text

• 解释：更新DOM对象的 textContent

v-html

• 解释：更新DOM对象的 innerHTML

v-bind

• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• 语法：v-bind:title="msg"
• 简写：:title="msg"

v-on

• 作用：绑定事件
• 语法：v-on:click="say" orv-on:click="say('参数', $event)"
• 简写：@click=“say”
• 说明：绑定的事件定义在methods

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()
• .prevent 阻止默认行为，调用 event.preventDefault()
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
• .once 事件只触发一次

v-model

• 作用：在表单元素上创建双向数据绑定
• 说明：监听用户的输入事件以更新数据
• 案例：计算器

Message is: {
   {
    message }}

v-for

• 作用：基于源数据多次渲染元素或模板块

   
   
      {
   {
    item.text }}
   
   
{
   {
   item}} -- {
   {
   index}}
   
{
   {
   item}} -- {
   {
   key}}
{
   {
   item}}

key属性

• 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
• 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元
  素。

样式处理 -class和style

---

• 使用方式：v-bind:class="expression" or :class="expression"
• 表达式的类型：字符串、数组、对象（重点）
• 语法：

   
   
 ===> 解析后
   
   
   
 ===>解析后
   
   
   
 ===>解析后
   
--- style ---
   
   
   
   
   

v-if 和 v-show

• v-if：根据表达式的值的真假条件，销毁或重建元素
• v-show：根据表达式之真假值，切换元素的 display CSS 属性

这个元素展示出来了吗？？？
这个元素，在HTML结构中吗？？？

提升性能：v-pre

• 说明：vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

{
   {
    this will not be compiled }}

提升性能：v-once

• 说明：vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

This will never change: {
   {
   msg}}

过滤器 filter

---

• 作用：文本数据格式化
• 过滤器可以用在两个地方：{
  {}}和 v-bind 表达式
• 两种过滤器：1 全局过滤器 2 局部过滤器

全局过滤器

• 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
• 注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
• 显示的内容由过滤器的返回值决定

Vue.filter('filterName', function (value) {
     // value 表示要过滤的内容})

• 示例：

   
    {
   {
    dateStr | date }}
   
   
    {
   {
    dateStr | date('YYYY-MM-DD hh:mm:ss') }}
   

局部过滤器

• 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

{
     data: {
   },  // 通过 filters 属性创建局部过滤器  // 注意：此处为 filters  filters: {
       filterName: function(value, format) {
   }  }}

按键值修饰符

---

• 说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
• 其他：修饰键（.ctrl等）、鼠标按键修饰符（.left等）

// 只有在 keyCode 是 13 时调用 vm.submit()@keyup.13="submit"// 使用全局按键别名@keyup.enter="add"---// 通过全局 config.keyCodes 对象自定义键值修饰符别名Vue.config.keyCodes.f2 = 113// 使用自定义键值修饰符@keyup.enter.f2="add"

监视数据变化 - watch

---

• 概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数
• 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

new Vue({
     data: {
    a: 1, b: {
    age: 10 } },  watch: {
       a: function(val, oldVal) {
         // val 表示当前值      // oldVal 表示旧值      console.log('当前值为：' + val, '旧值为：' + oldVal)    },    // 监听对象属性的变化    b: {
         handler: function (val, oldVal) {
    /* ... */ },      // deep : true表示是否监听对象内部属性值的变化       deep: true    },    // 只监视user对象中age属性的变化    'user.age': function (val, oldVal) {
       },  }})

计算属性

---

• 说明：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会重新求值
• 注意：Mustache语法（{
  {}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护
• 注意：computed中的属性不能与data中的属性同名，否则会报错

var vm = new Vue({
     el: '#app',  data: {
       firstname: 'jack',    lastname: 'rose'  },  computed: {
       fullname() {
         return this.firstname + '.' + this.lastname    }  }})

实例生命周期

---

• 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
• 实例生命周期也叫做：组件生命周期

生命周期介绍

• 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！

• 注意：Vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
• 注意：钩子函数的名称都是Vue中规定好的！

钩子函数 - beforeCreate()

• 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
• 注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

• 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
• 使用场景：发送请求获取数据

钩子函数 - beforeMounted()

说明：在挂载开始之前被调用

钩子函数 - mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

• 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• 注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的

钩子函数 - updated()

• 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

• 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
• 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - destroyed()

• 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

axios

---

• Promise based HTTP client for the browser and node.js

  以Promise为基础的HTTP客户端，适用于：浏览器和node.js

  封装ajax，用来发送请求，异步获取数据

• 安装：npm i -S axios

// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可// 1 引入 axios.js// 2 直接调用axios提供的API发送请求created: function () {
     axios.get(url)    .then(function(resp) {
   })}---// 配合 webpack 使用方式如下：import Vue from 'vue'import axios from 'axios'// 将 axios 添加到 Vue.prototype 中Vue.prototype.$axios = axios---// 在组件中使用：methods: {
     getData() {
       this.$axios.get('url')      .then(res => {
   })      .catch(err => {
   })  }}---// API使用方式：axios.get(url[, config])axios.post(url[, data[, config]])axios(url[, config])axios(config)

Get 请求

const url = 'http://vue.studyit.io/api/getnewslist'// url中带有query参数axios.get('/user?id=89')  .then(function (response) {
       console.log(response);  })  .catch(function (error) {
       console.log(error);  });// url和参数分离，使用对象axios.get('/user', {
     params: {
       id: 12345  }})

Post 请求

• 默认情况下，axios 会将JS对象序列化为JSON对象。为了使用 application/x-www-form-urlencoded 格式发送请求，我们可以这样：

// 使用 qs 包，处理将对象序列化为字符串// npm i -S qs// var qs = require('qs')import qs from 'qs'qs.stringify({
    'bar': 123 }) ===> "bar=123"axios.post('/foo', qs.stringify({
    'bar': 123 }))// 或者：axios.post('/foo', 'bar=123&age=19')

const url = 'http://vue.studyit.io/api/postcomment/17'axios.post(url, 'content=点个赞不过份')axios.post('/user', qs.stringify({
       firstName: 'Fred',    lastName: 'Flintstone'  }))  .then(function (response) {
       console.log(response);  })  .catch(function (error) {
       console.log(error);  });

全局配置

// 设置请求公共路径：axios.defaults.baseURL = 'http://vue.studyit.io'

拦截器

• 拦截器会拦截发送的每一个请求，请求发送之前执行request中的函数，请求发送完成之后执行response中的函数

转载地址：https://chocolate.blog.csdn.net/article/details/104464903 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！