Vue示例
这一章主要是写vue demo
这个示例展示了如何通过 v-on 指令处理用户输入。
实现效果
相关代码
<script>
export default {
data() {
return {
message: 'Hello World!',
show: true,
list: [1, 2, 3]
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
},
notify() {
alert('navigation was prevented.')
}
}
}
</script>
<div>
<!--
注意我们不需要在模板中写 .value，
因为在模板中 ref 会自动“解包”。
-->
<h1>{{ message }}</h1>
<!--
绑定到一个方法/函数。
这个 @click 语法是 v-on:click 的简写。
-->
<button @click="reverseMessage">Reverse Message</button>
<!-- 也可以写成一个内联表达式语句 -->
<button @click="message += '!'">Append "!"</button>
<!--
Vue 也为一些像 e.preventDefault() 和 e.stopPropagation()
这样的常见任务提供了修饰符。
-->
<a href="https://vuejs.org" @click.prevent="notify">
A link with e.preventDefault()
</a>
<hr>
<button @click="show = !show">Toggle List</button>
<button @click="list.push(list.length + 1)">Push Number</button>
<button @click="list.pop()">Pop Number</button>
<button @click="list.reverse()">Reverse List</button>
<hr>
<ul v-if="show && list.length">
<li v-for="item of list">{{ item }}</li>
</ul>
<p v-else-if="list.length">List is not empty, but hidden.</p>
<p v-else>List is empty.</p>
<hr>
</div>
<style scoped>
button, a {
display: block;
margin-bottom: 1em;
}
</style>关于Vue的几个问题
Vue 使用什么开源协议？
Vue 是完全免费的开源项目，且基于 MIT License 发布。
Vue 支持哪些浏览器？
最新版本的 Vue (3.x) 只支持原生支持 ES2015 的浏览器。这并不包括 IE11。Vue 3.x 使用的 ES2015 功能无法在旧版本的浏览器中进行兼容，如果你需要支持旧版本的浏览器，请使用 Vue 2.x 替代。
Vue 可靠吗？
Vue 是一个成熟的、经历了无数实战考验的框架。它是目前生产环境中使用最广泛的 JavaScript 框架之一，在全球拥有超过 150 万用户，并且在 npm 上的月下载量超过 1000 万次。
Vue 被世界各地知名且多元的组织在生产环境中使用，包括 Wikimedia 基金会、美国宇航局、苹果、谷歌、微软、GitLab、Zoom、腾讯、微博、哔哩哔哩、快手等等。
Vue 速度快吗？
Vue 3 是性能最强的主流前端框架之一，可以轻松处理大多数 web 应用的场景，并且几乎不需要手动优化。
跑分方面，Vue 在 js-framework-benchmark 中的表现比 React 和 Angular 要好得多。在该基准测试中，它还与一些生产环境下最快级别的非虚拟 DOM 框架并驾齐驱。
请注意，像上面这样的跑分的侧重点在于原始渲染性能在特定情况下的优化，因此不能完全代表真实世界的性能结果。如果你更关心页面加载性能，欢迎用 WebPageTest 或是 PageSpeed Insights 来测试本站。本文档站是一个完全由 Vue 本身构建，通过静态生成预渲染，并在客户端进行 hydration 的单页应用。它在模拟 4 倍 CPU 降速的 Moto G4 + 低速 4G 网络的情况下依然能获得 100 分的性能得分。
你可以在渲染机制章节了解更多关于 Vue 如何自动优化运行时性能的信息，也可以在性能优化指南中了解如何在特别苛刻的情况下优化 Vue 应用。
Vue 体积小吗？
当你通过构建工具使用时，Vue 的许多 API 都是可以“tree-shake”的。例如，如果你不使用内置的 <Transition> 组件，它就不会被包含在最终的生产环境包里。
对于一个 Vue 的最少 API 使用的 hello world 应用来说，配合最小化和 brotli 压缩，其基线大小只有 16kb 左右。但实际的应用大小取决于你使用了多少框架的可选特性。在极端情况下，如果一个应用使用了 Vue 提供的每一个特性，那么总的运行时大小大约为 27kb。
如果不通过构建工具使用 Vue，我们不仅失去了 tree-shaking，而且还必须将模板编译器加载到浏览器。这就使包体积增大到了 41kb 左右。因此，如果你为了渐进式增强在没有构建步骤的情况下使用 Vue，则可以考虑使用 petite-vue (仅 6kb) 来代替。
一些诸如 Svelte 的框架使用了一种为单个组件产生极轻量级输出的编译策略。然而，我们的研究表明，包大小的差异在很大程度上取决于应用中的组件数量。虽然 Vue 的基线大小更重，但它生成的每个组件的代码更少。在现实的场景中，Vue 应用很可能最终会更轻。
Vue 能胜任大规模场景吗？
是的。尽管有一种误解是 Vue 只适用于简单的场景，但其实 Vue 完全有能力处理大规模的应用：