vue 学习笔记（一）

时间 2020-06-08

标签 vue 学习笔记繁體版

原文原文链接

对于 vue 官网给的教程由浅及深，很是容易上手。我以前有过 react 项目开发经验，对 webpack 打包，脚手架这一类的东西并不陌生。因此也是我上手比较快的缘由吧。简单将我在学习 vue 中碰见的问题和我以为比较重要的东西记录一下，增长记忆。先说好，我这是我的笔记，不是教程，不喜勿喷。javascript

哦，有个特别尴尬，特别严肃的问题。
我想说一声
读： /vjuː/，相似于 view
别在读 v u e 了，各位大佬。
官网学习地址：https://cn.vuejs.org/v2/guidehtml

简单介绍

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

安装方式

npm i -g vue vue-cli

官网上说对于新手不推荐使用 vue-cli，注意学习一下打包工具 webpack， gulp 之类的，了解一下 node 构建流程，而后再回头用 vue-cli，绝壁会醍醐灌顶，如梦初醒，恍然大悟，豁然开朗，茅塞顿开... 没得词语了，书读少了。差很少就是这个意思，站在了一个更高的层面的来学 vue-cli 了。java

而后，新建一个文件夹 vue 用来存放项目的。在 vue 文件夹下打开命令行，用 vue-cli 初始化一个项目。ok， just sonode

vue init webpack 项目名称

而后一路回车就行了。回车前能够大概看一下，各个选项都是什么意思。react

Project name (项目名称)： 项目名称
Project description (A Vue.js project)： 项目描述，能够为空。
Author：做者姓名
Runtime + Compiler: recommended for most users： 运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere：回车就行了
Install vue-router? (Y/n)： 是否安装vue-router，通常都要安装
Use ESLint to lint your code? (Y/n)：  是否使用ESLint管理代码，看我的习惯，条条框框太多，我的不肯使用。
接下来也是选择题Pick an ESLint preset (Use arrow keys)： 选择一个ESLint预设，编写vue项目时的代码风格
Setup unit tests with Karma + Mocha? (Y/n)： 是否安装单元测试
Setup e2e tests with Nightwatch？(Y/n)： 是否安装e2e测试

数据与方法

当一个 Vue 实例被建立时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的全部的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。webpack

1. 只有当实例被建立时 data 中存在的属性才是响应式的。
2. 惟一的例外是使用 Object.freeze(),这会阻止修改现有属性，系统将没法追踪变化。
3. 除了数据属性，vue实例还会暴露一些有用的实例属性和方法。一般都前缀$，以便与用户定义的属性区分开来。如 $watch, $el, $data ...ios

var data = {
    a: 1
}
var vm = new Vue({
    el: "#example",
    data: data
})

console.log(
    "vm.$data === data  ", vm.$data === data, "\n", // true
    "vm.$el === document.getElementById('example'): ",  vm.$el === document.getElementById('example') // true
)
vm.$watch('a', function(newValue, oldValue) {
    // 当修改 a 的值时，会执行该方法
    console.log("newValue === oldValue: ", newValue === oldValue)
})

再举个栗子：web

具体能够查看 API了解更多vue-router

生命周期

要说，生命周期是最基础，最必需要理解的。和 react 同样，每一个实例在被建立时，都会经历几个阶段。beforeCreate，created， beforeMount， mounted， beforeUpdate， updated， beforeDestroy， destroyed

模板语法

# 插值

数据绑定最多见的形式就是使用“Mustache”语法（双大括号） ==> 通常用于插入文本
v-html： Mustache 会将数据解析成普通文本，而非 html 代码。

<p>Using mustaches: {{rawHtml}}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

span 的内容会被替换成 rawHtml 的值，这种会忽略解析 rawHtml 值中的数据绑定。不能使用 v-html 来复合局部模板，由于 vue 不是基于字符串的模板引擎。

Mustache 语法不能做用在 html 特性上，遇到这种状况应该使用 v-bind 指令；在布尔特性的状况下，v-bind 工做起来略有不一样。eg：

<button v-bind:disabled="isButtonDisabled">Button</button>

若是 isButtonDisabled 的值是 null， undefined 或是 false，则 disabled 特性甚至不会被包含在渲染出来的 button 元素中。

对于全部的数据绑定，Vue.js 都提供了彻底的 JavaScript 表达式支持。流控制，语句，语句块都是不会生效的。

PS: 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不该该在模板表达式中试图访问用户定义的全局变量。

# 指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外状况，稍后咱们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于 DOM。

一些指令可以接收一个“参数”，在指令名称以后以冒号表示。eg: v-bind, v-on

<a v-bind:href="url">aaa</a>
<a v-on:click="doSomething">bbb</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定；v-on 用于监听 dom 事件。

对 v-bind 和 v-on 的简写为： :, 和 @; eg:

<a v-bind:href="url">aaa</a>
<a :href="url">aaa</a>

<a v-on:click="do">bbb</a>
<a @click="do">bbb</a>

# 计算属性和侦听器

