Vue.js基础认识(初学)

初步认识Vue

• 发展历史

  • Vue1.0 MVVM 2014.07
  • Vue2.0 MVVM 2016.09

   

• 架构思想（MVVM）

  • M Model 数据层
  • V View 视图层
  • C Controller 控制器（业务逻辑） MVC
  • P Presenter 提出者（Controller改名而来） MVP
  • VM View Model 视图模型（业务逻辑） MVVM

前端JS框架主要功能

1. 渲染数据
2. 操作DOM
3. 操作cookie等存储机制API

Vue.js

• 官网地址：https://cn.vuejs.org/index.html
• Vue.js 框架
  • 作者：尤雨溪
  • 是尤雨溪的个人项目
  • 是一个MVVM框架
  • 是一个单项数据流框架
  • 是一个JS渐进式框架

MV*模式图

面试

1. vue数据驱动原理是什么？
2. vue双向数据绑定原理是什么？
3. vue深入响应式原理是什么？

• Vue是通过数据劫持和事件的订阅发布来实现的，数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 ES5特性：Object.defineProperty 】，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新；一旦监听到数据发生改变，就会重新触发视图的更新

Object.defineProperty( 对象，对象的属性，对对象属性的配置 )

Vue基础

• 通过script标签引入vue.js

• 会在全局注册一个Vue变量，他是一个构造函数

• new Vue()得到的结果是以标签化的形式呈现，称为：根实例组件

{{ this.msg }}

{{ msg }}

数据驱动视图

• 意义：当数据发生改变时，视图也会随之改变

模板语法

• mustache

1. 内容里 加{{}}
2. DOM属性上用 不加{{}}

{{ info }}