Vue简单介绍

最新推荐文章于 2024-05-19 23:12:11 发布

不想写代码的懒大王

最新推荐文章于 2024-05-19 23:12:11 发布

阅读量402

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54212148/article/details/128108307

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue简单介绍与使用

Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架

渐进式
- 可以自底向上逐层的应用
  - 简单应用：只需要一个轻量小巧的核心库
  - 复杂应用：可以引入各种各样的插件

Vue特点

采用组件化模式，提高代码复用率的同时让代码更好维护
- 组件化
  - 组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，由多种属性、状态反映其内部特性。
  - 组件化是一种高效的处理复杂应用系统，更好的明确功能模块作用的方式。
声明式编程，让编程人员无需直接操作DOM，提高开发效率
- 声明式编程
  - 直接告述计算它想要的结果，至于怎么做，由预先写好的程序依据一定的算法由计算机自动推算出来
- 命令式编程
  - 像它的名字一样，它由开发者我们一步一步的告述计算机，执行一系列的操作，然后得到想要的结果，起主要作用的是开发者，计算机只是帮助开发者执行计算而已。
使用虚拟DOM+优秀的DIFF算法，尽量复用DOM节点
- 虚拟DOM
  - 虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，简单地说，就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性，以这三个属性来描述一个DOM节点，每组描述就是一个VNode，整个VNode的集合就是一个虚拟DOM树
- DIFF算法
  - Diff算法是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM，对比出哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点，而不用更新其它数据没发生变化的节点，实现精准地更新真实DOM，进而提高效率。
  - diff算法的本质是找出两个对象之间的差异，目的是尽可能复用节点。此处说到的对象其实就对应 vue中的 virtual dom,即使用 js 对象来表示页面中的 dom 结构。

学习Vue需要掌握JavaScript的技术

ES6语法规范
- 什么是ES6
  - ECMAScript是javascript标准，ES6就是ECMAScript的第6个版本
  - ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
- 语法规范
  - 变量和类型
  1. 变量必须显式声明作用域
    - var => 用于声明全局变量或函数级变量
    - let => 用于声明块级的局部变量
    - const => 声明块级域的只读局部变量
      var声明的变量往往会越域；let声明的变量有严格局部作用域
      
      var 可以声明多次；let只能声明一次
      
      var会变量提升；let不存在变量提升
      
      const声明变量相当于声明了一个常量
      
      声明之后不允许改变
      
      一旦声明必须初始化，否则会报错
      
      注意：要习惯使用let声明变量
  2. 将所有的const和let分组
  3. 在需要的地方给变量赋值，但要把它们放在一个合理的位置
    - let和const是作用域而不是函数作用域，不用担心变量定义会被前移导致问题，把变量的赋值和调用代码放在一起会使逻辑更加清晰，可读性更好
  - 对象和引用
    1. 使用对象方法的简写
    2. 创建有动态属性名的对象时，尽量在一个地方定义对象的所有属性
    3. 使用对象属性的简写
      - ES6中，对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候，能够做的事件更多了
  - 数组
    1. 使用扩展运算符 ... 复制数组
      - 扩展运算符可以减少赋值语句的使用，或者减少通过下标访问数组或对象的方式，使用代码更加简洁优雅，可读性更佳
  - 属性
    1. 使用 . 来访问对象的属性，只有属性是动态的时候使用 [ ]
  - 函数
    1. 使用函数声明代替函数表达式
      - 函数声明是可命名的，所以它们在调用栈中更容易被识别此外，函数声明会把整个函数提升，而函数表达式只会把函数引用的变量名提升。这条规则使得箭头函数可以取代函数表达式
    2. 直接给函数的参数指定默认值，不要使用一个变化的函数参数
    3. 直接给函数参数赋值时，要避免副作用
    4. 不要使用arguments, 可以选择rest语法 ... 替代
      - rest语法参数是一个真正的数组，而arguments是一个类数组
  - 代码块
    1. 如果通过if和else使用多行代码块，把else放在if代码块关闭括号的同一行
    2. 使用大括号包裹所有的多行代码块
  - 逗号、分号
    1. 逗号写在行尾，并且增加结尾的逗号
    2. 使用分号，以分号作为语句的结束符
  - 模块
    1. 在代码中使用ES6标准的模块（import/export)方式，而不是使用非标准的模块加载器
    2. 不要使用通配符 *的import
      - 这样可以确保被import的模块只有一个默认的export项
    3. 不要从import中直接export
    4. 如果你的文件只输出一个类，那么你的文件名必须和类名完全保持一致
  - 箭头函数
    1. 别保存this的引用，使用箭头函数或Function.bind
      - 箭头函数提供了更简洁的语法，并且箭头函数中的this对象指向是不变的， this绑定到定义时所在的对象。通常情况下，这是我们想要的，有很好的代码可读性，而保存this对象的使用方式，会让开发人员搞混
    2. 如果一个函数适用一行写出并且只有一个参数，那就把花括号、圆括号和return都省略掉，如果不是，那就不要省略
    3. 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数
      - 箭头函数创造了一个新的this执行环境。通常情况下，能满足你的需求，而且这样的写更为简洁。如果你有一个相当复杂的函数，那么可以把逻辑部分转移到一个函数声明上
  - 构造器
    1. 采用class关键字定义类
    2. 采用extends关键字实现继承
      - 因为extends是内建的继承方式，并不会破坏instanceof原型检查
  - 解构
    1. 使用解构存取和使用多属性对象
      - ES6允许按照一定的模式，从数组和对象中提取值、对变量进行赋值，这称之为解构，解构赋值避免了临时变量或对象，给JavaScript书写带来了很大的便利性，同时也提高了代码的可读性
    2. 将数组成员赋值给变量时，使用数组解析
    3. 需要回传多个值时，使用对象解构，而不是数组解构
      - 对象解构在增加属性或改变排序时，无需改变调用时的位置
  - String
    1. 长度超过80的字符串应该使用字符串连接换行
    2. 构建字符串时，使用字符串模板而不是字符串连接
    3. 数组遍历采用for/of, 对象遍历采用for/in
  - 存取器
    1. 属性的存取函数不是必须的，如果需要存储函数使用get方法和set方法。如果属性是布尔值，存取函数是isVal()或hasVal()
    2. 创建get()和set()函数要保持一致
  - 参考链接：https://www.jianshu.com/p/3089855a86b4
