没有合适的资源？快使用搜索试试~ 我知道了~

首页Vue.js入门教程：核心概念与实战

Vue.js入门教程：核心概念与实战

vue

需积分: 9 46 下载量 166 浏览量更新于2024-07-17 收藏 4.27MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

试读

217页

"Vue2.X教程.pdf" Vue.js 是一款轻量级的渐进式JavaScript框架，专注于视图层，使得构建用户界面变得简单且高效。Vue的核心设计理念是自底向上逐层应用，允许开发者从最小的功能模块开始，逐渐扩展到更复杂的项目。这使得Vue在上手难度和与其他库或现有项目的集成方面具有优势。 Vue的核心库不包含任何特定的后端通信或状态管理解决方案，因此可以灵活地与其他工具和库（如Vuex进行状态管理，Axios进行HTTP请求）配合使用。Vue.js 的单文件组件（Single-File Components，SFCs）是一种组织代码的方式，它允许在一个文件中包含模板、样式和逻辑，提高了代码的可维护性。对于初学者，Vue提供了丰富的官方文档和教程，包括一个视频介绍，帮助理解其核心概念。文档假设读者已经具备HTML、CSS和JavaScript的基础知识。如果你是前端新手，建议先掌握这些基础知识，然后再学习Vue，这将使学习过程更为顺利。为了快速体验Vue，你可以直接在JSFiddle上尝试官方的“Hello World”示例，这是一个实时编辑的在线平台。你也可以将示例代码复制到本地的.html文件中运行。下面是一个简单的Vue引入示例： ```html <!DOCTYPE html> <html> <head> <title>Vue入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> ``` 这个例子展示了如何创建一个Vue实例，并在页面上显示数据。`{{ message }}`是Vue的插值语法，用于将JavaScript变量绑定到HTML中。`new Vue({ ... })`创建了一个新的Vue实例，`el`属性指定了Vue挂载的DOM元素，而`data`对象则包含了可被Vue实例使用的数据。 Vue还提供了一些高级特性，如组件系统、指令（如v-if和v-for进行条件渲染和循环）、计算属性、监听器（watchers）以及生命周期钩子函数等，这些都极大地增强了Vue在构建复杂应用程序中的能力。同时，Vue社区拥有丰富的插件和库，如Vue Router用于路由管理，Vuetify或Element UI提供现成的UI组件库，Vue CLI作为脚手架工具简化项目初始化，等等。对于希望比较Vue与其他框架（如React和Angular）差异的开发者，Vue的官方文档中有专门的章节进行对比分析。Vue以其易学易用、高性能和灵活性赢得了开发者们的喜爱，成为现代前端开发的热门选择之一。

资源详情

资源推荐

2018/12/20 模板语法 — Vue.js

https://cn.vuejs.org/v2/guide/syntax.html 1/5

模板语法

插值 [#插值]

TPshop 中国开源商城系统 - 开源学习系统立即查看 > [http://www.tp-

shop.cn/index.php?http_referer=vuejs]

文本 [#文本]

<span>Message: {{ msg }}</span>

HTML

<span v-once>这个将不会改变: {{ msg }}</span>

HTML

原始 HTML [#原始-HTML]

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实

例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和

HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智

能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写

渲染 (render) 函数 [render-function.html] ，使用可选的 JSX 语法。

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据

对象上 msg 属性发生了改变，插值处的内容都会更新。

通过使用 v-once 指令 [../api/#v-once] ，你也能执行一次性地插值，当数据改变时，

插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

2018/12/20 模板语法 — Vue.js

https://cn.vuejs.org/v2/guide/syntax.html 2/5

<p>Using mustaches: {{ rawHtml }}</p>

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

HTML

特性 [#特性]

HTML

<button v-bind:disabled="isButtonDisabled">Button</button>

HTML

使用 JavaScript 表达式 [#使用-JavaScript-表达式]

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需

要使用 v-html 指令：

Using mustaches: <span style="color: red">This should be red.

</span>

Using v-html directive: This should be red.

这个 span 的内容将会被替换成为属性值 rawHtml ，直接作为 HTML——会忽略解析

属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基

于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的

基本单位。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS

攻击 [https://en.wikipedia.org/wiki/Cross-site_scripting] 。请只对可信内容

使用 HTML 插值，绝不要对用户提供的内容使用插值。

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令

[../api/#v-bind] ：

在布尔特性的情况下，它们的存在即暗示为 true ， v-bind 工作起来略有不同，在

这个例子中：

如果 isButtonDisabled 的值是 null 、 undefined 或 false ，则 disabled 特性

甚至不会被包含在渲染出来的 <button> 元素中。

2018/12/20 模板语法 — Vue.js

https://cn.vuejs.org/v2/guide/syntax.html 3/5

指令 [#指令]

HTML

{{ if (ok) { return message } }}

HTML

<p v-if="seen">现在你看到我了</p>

HTML

参数 [#参数]

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所

有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就

是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和

Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript

表达式 ( v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变

时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

这里， v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如， v-bind 指令可

以用于响应式地更新 HTML 特性：

2018/12/20 模板语法 — Vue.js

https://cn.vuejs.org/v2/guide/syntax.html 4/5

缩写 [#缩写]

HTML

HTML

修饰符 [#修饰符]

HTML

v-bind 缩写 [#v-bind-缩写]

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的

值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊

方式绑定。例如， .prevent 修饰符告诉 v-on 指令对于触发的事件调用

event.preventDefault() ：

在接下来对 v-on [events.html#事件修饰符] 和 v-for [forms.html#修饰符] 等功能

的探索中，你会看到修饰符的其它例子。

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为

现有标签添加动态行为 (dynamic behavior) 时， v- 前缀很有帮助，然而，对于一些

频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单

页面应用程序 (SPA - single page application) [https://en.wikipedia.org/wiki/Single-

page_application] 时， v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和

v-on 这两个最常用的指令，提供了特定简写：

2018/12/20 模板语法 — Vue.js

https://cn.vuejs.org/v2/guide/syntax.html 5/5

计算属性和侦听器 [/v2/guide/computed.html] →← Vue 实例 [/v2/guide/instance.html]

HTML

v-on 缩写 [#v-on-缩写]

HTML

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字

符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染

的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥

有它们。

剩余216页未读，继续阅读

粉丝: 1
资源: 2

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

Vue.js入门教程：核心概念与实战

Vue2.js新手极速入门教程PDF高清

vue.js教程.pdf

VUE视频教程2

Vue2.x响应式原理详解

"Vue2.x和Vue3.x面试常问知识点-SPA单页应用的优缺点

Vue 2.x入门：基础API详解

Vue2.x基础教程：实例创建与核心概念

Vue2.x父子组件通信深度解析

Vue2.x中的性能优化与最佳实践

Spring Boot2.x与Vue3.x的集成

Vue2.x中的错误处理和调试技巧

使用Vue2.x进行API数据请求和数据处理

Vue2.x中的数据驱动思想深入解析

vue2.x和vue2

vue2.x + ant-design-vue@1.6.0 升级到vue3+ ant-design-vue@3.2.15 需要你帮我例举一些注意的点

vue3.0对比vue2.x的优化点

用 Vue 2.x 版本的脚手架

vue3.0和vue2.x区别

Vue 3.x 版本的脚手架

Vue2.x框架中，var和let声明哪个使用得更为广泛，为什么？

最新资源