Vue.js j介绍

左手的ㄟ右手 2022-05-22 09:13 120阅读 0赞

##     ##

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 1]以及各种[支持类库][Link 2]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们[制作了一个视频][Link 3]，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看[对比其它框架][Link 4]。

## [起步][Link 5] ##

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的。

尝试 Vue.js 最简单的方法是使用 [JSFiddle 上的 Hello World 例子][JSFiddle _ Hello World]。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以[创建一个 `.html` 文件][.html]，然后通过如下方式引入 Vue：

或者：

[安装教程][Link 6]给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 `vue-cli`，尤其是在你还不熟悉基于 Node.js 的构建工具时。

如果你喜欢交互式的东西，你也可以查阅[这个 Scrimba 上的系列教程][Scrimba]，它揉合了录屏和代码试验田，并允许你随时暂停和播放。

## [声明式渲染][Link 7] ##

[在 Scrimba 上尝试这节课][Scrimba 1]

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

Hello Vue!

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

除了文本插值，我们还可以像这样来绑定元素特性：

鼠标悬停几秒钟查看此处动态绑定的提示信息！

这里我们遇到了一点新东西。你看到的 `v-bind` 特性被称为指令。指令带有前缀 `v-`，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 `title` 特性和 Vue 实例的 `message` 属性保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 `app2.message = '新消息'`，就会再一次看到这个绑定了 `title` 特性的 HTML 已经进行了更新。

## [条件与循环][Link 8] ##

[在 Scrimba 上尝试这节课][Scrimba 2]

控制切换一个元素是否显示也相当简单：

现在你看到我了

继续在控制台输入 `app3.seen = false`，你会发现之前显示的消息消失了。

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用[过渡效果][Link 9]。

还有其它很多指令，每个都有特殊的功能。例如，`v-for` 指令可以绑定数组的数据来渲染一个项目列表：

1.  学习 JavaScript
2.  学习 Vue
3.  整个牛项目

在控制台里，输入 `app4.todos.push({ text: '新项目' })`，你会发现列表最后添加了一个新项目。

## [处理用户输入][Link 10] ##

[在 Scrimba 上尝试这节课][Scrimba 3]

为了让用户和你的应用进行交互，我们可以用 `v-on` 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

Hello Vue.js!

逆转消息

注意在 `reverseMessage` 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 `v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

Hello Vue!

## [组件化应用构建][Link 11] ##

[在 Scrimba 上尝试这节课][Scrimba 4]

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

![Component Tree][]

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

现在你可以用它构建另一个组件模板：

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 [prop][]：

现在，我们可以使用 `v-bind` 指令将待办项传到循环输出的每个组件中：

<table style="width:600px;padding:0px;margin:0px;"> 
 <tbody> 
 <tr style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"> 
 <td style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"><pre style="color:rgb(82,82,82);font-family:'Roboto Mono', Monaco, courier, monospace;font-size:.8em;background-color:rgb(248,248,248);padding:1.2em 1.4em;line-height:1.5em;margin-bottom:0px;">&lt;div id="app-7"&gt;
 &lt;ol&gt;
 &lt;!--
 现在我们为每个 todo-item 提供 todo 对象
 todo 对象是变量，即其内容可以是动态的。
 我们也需要为每个组件提供一个“key”，稍后再
 作详细解释。
 --&gt;
 &lt;todo-item
 v-for="item in groceryList"
 v-bind:todo="item"
 v-bind:key="item.id"&gt;
 &lt;/todo-item&gt;
 &lt;/ol&gt;
&lt;/div&gt;
</pre></td> 
 </tr> 
 </tbody> 
</table>

<table style="width:600px;padding:0px;margin:0px;"> 
 <tbody> 
 <tr style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"> 
 <td style="width:600px;border-collapse:collapse;padding:0px;margin:0px;"><pre style="color:rgb(82,82,82);font-family:'Roboto Mono', Monaco, courier, monospace;font-size:.8em;background-color:rgb(248,248,248);padding:1.2em 1.4em;line-height:1.5em;margin-bottom:0px;">Vue.component('todo-item', {
 
 props: ['todo'],
 template: '&lt;li&gt;{ { todo.text }}&lt;/li&gt;'
})

var app7 = new Vue({
 
 el: '#app-7',
 data: {
 
 groceryList: [
 { id: 0, text: '蔬菜' },
 { id: 1, text: '奶酪' },
 { id: 2, text: '随便其它什么人吃的东西' }
 ]
 }
})
</pre></td> 
 </tr> 
 </tbody> 
</table>

1.  蔬菜
2.  奶酪
3.  随便其它什么人吃的东西

尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 `<todo-item>` 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。在[后续教程][Link 12]中我们将详述组件，不过这里有一个 (假想的) 例子，以展示使用了组件的应用模板是什么样的：

###     ###

更多教程访问vue官网：

https://cn.vuejs.org/v2/guide/

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[Link 3]: https://cn.vuejs.org/v2/guide/#
[Link 4]: https://cn.vuejs.org/v2/guide/comparison.html
[Link 5]: https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5
[JSFiddle _ Hello World]: https://jsfiddle.net/chrisvfritz/50wL7mdz/
[.html]: https://gist.githubusercontent.com/chrisvfritz/7f8d7d63000b48493c336e48b3db3e52/raw/ed60c4e5d5c6fec48b0921edaed0cb60be30e87c/index.html
[Link 6]: https://cn.vuejs.org/guide/installation.html
[Scrimba]: https://scrimba.com/playlist/pXKqta
[Link 7]: https://cn.vuejs.org/v2/guide/#%E5%A3%B0%E6%98%8E%E5%BC%8F%E6%B8%B2%E6%9F%93
[Scrimba 1]: https://scrimba.com/p/pXKqta/cQ3QVcr
[Link 8]: https://cn.vuejs.org/v2/guide/#%E6%9D%A1%E4%BB%B6%E4%B8%8E%E5%BE%AA%E7%8E%AF
[Scrimba 2]: https://scrimba.com/p/pXKqta/cEQe4SJ
[Link 9]: https://cn.vuejs.org/v2/guide/transitions.html
[Link 10]: https://cn.vuejs.org/v2/guide/#%E5%A4%84%E7%90%86%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5
[Scrimba 3]: https://scrimba.com/p/pXKqta/czPNaUr
[Link 11]: https://cn.vuejs.org/v2/guide/#%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BA%94%E7%94%A8%E6%9E%84%E5%BB%BA
[Scrimba 4]: https://scrimba.com/p/pXKqta/cEQVkA3
[Component Tree]: https://cn.vuejs.org/images/components.png
[prop]: https://cn.vuejs.org/v2/guide/components.html#Props
[Link 12]: https://cn.vuejs.org/v2/guide/components.html