Vue.js

一、Vue基础
Vue基础1
1.0 前端开发流程规范
前端开发流程规范

1.1 前端框架发展历史
html

html [1990]----> html5 [2008.1.12]

css
css 1.0 1996
css 2.0 1998
css 3.0 2001

EcmaScript
1997年诞生
2015 EcmaScript 2015
2016 EcmaScript 2016 dart语言 vs javascript

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

M  Model      数据层
V  View       视图层
C  Controller 控制器 ( 业务逻辑 )        MVC
P  Presenter  提出者（ Controller 改名得来的 ） MVP
VM ViewModel  视图模型（ 业务逻辑  VM 是 由  P 改名得来的） MVVM



Backbone.js  MVP    2010.10

Angular.js( 1.0 )   MVC    2010.10

Angular.ts ( 2.0 )  MVC -> MVVM 2016 目前已经更新到了 Angular9 ( 也属于angular2.0 版本 )

Vue 1.0   MVVVM  2014/07

Vue 2.0   MVVM   2016/09

React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V

github统计量 （ 国际使用量 ）不代表大陆地区       单位是： K

angular.js   angular.ts       vue             React  

  59.6          49.1          146              134	

学习难度： Vue < React < Angular( 2.0 )

前端流行

  移动  web    &&  hybird app( 混合app )

  app
    1. native app ( 安卓  ios  java ME)
    2. webapp ( 应用在浏览器中的app )
    3. Hybird app ( 混合app ) 
       1. webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）


2016年： 	
	   1. es6
	   2. vue2.0
	   3. angular2.0x
       4. 微信小程序 /  微信小游戏

总结：
前端js框架到底在干嘛! 为什么要用？
js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点：
渲染数据
操作DOM
操作cookie等存储机制api
在前端开发中
难题: 如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？？
解决:
而js框架对上述的几个问题都有自己趋于完美的解决方案，
开发成本降低。高性能高效率。
唯一的缺点就是需要使用一定的成本来学习。

1.2 初始Vue.js
官网地址： 英文官网 中文官网
Vue.js框架项目介绍
作者： 尤雨溪
Vue.js是尤雨溪的个人项目
Vue.js也是一个MVVM框架
Vue.js它是一个单项数据流的框架
Vue.js是一个Js渐进式框架
渐进式： 越学越难
学习Vue的必要性
Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂

学习vue是现在前端开发者必须的一个技能

1.3 MV模式介绍
MV模式图示

1.4 Vue实现数据绑定的原理

书写第一个Vue案例
// var vm = new Vue( options ) // 实例化Vue的到vm实例
var vm = new Vue({
el: ‘#app’,// document.querySelector(’#app’)
data: {
msg: ‘hello Vue.js’
}
}) // 实例化Vue的到vm实例

当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量  Vue   
  Vue它是一个构造器函数

  Vue( options )
    this._init( options ) //在初始化执行vue

    参数： options 我们称之为‘ 选项 ’
      类型： Object


    options / el 
      我们称之为自动挂载： 将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了
      body不能作为el的挂载目标

    options / data 数据
      new类型中 data选项是一个对象
      使用形式： 在实例范围内，它相当于全局变量 
                我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’
      使用范围： el确定的那个范围


Vue是一个MVVM框架
  M: data选项
  V：el挂载的东西
  VM： vm实例

Vue深入响应式原理
// Vue 底层原理

// 目的： 使用原生js来实现Vue深入响应式

var box = document.querySelector(’.box’)

var button = document.querySelector(‘button’)

var data = {
name: ‘Jick’
}

// 观察者对象

var observer = {…data}

// es5提供的api方法,这个方法不兼容ie8以及以下
// Object.defineProperty(对象，对象的属性，对象属性的修饰符 )

Object.defineProperty( data,‘name’,{
// get/set 统称为: ‘存储器’
get () {
return observer.name // 初始化赋值一个值给name属性
},
set ( val ) {
console.log( val )
box.innerHTML = val
}
})

button.onclick = function () {
data.name = “Rose”
}

