ゐ叶う枫ゆ
ゐ叶う枫ゆ

Vue笔记

Vue

 

1. 邂逅Vuejs

1.1 简单认识一下Vuejs

Vue是一个渐进式的框架，什么是渐进式呢？

  • 渐进式意味着你可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验

  • 或者你希望将更多的业务逻辑使用Vue实现，那么Vue核心库以及其生态系统。

  • 比如Core+Vue-router-Vuex，也可以满足你各种各样的需求。

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

  • 解耦试图的数据

  • 可复用的组件

  • 前端路由技术

  • 状态管理

  • 虚拟Dom

这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的

学习Vuejs的前提？

  • 从零学习Vue，并不需要你具备其他类似与Angular、React，甚至JQuery的经验

  • 但是你需要具备一定的HTML、CSS、JavaScript基础

1.2 安装Vuejs

安装Vue的方式有很多：

  1. 直接CDN引入

    • CDN

      对于制作原型或学习，你可以这样使用最新版本：

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

    • 你可以选择引入开发环境版还是生成环境版本

    • NPM安装

      后续通过webpack和CLI的使用，我们使用改方式

1.3. Hello Vuejs

我们来做一个Vue程序，体验一下Vue的响应式

我们来阅读JavaScript代码，会发现创建了一个Vue对象

创建Vue对象的时候，传入了一些options：{}

  • {}中包含了el属性：该属性决定了这个Vue对象挂载到了哪一个元素上，很明显，我们这里挂载了id为app的元素上

  • {}中包含了data属性：该属性中通常会存储一些数据

    • 这些数据可以是我们直接定义出来的，比如想上面这样。

    • 也可能来自网络，服务器加载的

代码：




    
    Title



{{messages}}

浏览器显示

image-20210512220500740

什么是命令式编程和声明式编程：

命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。

声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

详细：编程范式：命令式编程(Imperative)、声明式编程(Declarative)和函数式编程(Functional) - backslash112 - 博客园

1.4. 创建Vue实例传入的Options

你会发现，我们在创建Vue实例的时候，传入了一个对象options

详细请访问：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM

目前掌握这些选项：

  • el：

    • 类型：string | Element

    • 限制：只在用 new 创建实例时生效。

    • 作用：决定之后Vue实例会管理哪一个DOM

    • 详细：https://cn.vuejs.org/v2/api/#el

  • data：

    • 类型：Object | Function

    • 限制：组件的定义只接受 function。

  • methods：

    • 类型：{ [key: string]: Function }

    • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

    • 详细：https://cn.vuejs.org/v2/api/#methods

1.5. Vue的生命周期

生命周期：事物从诞生到消亡的整个过程

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件**创建、数据初始化、挂载、更新、销毁**，这就是一个组件所谓的生命周期。在组件中具体的方法有:

  beforeCreate

  created

  beforeMount

  mounted

  (

​     beforeUpdate

​     updated

   )

  beforeDestroy

  destroyed

生命周期流程图：

1.6 设置Vue的template（模板）

  1. 打开Webstorm

    Vue笔记_第1张图片

  2. 找到Editor-> Live Template - >Vue

    Vue笔记_第2张图片

  3. 进行设置 (Abbreviation: 缩写词， Description: 说明)

    Vue笔记_第3张图片

    {{message}}

  4. 点击Change

    Vue笔记_第4张图片

  5. OK

2. 基本语法

2.1 插值操作

如何将data中的文件数据，插入到HTML中呢？

  • 可以通过Mustache语法（也就是双大括号）

  • Mustache：胡子/胡须




  
  Title




  
{{message}}

  
{{firstName}} {{lastName}}

  
{{firstName + lastName}}

​

Vue笔记_第5张图片

Vue笔记_第6张图片

2.2 指令

v-once

在某些情况下，我们可能不希望界面随意的随意改变

  • 这个时候，我们就可以使用Vue的指令

v-once:

  • 改指令后面不需要跟如何表达式

  • 该指令表达元素和其他组件只渲染一次，不会随着数据改变而改变

代码：




  
  Title




  
{{message}}

v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过{{}}来输出，会将HTML代码也一起输出

  • 但是我们可能希望的是按照HTML进行解析，并且显示对应的数据内容

如果我们希望解析出HTML展示可以使用v-html指令

  • 该指令后面往往会将跟上一个string类型

  • 会将string的html解析出来并且进行渲染

代码：




  
  Title




  
{{message}}

  
{{url}}

    // 使用v-html进行渲染
  

Vue笔记_第7张图片

v-text

v-pre

v-cloak(cloak：斗篷)

3. 绑定属性

3.1 v-bind

