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

时间 2021-02-18

标签 javascript html vue java git github 浏览器 app 框架异步栏目 JavaScript 繁體版

原文原文链接

碰见Vue

Vue.js是什么

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

Vue.js 的目标

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

Vue.js的特性

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

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

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

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

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

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

第一个Vue.js程序

安装

咱们能够在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。Vue 会被注册为一个全局变量。框架

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

下载Vue.js生产版本

下载Vue.js开发版本

代码示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>it研习社-第一个Hello Vue程序</title>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                    message:'Hello Vue!'
                }
            });
        </script>
    </body>
</html>

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

页面输出：

第一个Hello Vue代码详解

1.将vue.js文件引入到当前页面

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

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

2.经过全局构造函数：Vue ，实例化一个Vue应用程序接管的元素（包括全部的子元素）

<script type="text/javascript">
var app=new Vue({
  el:'#app', //el:element 的简写 ，用来指定Vue应用程序接管的元素（包括全部的子元素）
  data:{ //data:data就是Vue实例应用程序中的数据成员
      message:'Hello Vue!'
  }
});
</script>

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