Vue基础知识

最新推荐文章于 2024-09-24 11:41:48 发布

此生不悔

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量579

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2302_77601046/article/details/142284771

版权

一、什么是Vue

Vue（发音为 /vjuː/，类似于 “view”）是一个用于构建用户界面的开源 JavaScript 框架。它由尤雨溪（Evan You）于 2014 年创建，并自那时起逐渐获得了广泛的关注和采用。Vue 被设计为易于上手，同时也能够强大到驱动复杂的单页应用（SPA）。

二、Vue的关键点有哪些

易用性

Vue 的设计理念是尽可能简单直观。它提供了简洁的 API 和设计模式，使得开发者能够快速地开始构建应用。

声明式渲染

Vue 使用声明式渲染，这意味着开发者只需描述应用的状态，Vue 会自动渲染视图。这种方式简化了 DOM 操作，使得代码更加简洁和易于维护。

组件化

Vue 允许开发者将界面拆分成可复用的组件，每个组件都有自己的状态和行为。组件化提高了代码的可维护性和可重用性。

双向数据绑定

Vue 实现了数据和视图之间的双向绑定。当数据变化时，视图会自动更新；反之，当视图发生变化（如用户输入），绑定的数据也会更新。

虚拟 DOM

Vue 使用虚拟 DOM 来提高性能。在数据变化时，Vue 首先在虚拟 DOM 中进行差异计算，然后高效地更新真实 DOM。

路由和状态管理

Vue 社区提供了 Vue Router（用于页面路由）和 Vuex（用于状态管理）等官方库，它们与 Vue 核心库紧密集成，使得构建大型应用更加方便。

灵活性

Vue 的核心库专注于视图层，易于与其他库或现有项目集成。此外，Vue 还提供了构建工具 Vue CLI 和组件库 Element UI 等资源，以支持大型项目的开发。

版本

截至知识更新点（2023年），Vue 的最新主要版本是 Vue 3，它引入了 Composition API、性能改进、类型支持增强等新特性。

Vue 的应用范围广泛，从简单的交互式网页到复杂的单页应用，都可以使用 Vue 来构建。由于其轻量级和灵活的特性，Vue 在前端开发社区中非常受欢迎。

三、Vue的作用有哪些

以下是 Vue 的一些具体作用：

提高开发效率：通过声明式渲染和组件化，Vue 可以显著提高前端开发的效率。
提升用户体验：Vue 的响应式和组件化特性可以帮助开发者创建更加流畅和交互式的用户界面。
简化代码维护：组件化的架构使得代码更加模块化，易于维护和更新。
跨平台开发：Vue 可以与各种后端技术栈集成，支持跨平台应用的开发。
易于集成：Vue 可以很容易地集成到其他项目中，甚至可以与非 Vue 代码库共存。
丰富的生态系统：Vue 拥有一个庞大的社区，提供了大量的插件、工具和资源，如 Vue CLI、Vue Router、Vuex 等。
促进团队协作：Vue 的简单性和一致性使得团队成员之间的协作更加顺畅。

总的来说，Vue.js 为前端开发提供了一套高效、灵活且易于学习的解决方案，适用于从简单到复杂的应用场景。

四、举例

搜索查询、升序、降序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h1>用户查询</h1>
        <hr/>
        <input type="text" name="" placeholder="请输入名字" v-model="keyword"/>
        <button @click="sortType=1">年龄升序</button>
        <button @click="sortType=2">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <hr>
        <table border="1">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr v-for="user in fillUsers">
                <th>{{user.id}}</th>
                <th>{{user.name}}</th>
                <th>{{user.sex}}</th>
                <th>{{user.age}}</th>
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="../js/vue.global.js"></script>
    <script>
        //1.创建app
        const app = Vue.createApp({
            //data:option api
            data: function(){
                return{
                    message:"Hello Vue",
                    users:[{id:1,name:'小何',sex:'女',age:20},
                    {id:2,name:'老屈',sex:'女',age:21},
                    {id:3,name:'允浩',sex:'男',age:24},
                    {id:4,name:'轩辕',sex:'男',age:28}],
                    keyword:'',
                    sortTYpe: 0  //0:原顺序，1：升序， 2：降序
                }
            },
            computed:{
                //计算属性，依赖数据的维护
                fillUsers(){
                    //通过关键句来遍历过滤原数组，返回新数组
                    let arr = this.users.filter(user=>{
                        //过滤条件
                        return user.name.indexOf(this.keyword)>-1;
                    });
                    //升序排序
                    if(this.sortTYpe ==1){
                        arr.sort(function(a,b){
                            return a.age - b.age;  //升序
                        });
                    }
                    if(this.sortTYpe == 2){
                        arr.sort(function(a,b){
                            return b.age - a.age;   //降序
                        });
                    }
                    //返回过滤后的数组到计算属性中  fillUsers = arr;
                    return arr;
                }
            }
        })
        //2.挂载app
        app.mount("#app")
    </script>
</body>
</html>