logo头像

求知若渴,虚心若愚

Vue - 认识Vue

学习资源

JavaScript基础

TIP
这里的JavaScript基础能够帮助快速开发Vuejs项目,所以贴了出来

let、const和var

  • JS没有块级作用域:

    • 在JS函数中的var声明,其作用域是函数体的全部
    • var分为两种:局部作用域和函数作用域
    • var定义的变量可以修改,如果不初始化会输出undefined,不会报错
  • let是更完美的var:

    • let声明的变量拥有块级作用域
    • let声明的全局变量不是全局对象的属性
    • let不能重复声明,会报错
  • 形如for (let x…)的循环在每次迭代时都为x创建新的绑定:

    • 因为形成了闭包
    • 面试题经常遇到
  • const定义的变量:

    • 不可以修改,而且必须初始化
    • 如果const定义的对象,对象属性是可以修改的

ES6中的箭头函数

  • 不绑定this:
    • 箭头函数的this其实就是在定义的时候就确定好的,以后不管怎么调用这个箭头函数,箭头函数的this始终为定义时的this
  • 不绑定arguments:

    • 如果你在箭头函数中使用arguments参数不能得到想要的内容
  • 什么时候不建议用箭头函数:

    • 为对象的方法
    • 不能作为构造函数
    • 定义原型方法
    • 动态的修改this,最好还是不要使用箭头函数了

普通函数this指向问题

  • this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj
  • 在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window (约定俗成)
  • 在严格模式下,没有直接调用者的函数中的this是 undefined
  • 使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

  • 具体规则:

    • 函数调用模式:window
    • 方法调用模式(对象的方法):指向对象
    • 对象的方法:指向新创建出来的对象
    • call,apply,bind

数组⽅法

  • forEach:为每个元素执行对应的⽅法
  • map:返回一个由原数组中的每个元素调⽤一个指定方法后的返回值组成的新数组
  • some:用于测试数组中是否⾄少有一项元素通过了指定函数的测试
  • every:用于测试数组中所有元素是否都通过了指定函数的测试
  • filter:使⽤指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组
  • reduce:接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值
  • indexof:返回在该数组中第一个找到的元素位置,如果它不存在则返回-1
  • js数组方法点击这里,超详细,你想要的全都有

展开运算符

  • 函数调用
  • 数组字面量展开
  • 解构赋值
  • 类数组对象变成数组

字符串方法

  • str.charAt(index):
    • 返回子字符串,index为字符串下标,index取值范围[0,str.length-1]
  • str.indexOf(searchString,startIndex):
    • 返回⼦字符串第一次出现的位置,从startIndex开始查找,找不不到时返回-1
  • str.lastIndexOf(searchString,startIndex):
    • 从右往左找子字符串,找不到时返回-1
  • str.substring(start,end):
    • 两个参数都为正数,返回值:[start,end) 也就是说返回从start到end-1的字符
  • str.slice(start,end):
    • 两个参数可正可负,负值代表从右截取,返回值:[start,end) 也就是说返回从start到end-1的字符
  • str.split(separator,limit):

    • 字符串拆分,参数1指定字符串或正则,参照2指定数组的最⼤长度
  • str.join():

    • 字符串拼接
  • str.replace(rgExp/substr,replaceText):
    • 返回替换后的字符串串
  • str.match(rgExp):
    • 正则匹配

认识Vue

Vue介绍

  • 作者大大:尤雨溪

  • Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

  • Vue 只关注视图层, 采用自底向上增量开发的设计。

  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

MVC和MVVM

MVC

  • MVC:模型(model) — 视图(view) — 控制器器(controller)
  • 用户操作 ->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)

MVVM

  • MVVM:模型(model) — 视图(view) — 视图模型(ViewModel)

  • MVVM是将”数据模型数据双向绑定”的思想作为核心

  • 在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的
  • 因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应到View上。

  • MVVM主要目的是分离视图(View)和模型(Model),优点:
    • 低耦合
    • 可重用性
    • 独立开发
    • 可测试

MVC VS MVVM

TIP
有人坚持Vue不是双向绑定的,有人坚持是,如果你听到有人说Vue不是双向绑定的,不要奇怪

支付宝打赏 微信打赏

赞赏是对我们的肯定!