vue的基础总结

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模式的意思是,软件可以分成三个部分。
vue的基础总结_第1张图片
视图(View):用户界面。
控制器(Controller):业务逻辑
模型(Model):数据保存

各部分之间的通信方式如下
vue的基础总结_第2张图片

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

3.1.2 互动模式
接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。
vue的基础总结_第3张图片
另一种是直接通过controller接受指令。
vue的基础总结_第4张图片

3.2 MVP

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
vue的基础总结_第5张图片

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

3.3 MVVM
vue的基础总结_第6张图片
MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。
唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。Angular 和 Ember 都采用这种模式。

4 vue源代码 【 思维 】

  • 匿名函数
   (function (形参1,形参2) {
     
     /* 你的代码 */
   })(实参1,实参2)
  • 好处
      1. 防止全局作用域
      1. 防止命名冲突
      1. 防止一些脚本的攻击
      1. 封装js库基本上都是用它来完成

<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>

  
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
})

<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>Documenttitle>
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>

你可能感兴趣的:(分析总结,vue)