Vue笔记系列（一）Vue.js入门

Vue笔记系列
二、Vue.js渐进
三、Vue.js进阶

---

Vue.js的概述

如官网所说，Vue.js是一款轻量级的以数据驱动的渐进式JavaScript 框架。

老卜的 前端开发之走进Vue.js介绍到：

Vue.js数据驱动的原理在于View层的视图发生改变时，Vue会经过DOM Listeners来监听并改变Model层的数据。反之，当Model层的数据发生改变时，也会经过Data Bingings来监听并改变View层的展现。从而实现双向数据绑定的功能。
例如：jQuery经过操做DOM来改变页面的显示，而Vue经过操做数据来实现页面的更新与展现。这样咱们就能很直观的理解数据驱动的意思了。

上面介绍到的是Vue.js的原理，下面再来科普一下MVVM这个概念（一像素写的《Vue.js 和 MVVM 小细节》），可让你更好的理解Vue,可是没有太大的实践做用，可是能够装B，更重要的是能够在面试的时候装B。

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变能够自动传递给 View，即所谓的 数据双向绑定。
Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专一于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责链接 View 和 Model，保证视图和数据的一致性。

起步

虽然对node.js和webpack了解，并在项目中使用过了，但仍是尝试从最基本的了解Vue开始，充分体验一下这渐进过程，直接下载并使用<script>引入
或者使用CDN引入

<script src="https://unpkg.com/vue/dist/vue.js">

声明式渲染

官网首先强调，Vue.js 的核心是一个容许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

简单的html结构，id是start

两对大括号的“Mustache”语法很面熟，在jsx或者arttemplate等通常的渲染引擎相似。

<div id="start">
    {{message}}
</div>

声明Vue对象

引入了vue.js，Vue会被注册为一个全局变量。在实例化 Vue 时，须要传入一个选项对象，它能够包含数据、模板、挂载元素、方法、生命周期钩子等选项。

var start = new Vue({
        el: "#start",
        data: {
            message: "helloWorld,helloVue!"
        }
    })

• el:Vue须要操做的元素节点
• data属性:每一个 Vue 实例都会代理其 data对象里全部的属性。注意只有这些被代理的属性是响应的。若是在实例建立以后添加新的属性到实例上，它不会触发视图更新。

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $
start .$el === document.getElementById('start') // -> true
start这个实例而后.$el，就至关于Vue构造函数传入的el。

如今数据和 DOM 已经被绑定在一块儿，全部的元素都是响应式的。在浏览器控制台修改start.message,页面会相应更新。

Vue经常使用指令介绍

指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。

一、v-text (更新元素的文本内容)

<span v-text="msg"></span>
<!-- 和下面的同样 -->
<span>{{msg}}</span>

二、v-html (更新元素的innerHTML)

注意:内容按普通 HTML 插入 - 不会做为 Vue 模板进行编译。

<div v-html="html"></div>

三、v-if (根据表达式的值的真假条件渲染元素)

<h1 v-if="ok">Yes</h1>
至关于
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}

上面的代码，若是ok为false，则h1不会被渲染出来。
如今只是切换一个元素，若是要同时操做多个，能够在要操做的元素外面包一层，例以下面用div

<div v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
<!-- 若是ok为flase,那么h1和两个p都不会渲染 -->

固然，有if确定就有else。 

v-else (指令给 v-if或 v-show添加一个 “else” 块)

能够看出，v-else不仅是能够搭配v-if，还能够搭配v-show
必须注意 ：v-else元素必须紧跟在 v-if或 v-show元素的后面——不然它不能被识别。

<div v-if="Math.random() > 0.5">
    Sorry
</div>
<div v-else>
    Not sorry
</div>
<!-- 随机切换两种展现结果 -->

四、v-show (根据条件展现元素)

刚在上面提到了v-show，趁热打铁来了解一下，用法跟v-if是同样的，不一样的是有 v-show的元素会始终渲染并保持在 DOM 中。v-show是简单的切换元素的 CSS 属性 display。
官网说v-show不支持 <template>语法。我试了一下

<template v-show="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
</template>
<!--嗯，果真很差用，虽然ok是false，依然会把里面的全部东西都渲染出来 -->

下面说一下 v-if和 v-show的区别
v-if：是真实的条件渲染，切换时销毁和重建，第一次若是判断条件为假，是什么都不作的，官方称为懒惰性。
v-show：元素始终被编译并保留，只是简单地基于 CSS 切换
总结一下，  v-if有更高的切换消耗而  v-show有更高的初始渲染消耗。所以，若是须要频繁切换使用  v-show较好，若是在运行时条件不大可能改变则使用  v-if较好。

简单提一下2.1.0 新增了一个 v-else-if ,也能够跟 v-else 搭配，用做 v-if 的 else-if 块。能够链式的屡次使用。这个就很好理解了，贴一段官方代码：

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

/*是否是很像？
if(){
}else if(){
}else {
}*/

五、v-for(基于源数据屡次渲染元素或模板块 特定语法：alias in expression)

通俗点说就是，遍历一个数组，数组里面放的是一个个的对象。
基本用法

<!-- html -->
<ul id="example-1">
  <li v-for="word in words">
      {{ word.text }}
  </li>
</ul>

//javascript
var example1 = new Vue({
        el: '#example-1',
        data: {
            words: [
                {text: 'a' },
                {text: 'b' },
                {text: 'c' }
            ]
        }
    })