ES6模块化
模块化：
1. 模块化开发就是将程序划分成一个个(互相依赖的)小文件/模块来开发，然后将小模块组合起来；
2. 这个模块中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
3. 这个模块可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
4. 也可以通过某种方式，导入另外模块中的变量、函数、对象等
模块化的好处：
1. 防止命名冲突
2. 代码复用（非模块化开发时，代码重用时，引入 js 文件的数目可能少了或者引入的顺序不对，会导致一些问题）
3. 高维护性（模块之间有高耦合低内聚的特点）
- ES6为JavaScript添加了import和export关键字，将模块化作为核心语言特性来支持了。 ES6 Module在概念上和CommonJs基本相同，都是将代码拆分到不同的代码文件中，每个代码文件都是一个模块，模块之间可以互相导入和导出
- ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
  ES6模块与CommoJS模块的差异
  
  CommonJS 模块输出的是一个值的拷贝(module.exports的浅拷贝)，ES6 模块输出的是值的引用。
  
  CommonJS 模块是运行时加载，ES6 模块是编译(解析)时加载。
  - 运行时加载意味着是js引擎在执行js代码的过程中加载模块；所以require可以与变量、表达式等运行时代码结合使用
  - 编译时（解析）时加载，意味着import不能和运行时相关的内容放在一起使用：
    - 比如from后面的路径需要动态获取；
    - 比如不能将import放到if等语句的代码块中；
    - 所以我们有时候也称ES Module是静态解析的，而不是动态或者运行时解析的；
  CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。
  - 同步的就意味着一个文件没有加载结束之前，后面的代码都不会执行；
  - 异步的意味着：不会阻塞主线程继续执行；
    - JS引擎在遇到import时会去获取这个js文件的过程是异步的
    - 设置了 type=module 的script标签，相当于加上了 async 属性；
    - 如果我们后面有普通的script标签以及对应的代码，那么ES Module对应的js文件和代码不会阻塞它们的执行
  - 参考链接：https://www.jianshu.com/p/7472f0dfab55
- 导出 export 类型
  1. 声明之前
    - export [default] class/function/variable ...
  2. 单独导出
    - ``export {x [as y], …}.
  3. 重新导出
    - export {x [as y], ...} from "mod"
    - export * from "mod"（不会重新导出 default）
    - export {default [as y]} from "mod"（会重新导出 default）
