遇见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 并用 <script> 标签引入。Vue 会被注册为一个全局变量。

重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。

代码示例

            
                            
    
                 {
   {message}}        
    
                    

预览：

页面输出：

第一个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中的数据