Vue的核心概念

复衡
206 阅读5分钟

这次主要讲解一下vue中的一些核心概念，首先便需要了解vue

vue简介

Vue是一个流行的JavaScript框架，用于构建Web应用程序。 它是一种轻量级的框架，具有良好的性能和灵活性，而且易于学习和使用。 Vue基于MVVM（模型-视图-ViewModel）设计模式，它提供了许多方便的功能，例如响应式数据绑定、组件化开发、指令系统等

接下来便讲解一下vue的核心概念

数据驱动

Vue的核心思想是将应用的状态（数据）与视图分离，通过数据驱动视图的变化。当数据发生变化时，Vue会自动更新视图

<div id="app"> 
    <p>{{ message }}</p> 
    <button v-on:click="reverseMessage">Reverse Message</button> 
</div>

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

在上面的例子中，我们定义了一个Vue实例，其中data属性中的message表示视图中的数据。在methods属性中定义了一个reverseMessage方法，当button被点击时会将message翻转。Vue会自动检测到数据的变化，并更新页面上的内容

组件化

Vue将应用拆分成一个个独立的组件，每个组件都包含自己的视图、状态和行为。组件可以嵌套、组合和复用，使得应用更加模块化、可维护和可扩展

<template> 
    <div> 
        <h2>{{ title }}</h2> 
        <ul> 
            <li v-for="item in list" :key="item.id">{{ item.text }}</li>
        </ul> 
    </div> 
</template> 

<script>
    export default { 
        name: 'MyComponent', 
        props: { 
            title: String, 
            list: Array 
        } 
    } 
</script>

在上面的例子中，我们定义了一个名为"MyComponent"的组件，其中props属性指定了组件的属性，包括title和list。在组件的模板中，我们使用了v-for指令来渲染列表

模板语法

Vue使用基于HTML的模板语法来声明视图，模板语法可以直接使用JavaScript表达式，可以方便地访问组件的数据和方法

<div id="app"> 
    <p>{{ message }}</p> 
    <button v-on:click="reverseMessage">Reverse Message</button> 
</div> 

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

在上面的例子中，我们使用了Vue的模板语法，在文本节点中使用双括号{{}}来插入数据，使用v-on指令来绑定事件

生命周期

Vue组件有自己的生命周期，包括创建、更新和销毁三个阶段，在每个阶段都有对应的钩子函数可以进行处理

Vue.component('my-component', { 
    template: '<div>{{ message }}</div>', 
    data: function () { 
        return { 
            message: 'Hello Vue!' 
        } 
    },
    created: function () { 
        console.log('component created') 
    },
    mounted: function () { 
        console.log('component mounted') 
    }, 
    destroyed: function () { 
        console.log('component destroyed') 
    } 
 }) 
 // 创建一个Vue实例 
 var app = new Vue({ 
     el: '#app', 
     data: { show: true },
     methods: { 
             destroyComponent: function () { 
             this.show = false 
         }
     } 
})

在上面的例子中，我们定义了一个名为"my-component"的组件，并在其中使用了created、mounted和destroyed钩子函数。在Vue实例中，我们定义了一个show变量，用于控制组件的显示。当show为true时，组件会被渲染到页面上，当show为false时，组件会被销毁。在销毁组件时，Vue会自动调用组件的destroyed钩子函数

指令

Vue提供了一些内置指令，如v-if、v-for、v-bind等，用于处理视图和数据的绑定、事件监听、条件渲染和列表渲染等

  1. v-if

    v-if 指令用于根据表达式的值来条件性地渲染元素。例如：

<div v-if="show">这个元素会在 show 为真时出现</div>

  1. v-for

    v-for 指令可以循环渲染数组或对象中的数据。例如：

<ul> 
    <li v-for="item in items">{{ item }}</li> 
</ul>

  1. v-bind

    v-bind 指令可以动态地将属性绑定到表达式的值上。例如：

<img v-bind:src="imageSrc">

上述代码中，imageSrc 是一个变量，它的值会被动态地绑定到 img 标签的 src 属性上

  1. v-on

    v-on 指令用于监听 DOM 事件，并在事件触发时执行指定的方法。例如：

<button v-on:click="handleClick">点击我</button>

上述代码中，当用户点击按钮时，handleClick 方法会被调用

计算属性和侦听器

计算属性

<template> 
    <div> 
        <p>商品价格：{{ price }}</p> 
        <p>打折后价格：{{ salePrice }}</p> 
    </div> 
</template> 
<script> 
export default { 
    data() { 
        return { 
            price: 100, 
            discount: 0.2,
        };
    }, 
    computed: { 
        salePrice() { 
            return this.price - (this.price * this.discount); 
        }, 
    }, 
};
</script>

在上面的代码中，我们定义了一个名为 price 的数据属性和一个名为 discount 的计算属性。 salePrice 计算属性通过 price 和 discount 属性计算出打折后的价格，并在模板中显示出来

侦听器

<template> 
    <div> 
        <p>当前城市：{{ city }}</p> 
        <button @click="changeCity('北京')">北京</button> 
        <button @click="changeCity('上海')">上海</button> 
    </div> 
</template>

<script> 
export default { 
    data() { 
        return { 
            city: '北京', 
        }; 
    }, 
    watch: { 
        city(newCity, oldCity) { 
            console.log(`从${oldCity}切换到${newCity}`); 
        }, 
    }, 
    methods: { 
        changeCity(newCity) { this.city = newCity; }, 
    }, 
};
</script>

在上面的代码中，我们定义了一个名为 city 的数据属性和一个名为 watch 的侦听器。当 city 属性发生变化时，侦听器会调用回调函数并输出新旧城市的名称

插件

Vue插件是Vue.js框架中常用的一种工具，可以扩展其功能并提供更好的用户体验

export default {
    install(Vue){
        Vue.prototype.$myMethod=function () {
            const.log('Hello from my plugin!)
        }
    }
}

以上代码创建了一个名为$myMethod的全局方法，它可以在Vue实例和组件中使用。接下来，我们需要在Vue应用程序中安装这个插件。可以在main.js文件中按照以下方式导入和安装该插件

import Vue from 'vue' 
import MyPlugin from './myPlugin' 

Vue.use(MyPlugin) 

// 现在 $myMethod 方法可以在所有vue组件中使用，例如： 
new Vue({ 
    created() { 
        this.$myMethod() 
    }
})

在上面的代码中，我们首先导入了MyPlugin插件并调用了Vue.use()方法来安装它。现在，我们可以在Vue实例或组件中使用$myMethod()方法来打印一条消息

以上是几个Vue的核心概念的代码演示

总结：

Vue具有许多优点，其中最重要的是他的灵活性和可扩展性。它可以与其他库和框架（如React、Angular、jQuery等）无缝集成，因此可以根据需要选择不同的工具来构建您的应用程序。此外，Vue还具有强大的生态系统，包括大量的第三方插件和工具，提供了更多的功能和支持

结尾

总之，Vue是一个非常流行的JavaScript框架，其简单性和灵活性使其成为构建Web应用程序的理想选择

avatar
文章
阅读
粉丝