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