初识VUE

谁践踏了优雅 2024-03-30 16:24 72阅读 0赞

## 一、什么是VUE ##

Vue (发音为 /vjuː/，类似 **view**) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

*  **声明式渲染**：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

*  **响应性**：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

### **渐进式框架**[**\#**][Link 1] ###

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

*  无需构建步骤，渐进式增强静态的 HTML

*  在任何页面中作为 Web Components 嵌入

*  单页应用 (SPA)

*  全栈 / 服务端渲染 (SSR)

*  Jamstack / 静态站点生成 (SSG)

*  开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

如果你是初学者，可能会觉得这些概念有些复杂。别担心！理解教程和指南的内容只需要具备基础的 HTML 和 JavaScript 知识。即使你不是这些方面的专家，也能够跟得上。

如果你是有经验的开发者，希望了解如何以最合适的方式在项目中引入 Vue，或者是对上述的这些概念感到好奇，我们在[**使用 Vue 的多种方式**][Vue]中讨论了有关它们的更多细节。

无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。如果你已经是一个老手，你可以根据实际场景来选择使用 Vue 的最佳方式，在各种场景下都可以保持同样的开发效率。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

## 二、**快速上手** ##

**2.1 引入vue**

方式一：开发环境版本

<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

方式二：生产环境版本

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

**2.2 响应式声明**

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

<body>
        <div id="app">
            {
        { message }}
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:" Hello Vue! "
                }
            })
        </script>
    </body>
    </html>

Hello Vue!

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

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

## 三、Vue中两个重要属性 ##

**el: 挂载点**

1.  Vue会管理el选项命中的元素及其内部的后代元素

1.  可以使用所有选择器进行挂载，但是建议使用ID选择器

1.  可以挂载到任意双标签上，HTML和BODY标签除外。建议挂载到div标签

**data: 数据对象**

1.  Vue中用到的数据定义在data中

1.  data中可以写复杂类型的数据

1.  渲染复杂类型数据时，遵守js的语法即可

[Link 1]: https://cn.vuejs.org/guide/introduction.html#the-progressive-framework
[Vue]: https://cn.vuejs.org/guide/extras/ways-of-using-vue.html