v-for,能够遍历数组，对象，甚至是整数（能够当作循环的次数来用），其中遍历的参数能够是value，index，若是是对象还有key。

<!-- 数组 -->
<div v-for="(item, index) in items"></div>
<!-- 对象-->
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
<!-- 整数-->
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
结果为：1 2 3 4 5 6 7 8 9 10

提示：数组的变异方法，push()、pop()、shift()、unshift()、splice()、sort()、reverse()，能够触发视图更新。而且，官网称，若是你想让展示方式达到你的预期，建议尽量使用 v-for来提供 key。
注意：Vue 不能检测如下变更的数组
一、当你利用索引直接设置一个项时，例如上面的example1.words[0] = {text: 'A'}
解决方法：
用一下两种方法，触发状态更新。

// Vue.set
Vue.set(example1.items, 0, {text: 'A'})
// Array.prototype.splice`
example1.items.splice(0,1, {text: 'A'})

二、当你修改数组的长度时，例如： example1.words.length = newLength
解决方法：
？？？官方称使用splice，我试了一下，若是输入的长度小于原有的长度，能够实现截取数组的效果来触发视图更新，可是若是输入的长度大于原有的长度，就不会让原数组更改而触发更新了，若是有新的进展，我会过来修改。

example1.items.splice(newLength)

6.v-on(绑定事件监听器)

简单说，就是监听 DOM 事件来触发一些 JavaScript 代码。

• 事件类型由参数指定，例如：click、submit等等。
• 表达式能够是一个方法的名字或一个内联语句，这个内联跟样式的内联同样，就是直接在DOM元素上写逻辑，以下：

<button type="button" v-on:click = "num += 1">点击增长1</button>

• v-on还有缩写@

<button type="button" @click = "num += 1">点击增长1</button> //把上面的一行代码缩写的是这个样子的

• 在官网上能够看到这么一段话，在监听原生 DOM 事件时，方法以事件为惟一的参数。以下：

<button v-on:click="doThis"></button>
// 在 `methods` 对象中定义方法
  methods: {
    doThis: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
//咱们能够看到在方法中可使用原生的DOM事件event对象。

接下来还有一句，若是使用内联语句，语句能够访问一个 $event 属性。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
//用$event传入后，咱们就能够在内联语句处理器中使用event进行操做了。
methods: {
  warn: function (message, event) {
    // 如今咱们能够访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}
//可是我在内联语句中不传入$event，在调用的方法中也不写入形参event，结果是也能拿到event对象,固然这是在谷歌和高版本的IE下，火狐浏览器会报错
<button v-on:click="warn('Form cannot be submitted yet.')">Submit</button>
methods: {
  warn: function (message) { // 不写入event，谷歌和高版本IE依然能拿到event对象，火狐会报错。
    // 如今咱们能够访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

• 事件修饰符

官网说：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，那我想阻止冒泡或者阻止默认事件怎么办？ Vue.js 为 v-on 提供了 事件修饰符。经过由点(.)表示的指令后缀来调用修饰符。
能够看官网的详解，不作赘述。事件修饰符

• 按键修饰符

Vue 容许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

所有的按键别名：

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

今后不再用记数字了。而且能够经过全局 config.keyCodes对象自定义按键修饰符别名：

/ /可使用 v-on:keyup.f2
Vue.config.keyCodes.f2= 113 
//要注意是全局对象Vue调用的。

新增的能够配合其余操做一块儿用的键名：

• ctrl
• alt
• shift
• meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
//？？？试了一下，并非只有alt+c能触发，只要是最后一个键按得是c，就能触发,会继续关注。

---

7.v-bind(动态地绑定一个或多个特性)

有缩写，缩写是一个冒号　 :

• 在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
• 当 v-bind:style 使用须要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

？？？试了一下并无按照预期的自动添加前缀，会持续关注。
注意： .once 和 .sync 修饰符在2.0已经移除。

---

8.v-model(在表单控件或者组件上建立双向绑定)

它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

• v-model 并不关心表单控件初始化所生成的值。由于它会选择 Vue 实例数据来做为具体的值。
• 修饰符：

.lazy - 取代 input监听 change事件，例如文本输入框就不会在输入时就改变视图，须要失去焦点时才会改变视图。
.number - 输入字符串转为数字，若是原值的转换结果为 NaN 则返回原值。
.trim - 输入首尾空格过滤

---

9.v-pre(跳过，不编译)

跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。注意这个指令 不须要表达式

<span v-pre>{{ this will not be compiled }}</span>

//会连同花括号一直展现出来：{{ this will not be compiled }}

---

10.v-cloak（不须要表达式）

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一块儿用时，这个指令能够隐藏未编译的 Mustache 标签直到实例准备完毕。之后若是真的用到会再来详谈。

---

10.v-once（不须要表达式）

只渲染元素和组件一次。随后的从新渲染,元素/组件及其全部的子节点将被视为静态内容并跳过。这能够用于优化更新性能。
v-once这个指令留白的Vue 2 | Part 3 经常使用指令合集说的仍是挺好的。

---

以上是关于Vue.js的概述和指令笔记，后续会有进阶和以为文档中能够拿来出来唠叨唠叨的东西再写几篇出来。
最后，欢迎各位看官留言交流和指正。