一. 邂逅Vuejs
1.1. 认识Vuejs
-
为什么学习Vuejs
- 我相信每个人学习Vue的目的是各不相同的。 可能你的公司正要将原有的项目使用Vue进行重构。 也可能是你的公司新项目决定使用Vue的技术栈。 当然，如果你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。 当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。
-
Vue的渐进式
- Vue是一个渐进式的框架，什么是渐进式的呢？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
-
Vue的特点
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
1.2. 安装Vue
- CDN引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 下载引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
- npm安装
- 通过webpack和CLI的使用
1.3. Vue的初体验
- Hello Vuejs
- mustache -> 体验vue响应式
<div id="app">
<h2>{{message}}</h2>
<h1>{{name}}</h1>
</div>
<div>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: '你好啊,Vue!',
name: 'coderwhy'
}
})
1.4. Vue中的MVVM
- View层：视图层
- 在我们前端开发中，通常就是DOM层。 主要的作用是给用户展示各种信息。
- Model层：数据层
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- VueModel层：视图模型层
- 视图模型层是View和Model沟通的桥梁。 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
1.5. 创建Vue时, options可以放那些东西
-
el:
- 类型：string | HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM。
-
data:
- 类型：Object | Function （组件当中data必须是一个函数）
- 作用：Vue实例对应的数据对象。
-
methods:
- 类型：{ [key: string]: Function}
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
-
生命周期函数
- 如图所示
- 如图所示
