vue的基础总结

ling_kedu

已于 2023-03-14 18:05:27 修改

阅读量192

点赞数

分类专栏：分析总结文章标签： vue

于 2019-10-17 22:14:55 首次发布

本文链接：https://blog.csdn.net/ling_kedu/article/details/102616218

版权

分析总结专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.初步认识 Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2. Vue.js是尤雨溪的个人项目
Vue.js也是一个MVVM框架
Vue.js它是一个单项数据流的框架
Vue.js是一个Js渐进式框架
渐进式：越学越难

3.我们了解一下MVVM框架，首先是MV*模式介绍

3.1 MVC
3.1.1MVC模式的意思是，软件可以分成三个部分。
在这里插入图片描述
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存

各部分之间的通信方式如下
在这里插入图片描述

1.View 传送指令到 Controller
2.Controller 完成业务逻辑后，要求 Model 改变状态
3.Model 将新的数据发送到 View，用户得到反馈

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

3.2 MVP

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

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

3.3 MVVM
在这里插入图片描述
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

4 vue源代码【思维】

匿名函数

   (function (形参1，形参2) {
     /* 你的代码 */
   })(实参1，实参2)

好处
- 1. 防止全局作用域
- 1. 防止命名冲突
- 1. 防止一些脚本的攻击
- 1. 封装js库基本上都是用它来完成

<!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> Hello Vue </title>
</head>
<body>
  <div id="app">
    {{ this.msg }}
    <p> {{ msg }} </p>
  </div>

  <!-- <div id="root"></div> -->
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 
    * 当我们通过script引入vue.js后，就会全局注册一个Vue变量，它是一个构造函数
    */
  //  console.log("兵哥: Vue", Vue)
  // new Vue( options ) // options 选项
  var vm = new Vue({
    el: '#app',//挂载：将一个已有的DOM元素的选择器挂载在构造函数的选项上,也确定了vue实例作用范围
    data: {
      msg: 'Hello Vue'
    }
  })
  console.log("兵哥: vm", vm)


 
</script>
</html>

(function ( global,factory ) {
  /* 
    ! global是浏览器的全局对象  window
  */

  global.MiniVue = factory()
  
})( this,function () {
  'use strict';//启用严格模式

  function MiniVue (options) {
    if (!(this instanceof MiniVue)) {
      warn('MiniVue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

  MiniVue.prototype._init = function ( options ) {
    console.log( options )
    document.querySelector( options.el ).innerHTML = options.data.msg
  }

  return MiniVue
})

<!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>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
<script src="./3-mini-vue.js"></script>
<script>
   //参数 new MinIVue(options) 如下
  new MiniVue({
    el: '#app',
    data: {
      msg: 'Hello MiniVue'
    }
  })
</script>
</html>