- 导入 import 类型
  1. 模块中的命名导出
    - import {x [as y], ...} from "mod"
  2. 默认导出
    - import x from "mod"
    - import {default as x} from "mod"
  3. 导入全部导出
    - import * as obj from "mod"
  4. 导入模块（可运行），但是没有将其赋值给变量
    - import "mod"
包管理器
- 包管理器是是开发人员用来自动寻找、下载、安装、配置、升级和删除系统包的工具
- 参考链接：JavaScript 包管理器简史（npm/yarn/pnpm） - 知乎 (zhihu.com)
原型、原型链
- 原型
  - 每一个对象都与另一个对象相关联，那个关联的对象就称为原型
  - 作用
    - 数据共享节约内存空间
    - 实现继承
- 原型链
  - 在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链
  - 作用
    - 继承
    - prototype用来实现基于原型的继承与属性的共享
    - 避免了代码冗余，公用的属性和方法，可以放到原型对象中，这样，通过该构造函数实例化的所有对象都可以使用该对象的构造函数中的属性和方法！
    - 减少了内存占用
数组的常用方法
- 不改变原数组
  1. join(str) 数组转字符串，方法只接受一个参数，默认为逗号分隔符
```
conat arr = [1, 2, 3]
console.log(arr) // [1, 2, 3]
console.log(arr.join()) // 1,2,3
console.log(arr.join(:)) // 1:2:3
```
  2. arr1.concat(arr2) 连接两个或多个数组，返回一个新的数组
```
const arr1 = [1, 2, 3]
const arr2 = [4, 5]
const newArr = arr1.concat(arr2)
console.log(newArr) // [1, 2, 3, 4, 5]
```
    - join() 实现重复字符串
```
const str = new Array(3).join('哈')
console.log(str) 
```
  3. slice() 截取数组
    
    arr.slice(start, end) 从start处开始选取（不包括该元素），从end处结束选取，如果为空的话，那么选取从start到数组结束的所有元素。负数代表方向，从数组尾部开始计算位置
```
const arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1)) // [2, 3, 4, 5]
console.log(arr.slice(1, -2)) // [2, 3]
console.log(arr.slice(-3, 1)) // [2]
console.log(arr) // [1, 2, 3, 4, 5]
```
  4. 索引方法
    1. arr.indexOf(item, start) 从数组的开头开始向后寻找
    2. arr.lastIndexOf(item, start) 从数组的末尾开始向前查找
      两个方法都是返回要查找的项所在数组中首次出现的位置，没找到的话就返回-1
      [item] 必须项，查找的元素
      [start] 可选，在数组中开始检索的位置，默认0
```
const arr = [2, 4, 1, 5, 1, 2，4]
console.log(arr.indexOf(5)) // 3
console.log(arr.lastIndexOf(1)) // 2
console.log(arr.indexOf(3)) // -1
```
  5. 根据函数内的判断返回找到的数组内的第一个元素
    - 对于空数组不执行
    - [currentValue] 必须项，当前元素
    - [index] 可选。当前元素的索引值
    - [arr] 可选。当前元素所属的数组对象
    1. arr.find((currentValue, index, arr) => {}) 返回通过测试函数内判断的数组的第一个元素的值。当数组中的元素在测试函数中返回true时，返回符合条件的元素，之后不再调用测试函数判断剩下的元素，如果每个元素都执行了测试函数，没有符合的元素，则返回undefined
```
const arr = [1, 2, 3, 4]
const findItem = arr.find((item, index) => {
    return item > 2
})
const findItem1 = arr.find((item, index) => {
    return item > 5
})
console.log(findItem) // 3
console.log(findItem1) // undefined
```
    1. findIndex((currentValue, index, arr) => {}) 用法和find()一样，不同的是不是返回数组内元素，而是返回符合测试函数判断的元素索引值，如果没有符合条件的元素返回 -1
```
const arr = [1, 2, 3, 4]
const findItemIndex = arr.findIndex((item, index) => {
    return item > 2
})
const findItemIndex1 = arr.findIndex((item, index) => {
    return item > 5
})
console.log(findItemIndex) // 2
console.log(findItemIndex1) // -1
```
  6. 迭代方法
    1. arr.some((currentValue , index , arr) => {}, thisValue) 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true，不再往下执行