某些属性我们也希望动态来绑定。

  • 比如动态绑定a元素的href属性

  • 比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令：

  • 作用：动态绑定属性

  • 缩写：：

  • 预期： any fwith argument）I Object（without argument）

  • 参数：attrOrProp（optional）

我们如果直接使用musttache语法进行绑定的话，会出现下面的情况

Vue笔记_第8张图片

Vue笔记_第9张图片

正确的使用方式是通过v-bind，让标签进行进行动态绑定达到我们想要的效果

Vue笔记_第10张图片

代码：




  
  Title




  

  
  

  哔哩哔哩

  
  

动态绑定class

当然我们也可以使用v-bind进行动态绑定class

Vue笔记_第11张图片

效果：

Vue笔记_第12张图片

通过console来更改Boolean值

Vue笔记_第13张图片

上面那种写法会让人感觉到不是很友好，我们可以使用函数来封装

Vue笔记_第14张图片

代码：




  
  Title
  




  
  
  
{{message}}

  
  
{{message}}

  
  

image-20210513204809830

动态绑定style

在写CSS属性的时候，比如font-size

  • 我们可以使用驼峰式

  • 或者短横线分隔font-size（但是记得加单引号括起来)

实例图：

Vue笔记_第15张图片

效果图：

Vue笔记_第16张图片

也可以使用变量名来进行

Vue笔记_第17张图片

效果图：

Vue笔记_第18张图片

代码：




  
  Title





  
  
{{message}}

  
  
{{message}}

  
  
{{message}}

3.2 计算属性

基本使用

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

  • 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。

  • 但是如果多个地方都需要显示完整的名称，我们就需要写多个{firstName} {lastName}

基本使用：

Vue笔记_第19张图片

效果图：

Vue笔记_第20张图片

复杂操作：

Vue笔记_第21张图片

结果：

image-20210513212247646

代码：




  
  Title




  {{totalPrice}}

3.3 computed和methods的对比

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

Reversed message: "{{ reversedMessage() }}"

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

总结：

computed：会进行缓存，如果多次使用时，计算属性只会调用一次。

methods: 调用一次执行一次

3.4 v-on

概述： 在前端开发中，我们需要经常和用于交互。

  • 这个时候，我们就必须监听用户发生的时间，比如击、拖拽、键盘事件等等

  • 在Vue中如何监听事件呢？使用v-on指令v-on介绍

v-on介绍：

  • 作用：绑定事件监听器

  • 缩写：@

  • 预期：Function |Inline Statement|Object

  • 参数：event

基本使用

Vue笔记_第22张图片

上面这种方法，适合简单的事件绑定，如果我们有其他的功能实现这种写法就不太好，所以我推荐下面这种写法

Vue笔记_第23张图片

当然，也可以用语法糖的方式进行编写

Vue笔记_第24张图片

代码：




  
  Title




  
{{number}}

  




  
  






​

v-on还可以进行传参数

Vue笔记_第25张图片

如果你需要传递参数就记得添加（），如果你不需要传递参数就不用添加（）

Vue笔记_第26张图片

如果不知道什么是MouseEvent对象的话：

javascript MouseEvent对象_Claroja的博客-CSDN博客_js mouseevent

代码：




  
  Title




  
  

  
  
  
​

v-on的修饰符：

  • .stop - 调用event.stopPropagation()

  • .prevent - 调用event.preventDefault()

  • .{keyCode | keyAlias} 只当时间是从特定键触发时才触发回调

  • .native - 监听组件根元素的原生事件

  • .once - 只触发一次回调

基本使用：

Vue笔记_第27张图片

效果图：

Vue笔记_第28张图片

如果我们想组织这种冒泡事件可以使用.stop

Vue笔记_第29张图片

效果图：

Vue笔记_第30张图片

代码：




  
  Title




  

    aaa
    
    
  

4. 条件判断

4.1 v-if v-else-if v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染。

基本使用：

Vue笔记_第31张图片

效果图：

Vue笔记_第32张图片

Vue笔记_第33张图片

v-else的使用

Vue笔记_第34张图片

效果图：

Vue笔记_第35张图片

代码：




  
  Title




  
{{message}}

  
isShow为false的时候你才能看到我

  

4.2 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

    基本使用：

    Vue笔记_第36张图片

效果图：

Vue笔记_第37张图片

代码：




  
  Title




  
  
{{message}} v-if

  
  
{{message}} v-show

5. 循环遍历

5.1 v-for

当我们有一组数据需要渲染时，我们就可以使用v-for

  • v-for的语法类似于JavaScript中的for循环

  • 格式：item in itmes的形式

如果在遍历的过程中，我们需要拿到元素在数组的中的索引值

  • 语法格式： v-for = (item, index) in items

  • 其中的index就代表了取出的item在原数组中的索引值

