Vue官网：https://cn.vuejs.org

一、区分框架类库等

1. 类库

类库提供的是真实项目中常用到的方法，它是一个工具包，基于这个工具包可以快速开发任何的项目

  1. jQuery
  2. Zepto
  3. underscore…

2. 插件

插件是把项目中某一个具体的功能进行封装

  1. tab 选项卡插件
  2. banner 轮播图插件
  3. dialog 模态框插件
  4. drag 拖拽插件
  5. iscroll 局部滚动（内置插件）
  6. jquery 中有很多的插件

3. ui 组件

ui 组件库一般是多个插件的集合体，不仅提供了 js 对应的功能，而且把结构样式等也都实现了，我们只需做一名 cv 工程师，就可以快速构建一个产品

  1. bootstrap
  2. swiper
  3. 妹子 ui

4. 框架

一般来说，框架是类库和组件的综合体，里面提供了大量供我们操作的方法，也有配套的 ui 组件库供我们来快速开发，框架是具备独立编程思想的，例如：vue 是 MVVM 思想，让我们告别传统的 DOM 操作，按照试图和数据的相互渲染来完成项目开发，但是不管怎么变，都一定会比我们之前基于原生操作更简单，性能更好… 框架的特点：易用、灵活、高效。
市面上常用的框架：vue（MVVM）/ react（MVC）

  1. vue
  2. react
  3. uni-app（app）
  4. react native（app）
  5. flutter（app）
  6. angular（ng）
  7. backbone

5. 声明式和命令式

命令式编程：命令机器如何去做事情（how），这样不管你想要的是什么（what），它都会按照你的命令实现，例如：for 循环
声明式编程：告诉机器你想要的是什么（what），让机器想出如何去做（how），例如数组内置方法 forEach 等
1 - Vue 基础 - 图2

二、渐进式框架

类库或者框架都是重量级的，里面包含很多方法，但是实际项目开发中，我们用不到这么多东西，所以在开发他们的时候，会把功能按照模块进行单独开发，使用者可根据自身情况选择一个模块一个模块的导入使用

vue 全家桶:

vue：基础模块（基础语法、核心实现、组件开发、相关指令都在这） vue-router：构建 SPA 单页面应用的路由 vuex：公共状态管理 vue-cli：vue 脚手架 components：vue element、iview、vux…

MVC && MVVM

MVC：M model 层 是数据层
V view 视图层
C controller 控制器，数据是靠控制器渲染到视图中

MVVM：M model 层 是数据层
V view 层 视图层
VM view-model 视图模型
MVVM 中是 VM 吧视图和数据层联系起来，把数据映射成视图，当数据变更时会自动更新视图
双向数据绑定：把数据映射成视图，数据发生变化，更新视图；同时，如果视图发生变更，更新数据

三、Vue 基础

Vue 是响应式的框架，所谓响应式不是 CSS 响应式，而是数据变化，视图自动变化
Vue 是一个 MVVM 框架，是数据映射视图，是数据驱动视图，有别于我们过往的 DOM 操作开发思想，我们只关心数据，视图（页面中的 html）的更新交给 Vue.js

1. 简略版双向数据绑定原理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app"></div>
  9. <input type="text" id="phone">
  10. <script>
  11.   let app = document.getElementById('app');
  12.   let phone = document.getElementById('phone');
  13.   // 双向数据绑定的原理：在 vue 创建实例的时候，会遍历 data 中的属性，通过一个
  14.   // Object.defineProperty() 方法把 data 中的属性都改成 getter 和 setter；当获取这个值时，
  15.   // 会触发 get 方法，当修改属性值的时候会触发 set 方法；vue 在此之前会收集所有依赖 data 属性
  16.   // 的元素，当依赖的这个值发生改变时，会触发 set 方法，然后 vue 会更新所有依赖这个数据的元素；
  17.   let obj = {
  18.     _phone: '15910608684'
  19.   };
  20.   app.innerHTML = obj._phone;
  21.   phone.value = obj._phone;
  22.   // Object.defineProperty() 定义对象属性的特性的
  23.   Object.defineProperty(obj, 'phone', {
  24.     get() {
  25.       // 获取 obj.name 会执行 get 方法
  26.       return this._phone;
  27.     },
  28.     set(val) {
  29.       // 修改 obj.name 时会执行 set 方法
  30.       this._phone = val;
  31.       app.innerHTML = val;
  32.     }
  33.   });
  34.   phone.oninput = function () {
  35.     obj.phone = this.value;
  36.   }
  37.   // console.log(obj.name);  取值时会执行 get 方法
  38.   // obj.name = 100;  修改对象的属性值的时候会触发 set 方法
  39. </script>
  40. </body>
  41. </html>

