前端（二）：Vue-CSDN博客

本文链接：https://blog.csdn.net/qq_52200849/article/details/140903239

一、引入

Vue是一套前端框架，免除javaScript中的DOM操作，简化书写。基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

二、下载

下载地址：https://v2.vuejs.org/v2/guide/installation.html
在这里插入图片描述

三、Vue快速入门

①新建HTMl页面，引入Vue.js文件

<script src="../JS/vue.js"></script>

②在Js代码区域，创建Vue核心对象，定义数据模型

 new Vue({
        el:"#app" ,/* 这是vue接管的区域 */
        data: {/* 定义vue对象 */
           message:"hello vue"
        }
    })

③编写视图

 <!-- ③定义视图 -->
    <div id="app">
        <!-- //通过指令v-model与数据模型massage绑定 -->
        <input type="text" v-model="message">
        {{message}}
        <!-- 在界面直接将数据模型message展示出来 -->
    </div>

总体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- ①引入vue.js -->
    <script src="../JS/vue.js"></script>
</head>
<body>

    <!-- ③定义视图 -->
    <div id="app">
        <!-- //通过指令v-model与数据模型massage绑定 -->
        <input type="text" v-model="message">
        {{message}}
        <!-- 在界面直接将数据模型message展示出来 -->
    </div>

</body>
<script>
    /*②定义Vue对象  */
    new Vue({
        el:"#app" ,/* 这是vue接管的区域 */
        data: {/* 定义vue对象 */
           message:"hello vue"
        }
    })
</script>
</html>

最终效果：通过修改输入框的数据，也能修改框外的数据。
在这里插入图片描述
插值表达式：
形式：{{表达式}}。内容可以是：变量，三元运算符、函数调用、算术运算。

四、Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同属性。
在这里插入图片描述

（一）v-bind

为HTML标签绑定属性值，如设置href,css样式等。一旦通过v-bind或者v-model绑定了一个数据，那这个数据必须在模型中定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">这链接2</a>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
           url:"https://www.baidu.com"
        }
    })
</script>
</html>

（二）v-model

在表单元素上创建双向数据绑定。
在这里可以通过输入框改变链接的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">这链接2</a>

        <input type="text" v-model="url">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
           url:"https://www.baidu.com"
        }
    })
</script>
</html>

（三）v-on

为HTML标签绑定事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="handle()">
        <input type="button" value="按钮" @click="handle()">
    </div>
    
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            //这里面写变量

        },
        methods:{
            //这里面写方法
            handle:function(){
                alert("我被点击了...");
            }

        },
    })
</script>
</html>

（四）v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄：<input type="text" v-model="age">
        <span v-if="age <= 35">年轻人(35岁以下)</span>
        <span v-else-if="age > 35 && age <=50">中年人(35-60)</span>
        <span v-else>老年人(60岁以上)</span>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:49
        },
        methods: {
            
        },
    })
</script>
</html>

对比：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄：<input type="text" v-model="age">
        <span v-if="age <= 35">年轻人(35岁以下)</span>
        <span v-else-if="age > 35 && age <=50">中年人(35-60)</span>
        <span v-else>老年人(60岁以上)</span>


        <br><br>

        年龄：<input type="text" v-model="age">
        <span v-show="age <= 35">年轻人(35岁以下)</span>
        <span v-show="age > 35 && age <=50">中年人(35-60)</span>
        <span v-show="age>60">老年人(60岁以上)</span>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:49
        },
        methods: {
            
        },
    })
</script>
</html>

在这里插入图片描述

（五）v-for

列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(adders, index) in adders" >{{adders}}</div>
        <hr>
        <div v-for="(adders, index) in adders" >{{index}}</div>
        <hr>
        <div v-for="(adders, index) in adders" >{{index}}:{{adders}}</div>
        <hr>
        <div v-for="(adders, index) in adders" >{{index+1}}:{{adders}}</div>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            adders:["北京","上海","西安","成都","深圳"]
        },
        methods: {
            
        },
    })
</script>
</html>

结果：
在这里插入图片描述

五、生命周期

一个对象从创建到销毁的整个过程，只需要管mounted
在这里插入图片描述

<script>
    new Vue({
        el:"#app",
        data:{
        },
        mounted() {
            console.log("Vue挂载完成，发送请求获取数据");
        },
        methods: {
            
        },
    })
</script>

六、案例实践

通过Vue完成表格数据的渲染展示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(users, index) in users" :key="index">
                <td>{{index + 1}}</td>
                <td>{{users.name}}</td>
                <td>{{users.age}}</td>
                <td>
                    <span v-if="users.gender==1">男</span>
                    <span v-else>女</span>
                </td>
                <td>{{users.score}}</td>
                <td>
                    <span v-if="users.score >=80">优秀</span>
                    <span v-else-if="users.score <80 && users.score >=60">合格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            /* 1:男2：女，>85优秀，>60及格，否则不及格 */
            users:[{
                name:"Tom",
                age:20,
                gender:1,
                score:78
            },{
                name:"Rose",
                age:18,
                gender:2,
                score: 86
            },{
                name:"Jerry",
                age:26,
                gender:1,
                score: 90
            },{
                name:"Tony",
                age:30,
                gender:1,
                score: 52
            },]
        },
        methods: {
            
        },
    })
</script>
</html>