Vue.js最新文档：安装与构建详解

需积分: 50 93 浏览量更新于2024-07-20 收藏 1.56MB PDF 举报

"Vue最新文档PDF-20170216" Vue.js是一个流行的前端JavaScript框架，专注于视图层，易于上手且功能强大。该框架不支持Internet Explorer 8及以下版本，因为它依赖于ES5特性，这些在旧版IE中不受支持。Vue.js在所有其他兼容ECMAScript 5的现代浏览器中都能正常运行。安装Vue.js可以通过多种方式，包括直接下载、CDN链接、NPM或与其他模块打包工具（如Webpack或Browserify）配合使用。对于开发环境，推荐使用开发版本，因为它包含了警告和调试模式，有助于及时发现和解决问题。而生产环境中则应使用压缩后的版本，以减小文件大小并提高性能。 CDN服务如unpkg和jsdelivr提供了即时的Vue.js库，其中unpkg始终指向npm的最新版本。如果需要特定版本，还可以选择cdnjs。NPM是构建大型Vue项目时的首选安装方式，它便于与Webpack或Browserify集成，实现模块化开发。 Vue.js有两个主要的构建版本：独立构建和运行时构建。独立构建包含模板编译器，允许在组件中使用`template`选项，但不适合服务器端渲染。运行时构建不包含模板编译器，仅支持`render`选项，但可以通过预编译单文件组件中的模板。运行时构建相比独立构建体积更小，适合优化性能。在NPM中，通过别名配置可以切换到独立构建，例如在Webpack配置文件中设置`'vue$':'vue/dist/vue.common.js'`，而在Browserify环境下，可以在`package.json`的`browser`字段中设置别名`"vue":"vue/dist/vue.common.js"`。 Vue.js的更新日志可在GitHub上查看，每个版本的变更和改进都记录在案。这有助于开发者了解新版本带来的功能和修复的问题，以便决定何时升级到最新版本。总体来说，Vue.js提供了一个灵活、高效的开发环境，适用于构建各种规模的Web应用程序。

Class 与与 Style 绑定绑定
Class 与与 Style 绑定绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最
终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符
串之外，还可以是对象或数组。
绑定绑定 HTML Class
对象语法对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class 指令可以与普通的 class 属性共存。如下模板:
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
如下 data:
data: {
  isActive: true,
  hasError: false
}
渲染为:
<div class="static active"></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true ， class列表将变为 "static active text-
danger"。
你也可以直接绑定数据里的一个对象：
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }

列表渲染 →

使用使用 key 控制元素的可重用控制元素的可重用

Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处。如下例，当

允许用户在不同的登录方式之间切换:

<label>Username</label>

</template>

<label>Email</label>

</template>

在代码中切换 loginType 不会删除用户已经输入的内容，两个模版由于使用了相同的元素，<input> 会被复用，仅仅是替换了他们的

placeholder。

自己动手试一试,输入一些文本，然后点击「Toggle login type」进行切换

Username

Enter your username

Enter your email address

Toggle login type

这样也不总是符合实际需求，所以 Vue 提供一种方式让你可以自己决定是否要复用元素。你要做的是添加一个属性 key ，key 必须带有唯一

的值。

<label>Username</label>

</template>

<label>Email</label>

</template>

现在输入文本将会在每次切换时重新渲染。自动动手试一试。

Username

Enter your username

Enter your email address

Toggle login type

注意, <label> 元素仍然会被复用，因为没有被添加了 key 属性。

v-show

另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：

<h1 v-show="ok">Hello!</h1>

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

注意 v-show 不支持 <template> 语法。

v-if vs v-show

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大

可能改变则使用 v-if 较好。

原文：http://vuejs.org/guide/conditional.html

← Class 与 Style 绑定

发现错误？想参与编辑？在 Github 上编辑此页！

剩余126页未读，继续阅读

jsjjdzg

粉丝: 0
资源: 4

Vue.js最新文档：安装与构建详解

Vue.js环境下使用vue-pdf组件查看PDF文件

Vue项目高效预览PDF：vue-pdf组件与多页展示技巧

Vue.js 3.X 官方文档PDF离线版完整教程

vue学习文档.pdf

前端vue环境部署pdf文档

Vue3pdf中文文档

vue实现pdf文档在线预览功能

vue学习文档-组件.pdf（无需积分和付费）

Vue09.pdf

Vue 讲义.pdf

最新资源