标签：Vue DOM 视图 js Model 数据 基本概念

一、安装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的使用，我们使用该方式。

二、Vue中的MVVM

View层：

• 视图层
• 在我们前端开发中，通常就是DOM层。
• 主要的作用是给用户展示各种信息。

Model层：

• 数据层
• 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
• 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

• 视图模型层
• 视图模型层是View和Model沟通的桥梁。
• 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
• 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

PS：Vue帮助我们完成VueModel层的任务，也就是将dom元素展示的数据和obj的数据绑定，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了！

三、创建Vue实例传入的options

el:

类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。

data:

类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。

methods:

类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

四、Vue的生命周期

标签：Vue,DOM,视图,js,Model,数据,基本概念
来源： https://blog.csdn.net/qq_42230770/article/details/121242014

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。