基本使用：

image-20210514165328625

效果图：

Vue笔记_第38张图片

当然也可以遍历对象

Vue笔记_第39张图片

效果图：

image-20210514165832190

如果想拿到key的话，可以这样：

Vue笔记_第40张图片

效果图：

Vue笔记_第41张图片

注意：遍历数组拿下标，item在前，index在后， 遍历对象拿key的话， values在前， key在后

6.表单绑定

6.1 v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定

Vue笔记_第42张图片

效果图：

Vue笔记_第43张图片

代码：




  
  Title




  
  {{message}}

v-model其实是一个语法糖，他的背后本质上是包含两个操作：

  • v-bind绑定一个value属性

  • v-on指令给当前元素绑定input事件

Vue笔记_第44张图片

代码：

 



  
  Title




  

我们可以使用v-model结合radio使用：

Vue笔记_第45张图片

效果图：

Vue笔记_第46张图片

也可以配合checkbox：

Vue笔记_第47张图片

效果图：

Vue笔记_第48张图片

代码：




  
  Title




  LXL
  LOL
  LKL
  LPL
  

  
你的爱好：{{hobbies}}

6.2 值绑定

值绑定的意思就是给value赋值

  • 我们前面的value中的值，可以回头看一下，都是在定义input的时候直接给定的

  • 但是真实开发中，这些input的值可能是从网络获取或定义data中的

  • 所以我们可以通过v-bind:value动态给value绑定值

Vue笔记_第49张图片

代码：




  
  Title




  LXL
  LOL
  LKL
  LPL
  

  
你的爱好：{{hobbies}}


  

6.3 修饰符

lazy修饰符：

  • lazy修饰符可以让数据在失去焦点或者回车时才会更新

number修饰符：

  • number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符：

  • trim修饰符可以过滤内容左右两边的空格

7. 组件化开发

7.1 什么是组件化？

人面对复杂问题的处理方式：

  • 任何一个人处理信息的逻辑能力都是有限的

  • 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。

  • 但是，我们人有一种天生的能力，就是将问题进行拆解。

  • 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

组件化也是类似的思想：

  • 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。

  • 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

Vue笔记_第50张图片

7.2 Vue组件化思想

组件化是Vue.js中的重要思想

  • 他提供了一中抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用

  • 任何的应用都会被抽象成一颗组件树

    Component Tree

组件化思想的应用：

  • 有了组件化的思想，我们在之后的开发中就要充分的利用它

  • 尽可能的将页面拆分成一个个小的、可复用的组件

  • 这样让我们的代码更加方便组织和管理，并且扩展性也更强

7.3 组件化的基本步骤

  1. 创建组件构造器

    Vue.extend0：

    • 调用Vue.extend0创建的是一个组件构造器。

    • 通常在创建组件构造器时，传入template代表我们自定义组件的模板。

    • 该模板就是在使用到组件的地方，要显示的HTML代码。

    • 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

  2. 注册组件

    Vue.component（）：

    • 调用Vue.component0是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。

    • 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

  3. 使用组件

    • 组件必须挂载在某个Vue实例下，否则它不会生效。

Vue笔记_第51张图片

Vue笔记_第52张图片

效果图：

Vue笔记_第53张图片

代码：




  
  Title





  

7.4 全局组件和局部组件

我们上面创建的就是全局组件，全局组件就是可以在多个Vue实例里面使用

Vue笔记_第54张图片

效果图：

Vue笔记_第55张图片

那么我们如何创建局部组件? 其实创建局部组件也很简单，把要注册的组件放到某个Vue实例里面注册就好了

Vue笔记_第56张图片

效果图：

Vue笔记_第57张图片

我们会发现标签只在

里面有效，这就是局部组件

代码：




  
  Title




  
  


​


  

7.5 父组件和子组件

什么是父组件，什么又是子组件。简单来说：我们把某段代码封装成了一个组件，而这个段组件里面又引入另一个组件，我们把引入封装的组件叫做父组件，把被引入的组件叫做子组件。

Vue笔记_第58张图片

效果图：

image-20210515113026145




  
  Title




  

7.6 注册组件的语法糖方式

我们之前注册组件的方式，会觉得有些繁琐

  • Vue为了简化这个过程，提供了注册的语法糖

  • 主要是省去了调佣Vue.extend()的步骤，而是可以直接使用一个对象来替换

Vue笔记_第59张图片

效果图：

Vue笔记_第60张图片

代码：

 



  
  Title




  
  

7.7 组件模板抽离

我们之前虽然简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模板的写法

如果我们能将其中的html分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰

Vue提供了两种方案来定义HTML模块内容：

  • 使用标签

  • 使用