```
const arr = [1, 2, 3]
const str = arr.some((currentValue) => {
    console.log(currentValue)
    return currentValue > 1
})
// 1
// 2
console.log(str) // true
```
    1. arr.filter((currentValue , index , arr) => {}, thisValue) “过滤”功能，方法
      创建一个新数组，其包含通过所提供函数实现的测试的所有元素。（可以改变数组长度，不必和原数组长度保持一致）
      arr1和arr2结果一致，可以看出函数支持弱等于，不是必须全等于
```
const arr = [1, 2, 3]
const arr1 = arr.filter((currentValue) => {
    return currentValue > 1
})
const arr2 = arr.filter((currentValue) => {
    return currentValue > '1'
})
console.log(arr) // [1, 2, 3]
console.log(arr1) // [2, 3]
console.log(arr2) // [2, 3]
```
    1. arr.forEach((currentValue , index , arr) => {}, thisValue) 对数组进行遍历循环，这个方法没有返回值
    - 对于空数组不执行
      
      [currentValue] 必须项，当前元素
      
      [index] 可选。当前元素的索引值
      
      [arr] 可选。当前元素所属的数组对象
      
      [thisValue] 可选。传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值
```
const arr = [1,4,7,10];
arr.forEach((currentValue, index, arr) => {
    console.log(index + "--" + currentValue + "--" + (arr === Arr)) 
})
// 输出：
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true  
```
    1. arr.map((currentValue , index , arr) => {}, thisValue) 指“映射”，方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。（不会改变数组长度，和原数组长度保持一致）
```
const arr = [1, 2, 3]
const arr1 = arr.map((currentValue) => {
    return currentValue + 1
})
console.log(arr) // [1, 2, 3]
console.log(arr1) // [2, 3, 4]
```
    1. arr.every((currentValue , index , arr) => {}, thisValue) 判断数组中的每一项是否都满足条件，全部符合就会返回true，否则false
```
const arr = [1, 2, 3]
const str = arr.every((currentValue) => {
    return currentValue > 1
})
console.log(str) // false
```
  7. 归并方法
    - 这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。他们都接收两个参数，第一个参数是每一项调用的函数，函数接受四个参数分别是初始值，当前值，索引值，和当前数组，函数需要返回一个值，这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。
    - [total] 必须项，初始值, 或者计算结束后的返回值。
    - [cur] 必须项，当前元素。
    - [index] 可选。当前元素的索引值
    - [arr] 可选。当前元素所属的数组对象
    - [initialValue] 可选。传递给函数的初始值。
    arr.reduce((total , cur , index , arr) => {}, initialValue) 从数组的第一项开始，逐个遍历到最后
```
var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);
// total is 6
```
    arr.reduceRight((total , cur , index , arr) => {}, initialValue) 从数组的最后一项开始，向前遍历到第一项
```
let flattened = [
    [0, 1], 
    [2, 3], 
    [4, 5]
].reduceRight((a, b) => {
    return a.concat(b);
}, []);
```
  8. 遍历数组方法，ES6新增方法
    
    values()对键值的遍历
```
const arr = ["a","b","c","d"]
for(let i of arr.values()){
    console.log(i)
}
//打印：
// a
// b
// c
// d
```
    keys() 对键名的遍历
```
const arr = ["a","b","c","d"]
for(let i of arr.keys()){
    console.log(i)
}
//打印：
// 0
// 1
// 2
// 3
```
    entries()是对键值对的遍历
```
const arr = ["a","b","c","d"]
for(let i of arr.entries()){
    console.log(i)
}
//打印：
// [0, "a"]
// [1, "b"]
// [2, "c"]
// [3, "d"]
for(let [idx,item] of arr.entries()){
    console.log(idx + ":"+item)
}
//打印：
// 0:a
// 1:b
// 2:c
// 3:d
```
  9. includes()
    arr.includes(searchElement , fromIndex) 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
    - ES6新增方法
    - [searchElement] 可选。需要查找的元素值。
      
      [fromIndex] 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0
