Vue基础

发表于 | 分类于
字数统计: 495 word | 阅读时长 ≈ 1 min
认识Vue

  • 官网：

    https://cn.vuejs.org/v2/guide/

  • Vue (读音 /vjuː/，类似于 view)，不要读错。

  • Vue是一个渐进式的框架，什么是渐进式的呢？
    渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
  • Vue有很多特点和Web开发中常见的高级功能
    • 解耦视图和数据
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM
Vue.js 安装

方式一：直接CDN引入

可以选择引入开发环境版本还是生产环境版本：

1
2
3
4
5
<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

1
2
3
开发环境 https://vuejs.org/js/vue.js 

生产环境 https://vuejs.org/js/vue.min.js

方式三：NPM安装

View 中的MVVM

  • View层：
    • 视图层
    • 在我们前端开发中，通常就是DOM层。
    • 主要的作用是给用户展示各种信息。
  • Model层：
    • 数据层
    • 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
  • VueModel层：
    • 视图模型层
    • 视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
Vue生命周期

放一张官网的图：

简化版：

0%