资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/遇见Vue.js——第一个Vue.js程序

遇见Vue.js——第一个Vue.js程序

wmui / 901人阅读

摘要：遇见是什么读音类似于是一套构建用户界面的渐进式框架。是一个用于创建交互界面的库。第一个程序安装我们可以在的官网上直接下载并用标签引入。会被注册为一个全局变量。重要提示在开发时请用开发版本，遇到常见错误它会给出友好的警告。

遇见Vue Vue.js是什么

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标

是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。

Vue.js的特性

简洁：
HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。

数据驱动：
自动追踪依赖的模板表达式和计算属性。

组件化：
用解耦、可复用的组件来构造界面。

轻量：
~24kb min+gzip，无依赖。

快速：
精确有效的异步批量 DOM 更新。

模块友好：
通过 NPM 或 Bower 安装，无缝融入你的工作流。

第一个Vue.js程序 安装

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 

预览：https://91jack.github.io/Vue-...

页面输出：

第一个Hello Vue代码详解 
1.将vue.js文件引入到当前页面


只要将vue.js文件引入页面，在当前环境就会多出一个全局变量：Vue

2.通过全局构造函数：Vue ，实例化一个Vue应用程序接管的元素（包括所有的子元素）
3.代码执行流程解析

1.浏览器从上到下依次进行解析

浏览器对于id=app 的div 内部的 {{message}}不认识，直接作为普通文本渲染到网页上

2.浏览器继续往后解析执行

发现有一个js外链脚本，发起请求进行下载
当当前页面环境拿到js脚本之后，vue.js就会执行，执行结束，就向全局暴露出了一个对象：Vue

3.当解析执行到咱们自己的Script的时候，开始解析执行咱们自己的代码

通过 el 属性 指定 Vue程序 的接管范围
通过 data 向Vue 实例的应用程序中初始化了一个 message 成员
Vue 程序通过 el 属性指定id为 #app 的div
开始解析执行 Vue 能识别的语法
{{message}} 在Vue 中被称为双花括号插值表达式
在双括号插值表达式中可以使用 当前元素 所属Vue程序 接管范围的data中的数据

idc机房托管 超融合服务器 Vue.js vue.js 属性 vue.js自学 cdn vue.js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83400.html

相关文章

  • 小程序的初次遇见,使用mpvue搭建模板

    摘要：最后写一个公用的样式就可以使用了。现在我们可以愉快的使用其开发了，如果对开发比较熟悉的话，完全迁移过来是没有问题的。 由于公司业务需求的需要，在这一周需要开发小程序，加急看了下小程序的文档，发现用其原生来编写程序不是很顺手，公司前端用的技术栈是vue， 询问了谷哥和度娘发现大部分推荐了 wepy和 mpvue，对比了两个框架，还是选用了 mpvue, 因为 mpvue 继承自 vue....

    MangoGoing 评论0 收藏0

  • 最近遇到的前端面试题(2017.03.08更新版)

    摘要：通过管理组件通信通过驱动视图比较差异进行更新操作作者第七页链接来源知乎著作权归作者所有，转载请联系作者获得授权。达到无刷新的效果。对象的状态不受外界影响。对象代表一个异步操作，有三种状态进行中已完成，又称和已失败。 以下问题解释非本人原创，是根据面试经验整理后觉得更容易理解的解释版本，欢迎补充。 一. 输入url后的加载过程 从输入 URL 到页面加载完成的过程中都发生了什么 计算机...

    linkFly 评论0 收藏0

  • 最近遇到的前端面试题(2017.03.08更新版)

    摘要：通过管理组件通信通过驱动视图比较差异进行更新操作作者第七页链接来源知乎著作权归作者所有，转载请联系作者获得授权。达到无刷新的效果。对象的状态不受外界影响。对象代表一个异步操作，有三种状态进行中已完成，又称和已失败。 以下问题解释非本人原创，是根据面试经验整理后觉得更容易理解的解释版本，欢迎补充。 一. 输入url后的加载过程 从输入 URL 到页面加载完成的过程中都发生了什么 计算机...

    Nosee 评论0 收藏0

  • 最近遇到的前端面试题(2017.03.08更新版)

    摘要：通过管理组件通信通过驱动视图比较差异进行更新操作作者第七页链接来源知乎著作权归作者所有，转载请联系作者获得授权。达到无刷新的效果。对象的状态不受外界影响。对象代表一个异步操作，有三种状态进行中已完成，又称和已失败。 以下问题解释非本人原创，是根据面试经验整理后觉得更容易理解的解释版本，欢迎补充。 一. 输入url后的加载过程 从输入 URL 到页面加载完成的过程中都发生了什么 计算机...

    刘东 评论0 收藏0

  • 看一下从 new Vue()开始到页面看到真实dom都经历了什么？

    摘要：从开始看运行流程本篇文章不会具体分析很多每个方法内部具体逻辑，只为了研究一下浏览器加载文件后以及我后，都调用了哪些方法，这些方法都是做什么的等等。 从 new Vue()开始看vue运行流程 本篇文章不会具体分析很多每个方法内部具体逻辑，只为了研究一下浏览器加载vuejs文件后以及我new Vue后，都调用了哪些方法，这些方法都是做什么的等等。以便对vue的执行流程有个大致了解，方便遇...

    hiyayiji 评论0 收藏0

发表评论

登陆后可评论

0条评论

wmui

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<