```
const arr = ["a","b","c","d"]
const result1 = arr.includes("b")
const result2 = arr.includes("b",2)
const result3 = arr.includes("b",-1)
const result4 = arr.includes("b",-3)
console.log(result1)  // true
console.log(result2)  // false
console.log(result3)  // flase
console.log(result4)  // true
```
  10. copyWithin()
  arr.copyWithin(target, start, end) 用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员
  - ES6新增方法
  - [target] 必需。从该位置开始替换数据。
    
    [start] 可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
    
    [end] 可选。到该位置前停止读取数据 (默认为 array.length)。如果为负值，表示倒数
```
let arr = [1,2,3,4,5,6]
let result1 = [1,2,3,4,5,6].copyWithin(0)
let result2 = [1,2,3,4,5,6].copyWithin(0,1)
let result3 = [1,2,3,4,5,6].copyWithin(1,3,5)
let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1)
let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6)
console.log(result1)  // [1, 2, 3, 4, 5, 6]
console.log(result2)  // [2, 3, 4, 5, 6, 6]
console.log(result3)  // [1, 4, 5, 4, 5, 6]
console.log(result4)  // [1, 3, 4, 5, 5, 6]
console.log(result5)  // [1, 3, 4, 5, 6, 6]
```
- 改变原数组
  - 添加元素操作
    1. push()
      
      push() 向数组的末尾添加一个或多个元素，并返回新的长度
```
const arr = [1, 2]
console.log(arr.push(3)) // 3
console.log(arr) // [1, 2, 3]
```
    2. unshift()
      
      unshift() 向数组的开头添加一个或多个元素，并返回新的长度
```
const arr = [1, 2]
console.log(arr.unshift(3)) // 3
console.log(arr) // [3, 1, 2]
```
  - 删除元素操作
    1. shift()
      
      shift() 删除并返回数组第一个元素
```
const arr = [1, 2, 3]
const deleteItem = arr.shift()
console.log(arr) // [2, 3]
console.log(deleteItem) // 1
```
    2. pop()
      
      pop() 删除并返回数组最后一个元素
```
const arr = [1, 2, 3]
const deleteItem = arr.pop()
console.log(arr) // [1, 2]
console.log(deleteItem) // 3
```
  - 数组排序
    1. sort()
      
      sort() 对数组的元素进行排序
```
const arr = [2, 3, 4, 1]
console.log(arr.sort()) // [1, 2, 3, 4]
console.log(arr) // [1, 2, 3, 4]
```
      sort()并不是按照数组元素数值的大小对数字进行排序，而是按照字符编码的顺序进行排序
```
const arr = [2, 4, 3, 1]
const arr1 = [...arr].sort((a, b) => a - b)
const arr2 = [...arr].sort((a, b) => b - a)
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [4, 3, 2, 1]
```
  - 反转数组
    1. reverse()
      
      reverse() 颠倒数组中元素的顺序
```
const arr = [5, 4, 3, 1]
console.log(arr.reverse()) // [1, 3, 4, 5]
console.log(arr) // [1, 3, 4, 5]
```
  - 更新数组
    1. splice()
      arr.splice(index, howmany, item1, …, itemX) 向/从数组中添加/删除项目，然后返回被删除的项目，返回含有被删除的元素的数组，若没有删除元素则返回一个空数组
      
      [index] 必传项，整数，规定添加/删除项目的位置，负数表示从数组结尾处规定位置
      
      [howmany] 必传项，要删除的项目数量。如果设置为 0，则不会删除项目
      
      [item1, …, itemX] 可选。向数组添加的新项目
```
const arr = [1, 2, 3]
const arr1 = arr.splice(2, 1)
console.log(arr1) // [3]
console.log(arr) // [1, 2]

const arr2 = arr.splice(1, 0, 'ss')
console.log(arr2) // ['ss']
console.log(arr) // [1,'ss', 2]
```
- 其他数组
  1. Array.from()
    
    Array.from() 用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组
    
    ES6新增方法
```
let arr1 = Array.of(1,2,3)
let arr2 = Array.of([1,2,3])
let arr3 = Array.of(undefined)
let arr4 = Array.of()
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [[1, 2, 3]]
console.log(arr3) // [undefined]
console.log(arr4) // []
```
  2. Array.of()
    
    Array.of() 将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组
    
    ES6新增方法
