vue-编程基础-简介-01

1、什么是VUE？

vue是一种由第三方开发的，基于mvvm设计的，渐进式的纯前端框架

渐进式的表示：可以逐步在项目中使用vue的部分继承。而不要求必须把整个项目都改为vue

纯前端表示：只要有浏览器就可以运行，和后端无关

框架表示：可以节省大量重复劳动

使用方式：

方式一：下载独立的vue的js文件，下载地址：vue官网下载地址||官网

方式二：使用CDN方式下载

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

• unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

使用方式和皮革城的js的引用一样在HTML页面中使用script标签引入

2、第一个vue程序

需要注意的是vue的重点在于父元素的获取，包括虚拟的DOM都是根据父元素操作获取的，其下的其他操作都是DOM子元素或者兄弟元素；所以父元素极为重要

另外就是关于vue操作的元素，方法，内容多对应的元素必须包括在父元素指向vue才会起作用。

<div id="app">
  <button @click='minus'>-</button>//使用@简写符号
  <span>{{n}}</span>//使用{{}}
  <button @click='add'>+</button>
</div>

<script>

new Vue({//创建vue对象实例，传递对象参数
el: '#app',//绑定父元素，方便建立虚拟DOM树
data: {//使用属性访问器，保护属性
  n: 0
}, 
methods: {//函数处理方法集合
  add() {
    this.n++;
  },
  minus() {
    if (this.n > 0) {
      this.n--;
    } else {
      alert('数值已经到0了')
    }
  }
}

</script>

3、什么是MVVM

MVVM是一个简写，表示的是【model view viewModel】设计模式；

【model】表示的是模型对象

【view】表示的是界面

【ViewModel】视图模型

旧的前端程序划分为三部分，分别是HTML，JavaScript，css；存在的问题是结构复杂，需要配合使用，HTML，css不是一种编程语言，缺少语言的基本功能，变量，逻辑，分支，循环等，任何一个功能的实行都是基于js,html,css相互配合实现的，存在大量的重复劳动，效率低下

【view】视图：

界面包括HTML和CSS，增强版的话还支持程序的基本功能：变量，运算，循环和分支

【model】模型对象：

定义:专门替界面保存所属的变量和函数的特殊对象；今后，只要界面上需要用到哪些变量和函数时，都要保存在模型对象中

【ViewModel】视图模型：

定义:专门自动将模型对象中的变量和函数，自动传递到界面上指定位置的特殊对象；只要希望有人自动将模型对象中的变量和函数自动运送到界面上，都要定义视图模型

4. Vue框架如何实现MVVM设计模式:

(1). 创建new Vue()对象：

a. 隐藏data中的原变量，自动为data中原变量创建访问器属性。从此，在new Vue中使用的任何变量，其实都只能是访问器属性。

b. 引入methods并打散methods为多个函数。

   1). 原methods中的函数，不再隶属于methods，而是直接隶属于new Vue()对象了

   2). 所以，methods中的函数打散后与访问器属性平级，所以，methods中的方法，想访问访问器属性变量，必须加this.

methods: {
  add() {
    this.n++;
  },
  minus() {
    if (this.n > 0) {//访问data中的参数，必须使用this才能访问到
      this.n--;
    } else {
      alert('数值已经到0了')
    }
  }
}

(2). new Vue()中el:"#app"在指引new Vue()对象去创建虚拟DOM树

a. 扫描el属性:"#app"所指的页面区域的真实DOM树，只找出可能发生变化的元素，保存进虚拟DOM树中【虚拟DOM树】

b. 今后，只要new Vue()中修改了变量，其实就是修改了访问器属性。

   1). 访问器属性就会向虚拟DOM树发出通知

   2). 虚拟DOM树扫描内部所有可能发生变化的元素，找出受本次变量修改影响的个别元素。

   3). 虚拟DOM树利用内部已经封装好的DOM操作，只修改页面上受本次影响的元素。不受本次影响的元素，不会改变。

总结: Vue的绑定原理=访问器属性+虚拟DOM树

5. 虚拟DOM树的优点:

(1). 小：细腻DOM树并不是全部的DOM树，只是部分受影响的DOM树结构

(2). 遍历快：因为虚拟DOM树只是部分DOM树，体量小所以遍历操作也快

(3). 更新效率高：只更新受影响的DOM元素，更新效率更高

(4). 避免重复编码：DOM基本操作已经提前封装号，所以直接使用，避免重复