Vue从甜小白到皮大佬系列(一) Vue是个啥?

阅读时间预估:3分钟

啥是Vue?

当你看到这篇文章的时候,想必这位大侠不免多少略知Vue这个世界级别的框架的来头,华裔程序贵族尤雨溪大佬的开源做品(膜拜大佬三分钟...),从面世至今gitHub上的点赞数量已经超过Angular,React等著名框架,🔥的发紫,着实有后来者居上的感受,Vue借鉴了前二者的优秀设计模式和思想以一种渐进式的模式呈现给咱们,意图也很是明显,小白上手首选,学习成本低,开源社区活跃,废话很少说,接下来跟(da)着(lao)个人脚步,带你从小白进阶大佬(chui niu)..

Vue -渐进式JavaScript框架

介绍

大佬叮嘱: 万层高楼平地起,做为vue小白vue官方中文网必定要努力的通读几遍,案例必定要多敲几遍哦.

• vue 中文网
• vue github
• Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架

库和框架有啥区别

咱们所说的前端框架与库的区别？

Library

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

• 表明：jQuery
• jQuery这个库的核心：DOM操做，即：封装DOM操做，简化DOM操做
• jQuery 源码分析系列

Framework

框架，是一套完整的解决方案，使用框架的时候，须要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

• 框架规定了本身的编程方式，是一套完整的解决方案
• 使用框架的时候，由框架控制一切，咱们只须要按照规则写代码

主要区别

• You call Library, Framework calls you

• 核心点：谁起到主导做用（控制反转）

  • 框架中控制整个流程的是框架
  • 使用库，由开发人员决定如何调用库中提供的方法（辅助）

• 好莱坞原则：Don't call us, we'll call you.

• 框架的侵入性很高（从头至尾）

啥是MVVM?

• MVVM，一种更好的UI模式解决方案
• 从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普

MVC

• M: Model 数据模型（专门用来操做数据，数据的CRUD）
• V：View 视图（对于前端来讲，就是页面）
• C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）

后端中经常采用MVC模式.

MVVM组成

• MVVM ===> M / V / VM
• M：model数据模型
• V：view视图
• VM：ViewModel 视图模型

优点对比

• MVC模式，将应用程序划分为三大部分，实现了职责分离

• 在前端中常常要经过 JS代码 来进行一些逻辑操做，最终还要把这些逻辑操做的结果如今页面中。也就是须要频繁的操做DOM

• MVVM经过数据双向绑定让数据自动地双向同步

  • V（修改数据） -> M
  • M（修改数据） -> V
  • 数据是核心

• Vue这种MVVM模式的框架，不推荐开发人员手动操做DOM

Vue中的MVVM

虽然没有彻底遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。所以在文档中常常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

学习Vue要转化JS老观念

• 不要在想着怎么操做DOM，而是想着如何操做数据！！！以数据来驱动开发.

起步 - Hello Vue

• 安装:npm i -S vue

<!-- 指定vue管理内容区域，须要经过vue展现的内容都要放到找个元素中  一般咱们也把它叫作边界 数据只在边界内部解析-->
<div id="app">{{ msg }}</div>
 
<!-- 引入 vue.js -->
<script src="vue.js"></script>
 
<!-- 使用 vue -->
<script>
  var vm = new Vue({
    // el：提供一个在页面上已存在的 DOM 元素做为 Vue 实例的挂载目标
    el: '#app',
    // Vue 实例的数据对象，用于给 View 提供数据
    data: {
      msg: 'Hello Vue'
    }
  })
</script>
复制代码

Vue实例

• 注意 1：先在data中声明数据，再使用数据
• 注意 2：能够经过 vm.$data 访问到data中的全部属性，或者 vm.msg

var vm = new Vue({
  data: {
    msg: '你们好,我是Geek-James'
  }
})
 
vm.$data.msg === vm.msg // true
复制代码

数据绑定

• 最经常使用的方式：Mustache(插值语法)，也就是 {{}} 语法
• 解释：{{}}从数据对象data中获取数据
• 说明：数据对象的属性值发生了改变，插值处的内容都会更新
• 说明：{{}}中只能出现JavaScript表达式 而不能解析js语句
• 注意：Mustache 语法不能做用在 HTML 元素的属性上

<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>
 
<!-- ！！！错误示范！！！ -->
<h1 title="{{ err }}"></h1>
复制代码

双向数据绑定 Vue two way data binding

• 双向数据绑定：将DOM与Vue实例的data数据绑定到一块儿，彼此之间相互影响

  • 数据的改变会引发DOM的改变
  • DOM的改变也会引发数据的变化

• 原理：Object.defineProperty中的get和set方法

  • getter和setter：访问器
  • 做用：指定读取或设置对象属性值的时候，执行的操做

• Vue - 深刻响应式原理

• MDN - Object.defineProperty()

/*  defineProperty语法 介绍 */
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
  set: function (newVal, oldVal) {  },
  // 读取 obj.msg 时get方法会被系统调用
  get: function ( newVal, oldVal ) {}
})
复制代码

Vue双向绑定的极简实现

• 剖析Vue原理&实现双向绑定MVVM

<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>
 
<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {}
 
// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  
  set: function (newVal) {
    // 当obj.msg被赋值时 同时设置给 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})
 
// 监听文本框的改变 当文本框输入内容时 改变obj.msg
txt.addEventListener('keyup', function (event) {
  obj.msg = event.target.value
})
</script>
复制代码

动态添加数据的注意点

• 注意：只有data中的数据才是响应式的，动态添加进来的数据默认为非响应式
• 能够经过如下方式实现动态添加数据的响应式
  • 1 Vue.set(object, key, value) - 适用于添加单个属性
  • 2 Object.assign() - 适用于添加多个属性

var vm = new Vue({
  data: {
    stu: {
      name: 'jack',
      age: 19
    }
  }
})
 
/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')
 
/* Object.assign 将参数中的全部对象属性和值 合并到第一个参数 并返回合并后的对象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
复制代码

异步DOM更新

• 说明：Vue 异步执行 DOM 更新，监视全部数据改变，一次性更新DOM

• 优点：能够去除重复数据，对于避免没必要要的计算和 避免重复 DOM 操做上，很是重要

• 若是须要那到更新后dom中的数据 则须要经过 Vue.nextTick(callback)：在DOM更新后，执行某个操做（属于DOM操做）

  • 实例调用vm.$nextTick(function () {})

methods: {
  fn() {
    this.msg = 'change'
    this.$nextTick(function () {
      console.log('$nextTick中打印：', this.$el.children[0].innerText);
    })
    console.log('直接打印：', this.$el.children[0].innerText);
  }
}
复制代码

Vue是个啥? 看完这篇不知道面前的这位大侠是否真正的领略到,欢迎留言点赞加评论,文章有不对的地方恳请各位大佬提出.

若是个人分享对面前的这位大侠有所启发,恳请以程序员最高礼遇点✨ 星加分享的方式鼓励我.

关注公众号回复:学习 领取前端最新最全学习资料,也能够进群和大佬一块儿学习交流

猛戳我点星星