初步认识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>