【自学笔记】Vue基础知识点总览-持续更新

devtools/2025/2/28 2:22:32/

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

- 引言
- Vue基础知识概览
- - 1. Vue实例
  - 2. 模板语法
  - 3. 计算属性
  - 4. 事件处理
总结

引言

Vue.js是一个构建用户界面的渐进式框架，以其简洁的API和易于上手的特点受到了广大开发者的喜爱。本文旨在总结Vue的基础知识，并通过实际代码示例帮助初学者快速掌握Vue的核心概念。

Vue基础知识概览

1. Vue实例

Vue实例是每个Vue应用的起点。通过创建一个新的Vue实例，我们可以将Vue绑定到DOM元素上，并开始管理该元素及其子元素。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue实例示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app">{{ message }}</div><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}});</script>
</body>
</html>

在这个示例中，我们创建了一个Vue实例，并将其绑定到ID为app的DOM元素上。然后，我们在Vue实例的data对象中定义了一个名为message的数据属性。通过双大括号语法{{ message }}，我们可以在模板中绑定并显示这个数据属性。

2. 模板语法

Vue使用基于HTML的模板语法，允许你声明式地将DOM绑定到底层Vue实例的数据。所有的Vue模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

示例代码：

<div id="app"><p>{{ message }}</p><p v-bind:title="message">悬停查看</p><a v-bind:href="url">访问网站</a><p v-if="seen">现在你看到我了</p>
</div><script>var app = new Vue({el: '#app',data: {message: '鼠标悬停查看标题',url: 'https://www.example.com',seen: true}});
</script>

在这个示例中，我们展示了Vue的文本插值（{{ message }}）、属性绑定（v-bind:title）、条件渲染（v-if）等模板语法。

3. 计算属性

计算属性是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，它们才会重新求值。

示例代码：

<div id="example"><p>原始消息："{{ message }}"</p><p>反转消息："{{ reversedMessage }}"</p>
</div><script>var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('');}}});
</script>

在这个示例中，我们定义了一个名为reversedMessage的计算属性，它返回message属性的反转字符串。当message属性发生变化时，reversedMessage会自动更新。

4. 事件处理

Vue允许我们使用v-on指令（或简写形式@）来监听DOM事件，并在触发时运行一些JavaScript代码。

示例代码：

<div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">反转消息</button>
</div><script>var app5 = new Vue({el: '#app-5',data: {message: 'Hello Vue!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('');}}});
</script>