```
let arr1 = Array.of(1,2,3)
let arr2 = Array.of([1,2,3])
let arr3 = Array.of(undefined)
let arr4 = Array.of()
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [[1, 2, 3]]
console.log(arr3) // [undefined]
console.log(arr4) // []
```
  3. fill()
    arr.fill(value, start, end) 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引
    
    ES6新增方法
    - [value] 必需。填充的值。
      
      [start] 可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
      
      [end] 可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起
```
let arr = [1,2,3,4,5,6]
arr.fill(0)  // [0, 0, 0, 0, 0, 0]
arr.fill(0,1)  // [1, 0, 0, 0, 0, 0] 
arr.fill(0,1,2)  // [1, 0, 3, 4, 5, 6]
arr.fill(0,-1)  // [1, 2, 3, 4, 5, 0]
arr.fill(0,1,-1)  // [1, 0, 0, 0, 0, 6]
```
axios
- 什么是axios
  - Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求
- axios特性
  - 可以在浏览器中发送 XMLHttpRequests
    2、可以在 node.js 发送 http 请求
    3、支持 Promise API
    4、拦截请求和响应
    5、转换请求数据和响应数据
    6、能够取消请求
    7、自动转换 JSON 数据
    8、客户端支持保护安全免受 XSRF 攻击
promise
- 什么是promise
  - promise是一种约定，并非一种技术，像设计模式一样，跟语言无关、框架无关
  - Promise是异步编程的一种解决方案，用于一个异步操作的最终完成(或失败)及其结果值的表示，比传统的回调函数方案更加合理
- promise有什么用
  - 主要是为了解决js异步回调时业务太乱，尤其嵌套异步时，代码也很丑，维护性也差，错误处理也不能统一这些问题

Vue简单实例

初步认识Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>初步认识Vue</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!--容器-->
		<div id="root">
			<h1>Hello,{{name}}，{{address}}</h1>
			<hr>
			<h1>指令语法</h1>
			<a :href="url" target="_blank" rel="noopener noreferrer">百度</a>
			<!--<a v-bind:href="url" target="_blank" rel="noopener noreferrer">百度</a>-->
		</div>
		
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false
		//创建Vue实例
		new Vue({
			el:'#root',//挂载点，指定当前实例为哪个容器服务，值通常是css选择器字符串对象
			//el:document.getElementById('root')
			data:{//data用于存储数据，数据供el挂载点的容器使用
				name:'Vue',
				address:'湖南',
				url:'http://www.baidu.com',
			}
			
		})
		
	</script>
</html>

Vue数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="ly">
			<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br />
			单向数据绑定：<input type="text" v-model:value="name"> -->
			单向数据绑定：<input type="text" :value="name"><br />
			单向数据绑定：<input type="text" v-model="name">
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false
		//创建Vue实例
		new Vue({
			el:'#ly',
			data:{
				name:'Vue',
			}
		})
	</script>
</html>

Vue el和data两种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el和data两种写法</title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="oy">
			<h1>Hello,{{name}}</h1>
		</div>
		<div id="oy1">
			<h1>Hello,{{name}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false
		//创建Vue实例
		//el的两种写法
		const v = new Vue({
			//el:'#oy',
			data:{
				name:'Vue',
			}
			
		})
		console.log(v)
		v.$mount('#oy')//$mount挂载
		// setTimeout(() =>{
		// 	v.$mount('#oy')
		// },1000);  等待1秒
		//data的两种写法
		new Vue({
			el:'#oy1',
			//对象模式
			// data:{
			// 	name:'Vue1',
			// }
			
			//函数模式
			// data:function(){
			// 	console.log('@@@',this)//this是Vue实例对象
			// 	return{
			// 		name:'Vue1'
			// 	}
			// }
			data(){
				console.log('@@@',this)//this是Vue实例对象
				return{
					name:'Vue1'
				}
			}
		})
	</script>
</html>

不想写代码的懒大王

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue简单介绍

Vue是一套用于构建用户界面的渐进式JavaScript框架采用组件化模式，提高代码复用率的同时让代码更好维护组件化声明式编程，让编程人员无需直接操作DOM，提高开发效率使用虚拟DOM+优秀的DIFF算法，尽量复用DOM节点虚拟DOMDIFF算法Diff算法是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM，对比出哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点，而不用更新其它数据没发生变化的节点，实现精准地更新真实DOM，进而提高效率。diff算法的本质是找出两个对象之间的差异
复制链接

扫一扫