PS: 对于任何复杂逻辑，都应当使用计算属性（computed）;

计算属性 vs 方法
计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。使用方法，就不会有缓存。

计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变更：侦听属性。当你有一些数据须要随着其它数据变更而变更时，你很容易滥用 watch。
计算属性默认只有 getter，在须要的时也能够提供一个 setter；

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

侦听器（有时间，再了解一下）

虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。

在这儿须要学习一下 axios， lodash。
axios：异步请求封装
lodash：限制操做频率

有个问题值得注意一下：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive 为 truthy 时， html 将会被渲染成：
<p class="foo bar active">Hi</p>

尤为注意，这里的 truthy 不是 true 哈。详情参见MDN

# 条件渲染

v-show

始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-show 不支持 <template > 元素，也不支持 v-else。

v-if vs v-show

v-if:

会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的；若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。

v-show:
无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。

通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。

v-if 和 v-for 一块儿使用时，v-for 具备比 v-if 个更的优先级。

# 列表渲染

在 v-for 块中，咱们拥有对父做用域属性的彻底访问权限；
question：对祖先级呢？
能够用 of 代替 in 做为分隔符。v-for="item of items"
能够用 v-for 遍历对象。能够有三个参数 (value, key, index);
在遍历对象时，是按 Object.keys() 的结果遍历，可是不能保证它的结果在不一样的 JavaScript 引擎下是一致的。

Vue 包含一组观察数组的变异方法，因此它们也将会触发视图更新。以下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但老是返回一个新数组。当使用非变异方法时，能够用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能认为这将致使 Vue 丢弃现有 DOM 并从新渲染整个列表。幸运的是，事实并不是如此。Vue 为了使得 DOM 元素获得最大范围的重用而实现了一些智能的、启发式的方法，因此用一个含有相同元素的数组去替换原来的数组是很是高效的操做。

PS:

① 因为 JavaScript 的限制，Vue 不能检测如下变更的数组：

1. 当利用索引直接设置一个项时，例如：vm.items[indexOfItem] =newValue
2. 当修改数组的长度时，例如：vm.items.length = newLength
举个栗子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

解决方法

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

// 也可使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)

// 解决第二类问题
vm.items.splice(newLength)

② 因为js的限制，Vue不能检测对象属性的添加或删除：
譬如，

var vm = new Vue({
	data: {
		userProfile: {
			name: "Mobro"
		}
	}
})

// 1
Vue.set(userProfile, "age", 23);

// 2
vm.$set(userProfile, "age", 23);

// 3
vm.userProfile = Object.assign(vm.userProfile, {
	age: 23,
	sex: male
})

③ v-for 也能够用来取整数

v-for 和 v-if 在同一个节点上的时候， v-for 比 v-if 优先级更高，即 v-if 将分别重复运行于每一个 v-for 循环中。

⭐️ 注意组件上的 is 属性使用哈。

#事件处理

v-on 监听 DOM 事件，并在触发时运行一些 js 代码。
v-on 能够接受一个须要调用的方法名称。
@click="say('the name is: ', $event)" // $event 是当前 dom 元素

事件修饰符：

.stop 阻止事件继续传播，即捕获和冒泡
.prevent 阻止默认事件，等同于 ev.preventDefault()
.capture 添加事件监听器时使用事件捕获模式，即在捕获模式下触发
.self 当前元素是自身时才会触发函数，是根据 ev.target 是否是自身来决定是否触发
.once 只触发一回，也能够用于用户自定义组件事件上。
.passive 解决浏览器卡顿的新特性，尤为可以提高移动端性能参考文章

js
不要把 .passive 和 .prevent 一块儿使用，由于 .prevent 将会被忽略，同时浏览器可能会报警告。.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

经过全局 config.keyCodes 对象自定义按键修饰符别名：
Vue.config.keyCodes.f1 = 112;

有些按键（.esc 以及全部方向键）在 IE9 中有不一样的 key 值，若想支持 IE9，它们的内置别名应该是首选。

系统修饰符
能够用以下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta 在 mac 上，对应 command 键。在 windows 对应 win 键。
.exact 修饰符容许你控制由精确的系统修饰符组合触发的事件。

eg：

<!-- 即便 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle

这些修饰符会限制处理函数仅相应特定的鼠标按钮。

Q: 为何在 html 中监听事件？

A: 你可能注意到这种事件监听的方式有点违背了关注点分离这个长期以来的优良传统。但没必要担忧，由于全部的 vue.js 事件处理方式和表达式都严格绑定在当前视图的 viewModel 上，它不会致使任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 html 模板便能轻松定位在 javascript 代码里对应的方法。
由于你无须再 javascript 里手动绑定事件，你的viewModel 代码能够是很是纯粹的逻辑，和 dom 彻底解耦，更易于测试。
当一个 ViewModel 被销毁时，全部的事件处理器都会自动被删除。你无须担忧如何清理它们。

当年吹过得牛逼，如已否则，便全不做数。 -- Mobro