什么是Vue、Vue的特点、Vue的优点及性能优化、应用场景

最新推荐文章于 2025-04-18 19:41:39 发布

做JAVA的小王同学

最新推荐文章于 2025-04-18 19:41:39 发布

阅读量3.9k

点赞数 2

文章标签： vue.js javascript 前端 ide

本文链接：https://blog.csdn.net/m0_65111484/article/details/130165927

版权

本文介绍了Vue.js，一个轻量级的JavaScript框架，专注于简化DOM操作和响应式编程。Vue的特点包括响应式编程和组件化，其优势在于易学性、双向数据绑定、组件化和快速运行。文章还详细讲解了如何在WebStorm中创建Vue工程，以及Vue的各种指令，如v-text、v-on、v-show/v-if、v-bind、v-for和v-model的使用，并探讨了Vue与axios的结合及后台代码的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Vue的简介

1.1：什么是Vue？

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架，它是一个Javascript框架，作用:简化dom的操作，以及响应式编程。

1.2：Vue的特点和优势

vue两大特点：响应式编程、组件化。

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

2.在webstorm中创建工程

1.引入vue.js文件

<script type="text/javascript" src="js/vue.js"></script>

2.在body创建一个div标签

在这里插入代码片<body>
    <div id="app">
        {{msg}}
    </div>
</body>

3.创建自己的js代码

<script>
    let app=new Vue({
        el:"#app",
        data:{
            msg:"我喜欢睡觉"
        },
        methods:{
            fun(){
                this.msg="我喜欢玩游戏"
            },
        }
    })
</script>

3.el的属性

把当前vue对象挂载到指定的标签元素上，使其vue生效。

4.Vue的指令介绍

1.设置标签的文本值(textContent)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{msg}}</span><hr>

    <span v-text="msg">你喜欢什么?</span><hr>
    <!--v-text:无法解析html标签  v-html可以解析html标签-->
    <span v-html="msg">你喜欢什么?</span>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            msg:"<font color='red'>我喜欢打麻将</font>",
        }
    })
</script>
</html>

2.v-on基础------为元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{msg}}</span>
    <button @click="fun">点击</button>
    <button @dbclick="fun">点击2</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            msg:"我喜欢睡觉"
        },
        methods:{
            fun(){
                this.msg="我喜欢玩游戏"
            },
        }
    })
</script>
</html>

3. v-show 和v-if-------根据表达值的真假,切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <img src="images/dog.jpg" width="200" v-show="age>18&&age<36"/>
    <hr>
    <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
    <img src="images/people.jpg" width="200" v-if="age>18&&age<36"/>
    <button @click="fun">点击</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            age:18
        },
        methods:{
            fun(){
                this.age++;
            }
        }
    })
</script>
</html>

4.v-bind------设置元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .a{
            border: red solid 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--如何让img标签中src属性引用vue对象中的数据-->
    <img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

    <!--v-bind: 缩写为: -->
    <img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>

    <button @click="fun">点击</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            age:18,
            imgUrl:"images/dog.jpg",
            title:"来福",
            flag:true
        },
        methods:{
            fun(){
                this.imgUrl="images/people.jpg";
                this.title="小狗好看"
            }
        }
    })
</script>
</html>

5. v-for------循环数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!--for(数据类型 b:数组){}-->
        <li v-for="(item,index) in hobby">
            {{item}}--->{{index}}
        </li>
    </ul>

    <table width="500px" border="1" cellspacing="0" class="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in users">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button @click="deleteUser(item.name)">删除</button>
                <button >编辑</button>
            </td>
        </tr>
    </table>


    <input type="text" @keyup.enter="fun()"/>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            hobby:["好吃","好喝","好色","好赌"],
            users:[
                {"name":"安志远","age":16,"sex":"女"},
                {"name":"陆志心","age":19,"sex":"男"},
                {"name":"马迎仙","age":15,"sex":"男"}
            ]
        },
        methods:{
            deleteUser(name){
                alert(name);
            },
            fun(){
                alert("他们都是美女");
            }
        }
    })
</script>
</html>

6.v-model----获取和设置表单元素的值. input select textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
    <input type="text" v-model="name" />
    {{name}}
    <button @click="dj">点击</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            name:"张汉卿"
        },
        methods:{
            dj(){
                this.name="张学良";
            }
        }
    })
</script>
</html>

5.Vue指令总结

v-text: -----v-html

v-on:-----@

v-show:-----v-if

v-bind: 标签属性绑定----:

v-for: 循环

v-model:表单元素的双向绑定

6.vue结合axios以及后台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天知道</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/tianindex.css" />
</head>

<body>
<div class="wrap" id="app">
    <div class="search_form">
        <div class="logo"><img src="img/logo.png" alt="logo" /></div>
        <div class="form_group">
            <input
                    type="text"
                    class="input_txt"
                    placeholder="请输入查询的天气"
                    v-model="city"
            />
            <button class="input_sub" @click="searchWeather">
                搜 索
            </button>
        </div>

    </div>
    <table width="300" border="1">
        <tr>
            <td>姓名</td>
            <td>学生编号</td>
        </tr>
        <tr v-for="item in students">
            <td>{{item.sname}}</td>
            <td>{{item.smpno}}</td>
        </tr>
    </table>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="../js/axios.min.js"></script>
<!-- 自己的js -->
<script>
    let app=new Vue({
        el:"#app",
        data:{
            city:"",
            studentVo:{},
            students:[],
        },
        methods:{
            searchWeather(){
                axios.post("http://localhost:8080/Student/list/1/5",this.studentVo).then(result=>{
                    this.students=result.data.data.records;
                })
            }
        }
    })
</script>



</body>
</html>