Vue基础1

最新推荐文章于 2023-05-17 19:46:30 发布

lu970525

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/lu970525/article/details/99886000

版权

Vue

面向对象的思维：把一个整体中每一个部分都单独拿出来
随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（MV*）
- M Model 数据层
- V View 视图层
- C Controller 控制器（业务逻辑） MVC
- P Presenter 提出者（controller改名得来） MVP
- VM ViewModel 视图模型（业务逻辑 VM 是由P改名得来）
Vue 1.0 MVVVM 2014/07
Vue 2.0 MVVM 2016/09
js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为以下几点：
- 渲染数据
- 操作DOM
- 操作cookie等存储机制api
前断开发的难题：如何高效的操作dom、攒然数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？
- 唯一的缺点就是需要使用一定的成本来学习
- 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是现在前端开发者必须的一个技能

2016年：

	    - es6
	    - vue2.0
	    - angular2.0x
	    - 微信小程序 / 微信小游戏

一、MVC

MVC模式的意思是，软件可以分成三个部分

在这里插入图片描述

视图（View）：用户界面
控制器（Controller）：业务逻辑
模型（Model）：数据保存

各部分之间的通信方式如下。
View传送指令到Controller
Controller完成业务逻辑后，要求Model改变状态
Model将新的数据发送到View，用户得到反馈
所有通信都是单向的

二、互动模式

接受用户指令时，MVC可以分成两种方式，一种是通过View接受指令，传递给Controller
在这里插入图片描述

另一种是直接通过controller接受指令
在这里插入图片描述

三、实例：Backbone

实际项目往往采用更灵活的方式
在这里插入图片描述

用户可以向View发送给指令（DOM事件），再由View直接要求Model改变状态。
用户也可以直接向Controller发送指令（改变URL触发hashChange事件），再由Controller发送给View
Controller非常薄，只起到路由的作用，而View非常厚，业务逻辑都部署在View。所以，Backbone索性取消了 Controller，只保留一个Router（路由器）

四、MVP

MVP模式将Controller改名为Presenter，同时改变了通信方向。
在这里插入图片描述

各部分之间的通信，都是双向的。
View与Model不发生联系，都用Presenter传递。
View非常薄，不部署任何业务逻辑，称为“被动视图”（Passive View），即没有任何主动性，而Presenter非常厚，所有逻辑都部署在那里

五、MVVM

MVVM模式将Presenter改名为ViewModel，基本上与MVP模式完全一致
在这里插入图片描述

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。
举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title> MVVM </title>
</head>
<body>
 <div id="app">
   <h3> VM改变 ——>  V也跟着改变 </h3>
   {{ msg }}
   <h3> V改变 -> VM也跟着改变 </h3>
   <input type="text" v-model = "msg">
 </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
 /* 
   1. 通过new Vue中el选项确定的实例范围，这个dom结构我们叫它 'Root组件/根组件/根实例'
   2. Vue中双向数据绑定式通过 v-model 这个指令来实现的
   3. 当我们将vm中的data改变时，会发现视图也跟着改变了，这个模式我们称之为： 数据驱动 
         数据驱动： 数据驱动视图改变
         Vue官方将这种模式称之为： 深入响应式原理 
 
  */
 
 var vm = new Vue({
   el: '#app',// document.querySelector('#app')
   data: {
     msg: 'hello Vue.js'
   }
 }) // 实例化Vue的到vm实例

</script>
</html>

Vue实现数据绑定的原理

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Vue第一个案例 </title>
</head>
<body>
  <div id="app">
    {{ msg }}
    msg
  </div>
  msg
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    当我们第一次通过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实例

  */
  // console.log( 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>
</html>

Vue深入响应式原理图
在这里插入图片描述

	<button></button>
	<div class="box"></div>
	// 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

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

lu970525

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础1

Vue面向对象的思维：把一个整体中每一个部分都单独拿出来随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（MV*）M Model 数据层V View 视图层C Controller 控制器（业务逻辑） MVCP Presenter 提出者（controller改名得来） MVPVM ViewModel 视图模型（业务逻辑 VM 是由P改名...
复制链接

扫一扫