当前位置：首页 > news >正文

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

news 2025/10/31 18:27:23

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

文章目录

- 引言
- 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: {
            // 计算属性的getter
            reversedMessage: 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>