vue.js的基础知识

最新推荐文章于 2024-08-13 22:07:58 发布

asen_0611

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量1.3k

点赞数 39

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/asen_0611/article/details/135346878

版权

什么是 Vue.js？

Vue.js 是一个用于构建交互式 web 应用程序的 JavaScript 框架。它可以轻松地与其他库和技术（如 React 和 Angular）集成，并提供了一些核心功能，例如数据绑定、组件化和虚拟 DOM 等。Vue.js 还提供了许多有用的工具和插件，以帮助开发人员更轻松地创建和维护应用程序。

Vue.js 的核心特点包括：

响应式数据绑定：Vue.js 可以自动追踪数据变化并更新视图。
组件化架构：Vue.js 允许您将应用程序拆分为小型、可重用的组件，从而提高代码复用性和可维护性。
虚拟 DOM：Vue.js 使用虚拟 DOM 算法来优化视图更新，并提高性能。
生命周期钩子：Vue.js 提供了许多生命周期钩子函数，用于在组件生命周期的不同阶段执行操作。
基于模板的语法：Vue.js 的模板语法类似于 HTML，并且易于学习和使用。

Vue.js 的基本用法

在本节中，我们将介绍 Vue.js 的基本用法。我们将从创建一个简单的 Vue 实例开始，并演示如何使用指令、事件和组件等功能。

创建一个 Vue 实例

要创建一个 Vue 实例，请先引入 Vue.js 库，然后通过实例化 Vue 类来创建一个新的实例。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>My First Vue.js App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></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" 的元素上。我们还定义了一个数据属性 message，并在页面中通过双括号插值语法（{{ }}）将其呈现出来。

当 Vue 实例被创建时，它会自动将 el 元素内的内容编译为模板，并将其替换为 Vue 实例所管理的视图。在这个例子中，我们使用了一个简单的插值表达式，用来呈现数据属性 message。

使用指令

Vue.js 的指令是带有 v- 前缀的特殊属性，用于操纵 DOM 元素。以下是一些常见的指令：

v-bind：用于绑定一个或多个 HTML 属性到 Vue 实例中的数据。
v-on：用于监听 DOM 事件，并执行 Vue 实例中的方法。
v-if 和 v-show：用于条件性地呈现元素。

以下是一个简单的示例，演示如何使用指令：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Directives</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h1 v-bind:title="message">{{ message }}</h1>
        <button v-on:click="incrementCount">Add 1</button>
        <p v-if="isVisible">This is visible.</p>
        <p v-show="isHidden">This is hidden.</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hover over me!',
                count: 0,
                isVisible: true,
                isHidden: true
            },
            methods: {
                incrementCount: function() {
                    this.count++
                }
            }
        })
    </script>
</body>
</html>

在这个例子中，我们使用了 v-bind 指令将 message 数据属性绑定到 h1 元素的 title 属性上。我们还使用了 v-on 指令来监听按钮的点击事件，并在 Vue 实例中执行一个方法。

创建组件

Vue.js 的组件是独立的、可重用的代码块，用于构建复杂的应用程序。组件可以接受输入属性（即 props），并发出输出事件（即 emit）。以下是一个简单的组件示例：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Components</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <my-component :message="'Hello from parent!'"></my-component>
    </div>

    <script>
        Vue.component('my-component', {
            props: ['message'],
            template: '<div>{{ message }}</div>'
        })

        var app = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

在这个例子中，我们定义了一个名为 my-component 的新组件，并将其注册到全局 Vue 实例中。我们还定义了一个 message 属性，该属性将作为数据从父组件传递给子组件。最后，我们在 Vue 实例中使用该组件，并通过属性绑定语法（:message="'Hello from parent!'"）将 message 数据发送到子组件。

Vue.js 的高级用法

在本节中，我们将介绍一些 Vue.js 的高级用法。我们将从使用计算属性开始，并演示如何使用 Vuex 和 Vue Router 等库来构建更大型和更复杂的应用程序。

计算属性

Vue.js 的计算属性是一种特殊类型的数据属性，用于动态计算值。它们可以与其他数据属性和方法一起使用，并且具有缓存机制，以避免重复计算。以下是一个计算属性示例：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Computed Properties</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>The reversed message is: {{ reversedMessage }}</p>
        <input v-model="message" />
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            computed: {
                reversedMessage: function() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

在这个例子中，我们定义了一个名为 reversedMessage 的计算属性，该属性将 message 数据属性的反向字符串作为其值。我们还使用了双向数据绑定（v-model）为 message 属性创建了一个输入框。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理库。它提供了一个集中式的存储空间，用于管理组件之间的共享状态。以下是一个简单的使用 Vuex 的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js with Vuex</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex"></script>
</head>
<body>
    <div id="app">
        <p>Count: {{ $store.state.count }}</p>
        <button v-on:click="$store.commit('increment')">Add 1</button>
    </div>

    <script>
        var store = new Vuex.Store({
            state: {
                count: 0
            },
            mutations: {
                increment: function(state) {
                    state.count++
                }
            }