初步认识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框架主要功能
- 渲染数据
- 操作DOM
- 操作cookie等存储机制API
Vue.js
- 官网地址:https://cn.vuejs.org/index.html
- Vue.js 框架
- 作者:尤雨溪
- 是尤雨溪的个人项目
- 是一个MVVM框架
- 是一个单项数据流框架
- 是一个JS渐进式框架
MV*模式图
面试
- vue数据驱动原理是什么?
- vue双向数据绑定原理是什么?
- vue深入响应式原理是什么?
- Vue是通过数据劫持和事件的订阅发布来实现的,数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 ES5特性:Object.defineProperty 】,事件的订阅发布指的是Vue通过事件来监听,通知Vue进行视图更新;一旦监听到数据发生改变,就会重新触发视图的更新
Object.defineProperty( 对象,对象的属性,对对象属性的配置 )
Vue基础
- 通过script标签引入vue.js
<script src="../../../lib/vue.js"></script>
- 会在全局注册一个Vue变量,他是一个构造函数
<script> // new Vue( options ) // options 选项 var vm = new Vue({ el: '#app',//挂载:将一个已有的DOM元素的选择器挂载在构造函数的选项上,也确定了vue实例作用范围 data: { msg: 'Hello Vue' } }) </script>
- new Vue()得到的结果是以标签化的形式呈现,称为:根实例组件
<body> <div id="app"> {{ this.msg }} <p> {{ msg }} </p> </div> </body>
数据驱动视图
- 意义:当数据发生改变时,视图也会随之改变
模板语法
- mustache
- 内容里 加{{}}
- DOM属性上用 不加{{}}
<div id="app"> <!-- 内容用法 --> <p> {{ info }} </p> <!-- 标签属性用法 --> <input type="text" v-model = "info"> </div>
<script> new Vue({ el: '#app', data: { info: '...' } }) </script>