box.innerHTML = data.name

面试题/理解： 如何理解深入响应式原理？
Vue是通过数据劫持和事件的订阅发布来实现的，数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 Object.defineProperty 】，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新
监听： 选项/watch

Vue基础2
2.1 模板语法
mustache 语法中是支持写js的
用法：
内容： 必须加 {{ js语法 }}
属性: 属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
给一个标签加一个自定义属性/已有属性
img中的src就是已有属性

//data-index就是自定义属性 ， web网页中建议我们使用data-形式来定义自定义属性

思考： Vue现在想要在html中使用自己的属性，并且要和他的语法和数据结合？
咋整？
分析： 如何我能够标识出哪一个属性是具有vue标志的那就好了,也就是属性前加 v
Vue给这种带v标识的属性，起了一个名字： 指令【 借鉴angular 】

研究它js的支持性
数据类型
市场上js的数据类型分类有两种？
第一种
初始数据类型： number string null undefine boolean
引用数据类型: Object [ function array … ]
第二种
基础数据类型: number string boolean
特殊数据类型： null undefine
复杂数据类型； Object [ function array …]
输出语法
console
alert
表达式 / 运算符
三元表达式
总结;
null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
挂载在window身上的全局属性，我们都不能用的： 比如; console alert
{{ }} 不写流程控制
for
if
while
do…while
{{}} 支持三元表达式，同样也支持运算符
短路原则也是支持的
2.2 指令
指令的目的是做什么： 操作DOM
​ 解释 : MVVM vm -> v 数据驱动
​ 所以： 今天开始，我们不想二阶段一样操作dom，改成操作数据，数据要想操控DOM,那么我们需要依赖指令，因为指令是直接绑定在dom身上的
v-html 转义输出，也就是可以解析 xml 数据
v-text： 非转义输出，也就是无法解析 xml 类型数据
v-bind
将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值

简写形式

类名绑定
用法
对象形式用法

数组形式用法

样式绑定
用法
对象形式用法

数组形式用法

2.3 条件渲染
v-if
v-else-if
v-else
v-show 条件展示

条件渲染 - 单路分支

A

条件渲染 - 双路分支

A

B

条件渲染 - 多路分支

美食

游戏

睡觉

条件展示

条件展示

思考总结：
思考： v-if vs v-show
1. 效果看起来一样
2. why Vue要出两个相似的指令？
v-if控制的是元素的存在与否
v-show控制的是元素的display:none属性

思考？ 如果出事条件为假时？ v-if v-show 谁的性能损耗较高？
v-show

总结： 项目中如何选择哪一个？
频繁切换用 v-show
如果不是很频繁的切换，那我们用 v-if

2.4 列表渲染
v-for 指令

数组

• {{ item }} -- index{{ index }}

对象

• {{ item }} -- {{ key }} -- {{ index }}

json

• 商品名称： {{ item.shop_name }} 商品价格： {{ item.price }}

循环嵌套

• 商品类型： {{ item.shop_name }}

  • 制造商： {{ item.maker }}

循环number / string

{{ item }}

{{ item }}

总结：
列表渲染参数可以写三个，分别为 item key index
列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识 ,
思考: 这是为什么？
这个key最好是id,因为id唯一？思考： 为什么不能是index
循环嵌套式，参数名称是可以一致的
in / of 都可以使用

2.5 事件处理器
v-on
js中事件添加
DOM 一级事件 on
1. on添加事件只写书写一次

  DOM 二级事件  事件监听
    1. 可以有多个
    2. 事件监听有兼容 【 现代浏览器 / IE低版本 】
      addEventListener 
      attachEvent

  事件包含部分
    事件源: box
    事件类型: click
    事件处理程序: function () {}
    box.onclick = function () {}

  事件执行形式有两种
    1. js执行
    2. html中执行

2.6 表单控件绑定
v-model
双向数据绑定
VM 改变 V随之改变
V改变， VM也随之改变
v-model只用于表单
理由： v-model默认绑定value属性
技巧： 看到表单直接 v-model