Vue.js的基本认识
Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式（核心 + 扩展）框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定。
MVVM
MVVM（Model-View-ViewModel）是一种软件架构设计模式。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
MVVM 的组成部分
ViewModel如何编写？需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。
MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的 MVVM 框架有 Vue.js，AngularJS 等。
为什么要使用 Vue.js
- 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
- 移动优先。更适合移动端，比如移动端的 Touch 事件
- 吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高
下载地址
- 开发版本
- 包含完整的警告和调试模式：https://vuejs.org/js/vue.js
- 删除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js
- CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
数据绑定
Vue.js 的核心是实现了 MVVM 模式，它扮演的角色就是 ViewModel 层
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <!-- id标识vue作用的范围，绑定的数据必须写在这个div内部 --> <div id="app"> <!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 --> {{ message }} </div> <script> // 创建一个vue对象 // Vue构造函数的参数是一个配置对象，对象中的key是一些固定的关键字 var vm = new Vue({ el: '#app', //绑定vue作用的范围，用id选择器选中div data: { //在data中注册变量，用于视图中的数据绑定 message: 'Hello Vue!', }, }) </script> </body> </html>
MVVM再理解
MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来
安装Vue.js devtools
离线安装
先解压Vue.jsDevtools
然后在Chrome中加载已解压的扩展程序
在线安装
先离线安装安装谷歌访问助手
然后在Chrome网上应用商店，搜索Vue.js devtools扩展程序，并安装使用VUE插件
MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。
ViewModel层：浏览器控制台输入：vm.message=”xxxx” 看看效果。
发现网页内容立即更新，且不刷新页面（双向绑定）
改变JavaScript对象的状态，会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态，而操作JavaScript对象比DOM简单多了数据绑定指令
使用数据绑定指令做数据渲染
单向 v-bind:
双向 v-model=
注意：v-model只用于用户交互组件中
绑定事件监听 v-on
<body> <div id="app"> <button v-on:click="study">去学习</button> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { company: '尚硅谷' }, methods: { study(){ alert('我要去' + this.company + '学习') } } }) </script> </body>使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中
v-on 指令的简写形式
<!-- v-on: 指令的简写形式 @ --> <button @click="study">去学习</button>计算属性
计算属性的重点突出在
属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性)；可以想象为缓存！为什么使用
<body> <div id="app"> <p>原始值: {{ message }}</p> <!-- 1、插值数据绑定中使用表达式 --> <p>反转消息: {{ message.split('').reverse().join('') }}</p> </div> </body> <script> new Vue({ el: '#app', data: { message: 'hello', }, }) </script> </html>模板表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。
计算属性VS方法
- computed：定义计算属性，不需要带括号；
- methods：定义方法，需要带括号
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;
侦听器watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
条件渲染
v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" v-model="ok" />同意许可协议 <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 --> <p v-if="ok">yes.</p> <p v-else>no.</p> <!-- v:show 条件指令 初始渲染开销大 --> <p v-show="ok">yes.</p> <p v-show="!ok">no.</p> </div> </body> <script> new Vue({ el: '#app', data: { ok: false, }, }) </script> </html>
列表渲染
用
v-for把一个数组对应为一组元素我们可以用
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <!-- item：当前元素，index：当前元素的索引 --> <ul id="example-1"> <li v-for="item in items" :key="item.message">{{ item.message }}</li> </ul> </div> </body> <script> var example1 = new Vue({ el: '#example-1', data: { items: [{ message: 'Foo' }, { message: 'Bar' }], }, }) </script> </html>结果：
- Foo
- Bar
实例生命周期钩子
- Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是
Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。 - 在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS
方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如
created钩子可以用来在一个实例被创建之后执行代码：new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // => "a is: 1"也有一些其它的钩子，在实例生命周期的不同阶段被调用，如
mounted、updated和destroyed。生命周期钩子的this上下文指向调用它的 Vue 实例。<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <h3 id="h3">{{ message }}</h3> </div> </body> <script> new Vue({ el: '#app', data: { message: '床前明月光', }, // 页面在内存中已经初始化完毕： // 可以操作 data 中的数据、调用methods中的方法 // 但是数据尚未被渲染到页面中：用户看不见 created() { console.log('created') //可以操作 data 中的数据 console.log(this.message) //可以调用methods中的方法 this.show() //无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容 console.log(document.getElementById('h3').innerText) }, // 数据已经被渲染到页面中 mounted() { // 第四个被执行的钩子方法 console.log('mounted') //可以取出dom节点取数据，说明用户已经在浏览器中看见内容 console.log(document.getElementById('h3').innerText) }, methods: { show() { console.log('show方法被调用') }, }, }) </script> </html>不要在选项 property 或回调上使用箭头函数，比如
created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之类的错误。生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