2. Vue 语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <!--vue 应用需要一个根 DOM 节点，所有的用 vue 写的东西，要放到这个元素里面-->
  10.   <!--vue 的模板语法，是小胡子（moustache）语法-->
  11.   <!--小胡子语法中可以写表达式，直接可以得出结果的表达式；不能写语句-->
  12.   <!--{{if (1) {alert('hahahah')}} 写语句会报错-->
  13.   <div>{{msg}}</div>  <br>
  14.   {{1 + 2}} <br> 
  15.   {{true ? 'A' : 'B'}} <br>
  16.   {{ [1, 2, 3].toString() }} <br>
  17.   {{msg}} <!--声明在 data 对象中的数据可以直接使用--> <br>
  18.   {{user.name}} <br> <!--如果是对象，直接对象.属性名 就能取得对应的值-->
  19.   {{user.age}} <br>
  20.   {{user.title}} <br> <!--用这种方式绑定数据，都是响应式的，即 data 里面的数据发生改变时，页面中的绑定的值会自动发生变化--> <br>
  21.   {{today}}
  22. </div>
  24. <!--首先引入 vue.js-->
  25. <script src="vue.js"></script>
  26. <script>
  27.   /*创建 vue 实例传入了一个配置对象，这个对象的属性名 el、data、methods... 不可以修改*/
  28.   let vm = new Vue({
  29.     el: '#app', /*el 属性指定 vue 应用挂载的 DOM 节点*/
  30.     data: { /*data 属性对应的一个对象，这个对象中的数据都可以映射到视图中*/
  31.       msg: 'hello world',
  32.       user: {
  33.         name: 'mabin',
  34.         age: 18,
  35.         title: '宇宙集团军总司令'
  36.       }
  37.     }
  38.   });
  39.   // vm 是 vue 的实例，在创建 Vue 的实例的时候，会把 data 里面的数据代理到 vue 实例身上；
  40.   // 1. 引入 vue
  41.   // 2. 准备根 DOM 节点
  42.   // 3. 创建 Vue 实例
  43.   // 4. 通过 vue 的模板语法，把数据绑定到页面中；
  44. </script>
  45. </body>
  46. </html>

3. 使用双向数据绑定

双向数据绑定：
第一个方向：通过 vue 的模板语法和 v-model 的指令把 data 数据绑定到页面的 html 中；
第二个方向：在视图（页面）中修改 data 中的属性的值，页面中所有依赖这个属性的地方都会自动更新；
通过 v-model 把 phone 绑定到 input 上，v-model 是双向数据绑定的指令；当我们在页面中的 input 输入内容时，phone 属性的值会跟着改变，然后 vue 发现 phone 变了，vue 会把页面中所有用到 phone 的地方都更新成最新值；

  1. <div id="app">
  2.   <div>{{phone}}</div>
  3.   <div>
  4.     <input type="text" v-model="phone">
  5.   </div>
  6.   <div>
  7.     {{phone}}
  8.   </div>
  9. </div>
  11. <script src="vue.js"></script>
  12. <script>
  13.   let vm = new Vue({
  14.     el: '#app',
  15.     data: {
  16.       phone: '16601046931'
  17.     }
  18.   });

4. 向 data 中新增属性

  1. <div id="app">
  2.   <div v-for="(val, key) in user">{{val}}</div>
  3. </div>
  4. <script src="vue.js"></script>
  5. <script>
  6.   let data = {
  7.     el: '#app',
  8.     data: {
  9.       user: {
  10.         name: 'mabin',
  11.         school: 'zfpx',
  12.         age: 18
  13.       }
  14.     }
  15.   };
  16.   let vm = new Vue(data);
  17.   // 创建实例以后增加或者修改属性：
  18.   // 使用 vm.$set() 方法
  19.   // vm.$set(vm.user, key, val);
  20.   // key 是要修改或者新增的属性名
  21.   // val 属性的新值
  23.   // 用 $set 方法修改完数据，页面会自动更新；

data.data.user.title = ‘Commander’; // 在 vue 创建实例完成后，再向配置对象的 data 属性中添加属性，页面没有效果

5. Vue 的常用指令

指令：以 v- 开头的特殊的行内属性，vue 赋予了这些属性特殊的能力；

  1. v-model 把表单元素的 value 和 data 中的属性绑定到一起，表单的值发生变化，data 中的属性值也会跟着变化；
  2. v-text 把 data 中的属性值绑定到 DOM 元素中，会覆盖掉原有的内容；并且不能识别字符串中的 html 标签；
  3. v-html 把 data 中的属性绑定到 DOM 元素中，并且能够识别 html 标签
  4. v-if 如果 v-if 绑定的值为 true，就显示该元素，如果为 false 展示 v-else 的元素；v-if 可以单独使用，v-else 不行
  5. v-show 如果值为 true，对应的元素就会展示，如果为 false，则隐藏；v-show 是控制的元素的 display 属性，而 v-if 是删除或者增加 DOM 节点实现 DOM 显示隐藏；
  6. v-bind 绑定动态属性，动态绑定后，就可以使用 data 中的该属性的值；v-bind 可以简写成 :

6. v-for

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <ul>
  10.     <!--生成多个 li，就把 v-for 写在 li 身上；要生成多个谁，就把 v-for 写谁身上-->
  11.     <!--v-for 数组-->
  12.     <li v-for="(item, index) in ary" :key="index" >
  13.       <!--item 是数组项 index 是当前项的索引-->
  14.       <!--在整个 li 标签和 li 子元素中都可以访问 item 和 index 的值-->
  15.       <span>{{index}}</span>
  16.       <span>{{item.name}}</span>
  17.       <span>{{item.age}}</span>
  18.     </li>
  19.   </ul>
  21.   <div>
  22.     <!--v-for 对象 对象有多少键值对，就会生成多少个元素-->
  23.     <p v-for="(val, key) in obj" :key="key">
  24.       <!--val 是属性值，key 是属性名 obj 是 data 中的对象-->
  25.       <span>{{key}}</span>
  26.       <span>:</span>
  27.       <span>{{val}}</span>
  28.     </p>
  29.   </div>
  31.   <div>
  32.     <!--v-for 一个数字 a 是从1开始的一个数字，b 相当于索引从0开始 -->
  33.     <input type="text"
  34.            v-for="(a, b) in num"
  35.            :key="b"
  36.            :data="b"
  37.            :value="a" >
  38.   </div>
  40.   <ul>
  41.     <!--v-for 一个字符串，a 是字符串中的每个字符，b 是字符对应的索引-->
  42.     <li v-for="(a, b) in str" :key="b">{{b}}：{{a}}</li>
  43.   </ul>
  45. </div>
  47. <script src="vue.js"></script>
  48. <script>
  49.   let vm = new Vue({
  50.     el: '#app',
  51.     data: {
  52.       ary: [
  53.         {
  54.           name: '马宾',
  55.           age: 18
  56.         },
  57.         {
  58.           name: '小飞',
  59.           age: 17
  60.         }
  61.       ],
  62.       obj: {
  63.         name: 'zfpx',
  64.         age: 10,
  65.         major: 'FE'
  66.       },
  67.       num: 5,
  68.       str: 'zfpx'
  69.     }
  70.   });
  71.   // v-for 是一个指令，根据给定值生成多个相同元素。
  73. </script>
  74. </body>
  75. </html>

7. v-for练习

  1. <div id="app">
  2.   <!--v-for 用来做列表渲染的；要想生成多个谁，就把 v-for 写在谁身上-->
  3.   <ul>
  4.     <li v-for="(item, index) in fruits" :key="index">
  5.       {{item.name}}
  6.       <ul>
  7.         <li v-for="(color, cIndex) in item.color"
  8.             :key="cIndex">{{color}}颜色的{{item.name}}</li>
  9.       </ul>
  10.     </li>
  11.   </ul>
  12. </div>
  14. <script src="vue.js"></script>
  15. <script>
  16.   let vm = new Vue({
  17.     el: '#app',
  18.     data: {
  19.       fruits: [
  20.         {
  21.           name: '苹果',
  22.           color: ['red', 'green', 'yellow']
  23.         },
  24.         {
  25.           name: '香蕉',
  26.           color: ['green', 'yellow']
  27.         },
  28.         {
  29.           name: '芒果',
  30.           color: ['green', 'yellow']
  31.         }
  32.       ]
  33.     }
  34.   });

v-for练习.png

在 vue 中视图（HTML）是数据的映射，需要一个什么样的 HTML 结构，就需要有一个什么样子的数据结构；

2.jpg3.jpg

621D1B479B71DFE21FF342D25343E50F.JPG