编程宝库 - 技术改变世界

编程宝库

Vue

Vue 程序结构

Vue 框架的代码全部封装在 Vue.js 文件中，尝试学习 Vue.js 最简单的方法是使用 Hello World 例子。你可以直接编辑代码，并调试运行程序。或者，你也可以自己创建一个 .html 文件，把相关代码复制到里面，然后通过浏览器打开网页。

1. Vue 版本选择

Vue.js 文件分为两个版本：开发环境版本和生产环境版本。

开发环境版本
包含了有帮助的命令行警告。下载或者引用地址为：https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js。
生产环境版本
优化了文件的大小和下载速度。下载或者引用地址为：https://cdn.jsdelivr.net/npm/vue@2。

通常，我们在开发程序，调试代码的时候使用开发环境版本，而在生产环境，提供公共服务的时候使用生产环境版本。生产环境版本的 Vue.js 很小，大小为90k，压缩后只有 30k 左右。

2. Vue 使用方式

使用 Vue 有两种方法：下载到本地使用或者直接引用 CDN 链接。

我们可以根据实际情况，通过上面两个地址，下载需要的开发环境版本或者生产环境版本，然后象引用其它 js 文件一样，在 html 文件中使用。

最简单的使用方式，还是通过 CDN 方式引用 Vue，如下：

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

或者：

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

3. 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

html 代码：

<div id="app">
{{ message }}
</div>

js 代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

下面是页面整体代码，在浏览器中访问该页面，将输出 “Hello,World!”。

<html>
<head>
  <title>编程宝库 Vue教程</title>
</head>
<body>
  <div id="app"> 
    <p>{{ message }}</p> 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:'#app',	
      data:{
        message:'Hello,World!'
      }
    })
  </script>
</body>
</html>

我要试一试

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

4. Vue 视频教程

视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=3&share_source=copy_web

下一节：Vue 实例对象

Vue 教程

每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例：var vm = new Vue({ // 选项 })。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methonds)、生命周期钩子等选项。

Vue 教程

Vue 实例对象