web前端（速成篇三）

最新推荐文章于 2025-06-03 09:40:25 发布

Masha_cms

最新推荐文章于 2025-06-03 09:40:25 发布

阅读量515

点赞数 4

分类专栏： web前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/Masha_cms/article/details/140078734

版权

web前端专栏收录该内容

3 篇文章

订阅专栏

关于vue

一、什么是vue？
- 1、MVVM模型
二、vue快速入门
- 1、国内vue3.js
- 2、案例
三、vue的常用命令
三、总结案例

一、什么是vue？

1、官网https://cn.vuejs.org/
2、vue是一套前端框架，免除原生JS中的DMO操作，简化书写。
3、基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。

1、MVVM模型

在这里插入图片描述

二、vue快速入门

1、国内vue3.js

https://cdn.staticfile.org/vue/3.0.5/vue.global.js
直接打开，另保存就行了

2、案例

在这里插入图片描述

<!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>
    <!--  3、将模型数据绑定到视图中-->
    <div id="app">
        <!-- {{message}}：插值表达式，将变量的值显示在标签内容体 -->
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    <!-- 1、引入vue.js文件 -->

    <script src="js/vue.js"></script>
    <!-- 创建vue对象，定义模型数据 -->
    <script>
        // 方法一
            // new Vue({
            //     data(){
            //         return{
            //             //返回的就是模型数据
            //             message:"hello vue"
            //         }
            //     }
            // })
        //方法二
              new Vue({
                el:"#app",//定义Vue接管的区域，只有在这个区域，才可以使用vue的表达式获取数据
                    data:{
                        message:"hello vue"
                    }
              })
    </script>
</body>
</html>

三、vue的常用命令

在这里插入图片描述

1、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>
        <input type="text" v-model="url">
    </div>
    
</body>
<script>
    // 定义vue
    new Vue({
        el: "#app",
        data:{
            url:"http://www.baidu.com"
        }
    })
</script>
</html>

2、v-on

在这里插入图片描述
案例演示：

<!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>
    // 定义vue对象
    new Vue({
        el:"#app",
        data:{
            

        },
        methods:{
            //此处定义事件绑定的函数，这些函数都是自定义函数
            handle(){
                console.log("被点击了");
            }
        }
    })
</script>
</html>

3、v-if、v-else-if、v-else和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">
        <!-- 用v-if/v-else-if/v-else -->
        年龄<input type="text" v-model="age">经判丁，为：
        <span v-if="age<=35">年轻人（35及一下）</span>
        <span v-else-if="age>35 && age<60">中年人（35-60）</span>
        <span v-else>老年人（60以上）</span>
        <br><br>

        <!-- 用v-show
         -->
        年龄<input type="text" v-model="age">经判丁，为：
        <span v-show="age<=35">年轻人（35及一下）</span>
        <span v-show="age>35 && age<60">中年人（35-60）</span>
        <span v-show="age>=60">老年人（60以上）</span>
    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        el:"#app",
        data:{
            age:20
        }
            
    })
</script>
</html>

两者的区别是：
1、v-if 对条件判断，不符合的语句则不加载，减少空间占用
2、v-show 不符合的标签，也会加载，比较占用内存

4、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>
</head>
<script src="js/vue.js"></script>
<body>
    <div id="app">
        <!-- 遍历addrs数组，展示元素的值到p标签中 -->
        <p v-for="addr in addrs"> {{addr}}</p>
        <!-- 遍历addrs数组，展示索引和元素的值到p标签中 -->
        <p v-for="(item,i) in addrs"> {{i+1}} {{item}}</p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            addrs:["a","1","2","3"]
        }
    })
    
</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">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="content" v-for="(user, index) in users" :key="index">
                <th>{{index+1}}</th>
                <th>{{user.name}}</th>
                <th>{{user.age}}</th>
                <th>{{user.gender==1?"男":"女"}}</th>
                <th>{{user.score}}</th>
                <th v-if="user.score<60" style="color: red;">不及格</th>
                <th v-else-if="user.score>=60&& user.score<80">及格</th>
                <th v-else>优秀</th>
            </tr>
        </table>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
             users:[{
                name:"Tom",age:20,gender:1,score:78
             },{
                name:"shirly",age:18,gender:2,score:86
             },{
                name:"liming",age:18,gender:2,score:35
             }]
            }
        })
    </script>
</html>