Vue.js 是什么？

小四 2023-01-27 05:18 43次浏览 0 条评论前端

Vue.js 是什么？

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

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

Vue 实例，创建一个 Vue 实例，声明式渲染案例

以下代码是保存至一个index.html的文档（文件后缀名是.html）中，并非是.vue的文件，当今后学会了一些更vue复杂的应用的时候，比如CLI创建了更复杂的vue应用，并支持单文件组件，那在项目下创建的文件可能就是以.vue为后缀的文件。

案例代码解析：

Vuejs的引入

Vue.js的引入有多种方式，初学者使用<script>标签的方式引入，官网介绍还可以使用命令行工具 (CLI)的方式引入，我们这里使用的是前一种的方式引入。

从上面代码中可以找到如下引入vue.js的代码，vue.js下载到本地（或者CDN的方式引入），采用直接用<script>引入vue.js的方式，引入vue.js之后会在dom中声明一个全局变量Vue（可以在上面的代码末尾加入：console.log(window);），打印看看，如下图，如果不知道window，请查阅Browser对象：window对象），这样vue.js就成功部署到项目中。

所以上面的代码中：newVue还可以这样用：newwindow.Vue，是一样！

<scriptsrc=”vue.js”type=”text/javascript”charset=”utf-8″></script>

Vue.js的应用可以分为两个重要的组成部分，一个是视图，另一个是脚本。

那如何创建Vue.js的应用

视图部分：在页面上创建id为app的div标签，标签中用左右双大括号的方式声明了两个变量，message和sitename，这就是vue最常见的文本插值。

vue应用视图部分

<divid=”app”><p>{{ message }}</p><p>{{ sitename }}</p></div>

vue应用脚本部分脚本部分会包裹在<scrip>脚本标签之中，当引入vue.js之后会在dom中声明全局变量Vue，通过new Vue的方式可以或的Vue的应用，它会返回一个对象，如下代码中的var app。在new Vue的时候需要传递一个对象作为参数，这个对象有两个中要的属性，一个是el（element：元素），我们利用id选择器的方式，选中试图部分的div，另一个属性是data，data用与保存数据，我们在试图中声明的变量（message、sitename）就要在data中注册，并初始化变量的值。

<scripttype=”text/javascript”>var vm =newVue({el:#app,data:{message:Hello Vue!,sitename:编程之吧,}});</script>

以上就是创建的一个 Vue 简单应用！当我们 new Vue 的时候， Vue 其实做了大量工作，现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

打开你的浏览器的JavaScript控制台(就在这个页面打开)，并修改app.message的值，你将看到上例相应地更新。

更新前：

更新后：

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

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

<!DOCTYPE html><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width, initial-scale=1.0″><title>Vue 实例，创建一个 Vue 实例，声明式渲染</title><scriptsrc=”vue.js”type=”text/javascript”charset=”utf-8″></script><style>span{border:1px solid #EEE;padding:5px10px;border-color:#ff9595;cursor: pointer;}</style></head><body><divid=”app”><p>{{ message }}</p><p>{{ sitename }}</p><spanv-bind:title=”message”>鼠标悬停在此，将会显示：{{ message }}！</span></div><scripttype=”text/javascript”>var vm =newVue({el:#app,data:{message:页面加载于 +newDate().toLocaleString(),sitename:编程之吧,}});</script></body></html>

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

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

举报/反馈