前端框架Vue

作者： 作者的头像   Agoni7z ,  2024-05-12 14:30:15 ,  所有人可见 ,  阅读 34

1


1

Vue的引入

1.png

Vue的作用以及基本指令

Vue快速入门

2.png 

<!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="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", // Vue接管区域
        data: {
            message: "Hello Vue"
        }
    })
</script>
</html>

那么Vue有什么作用呢？
4.png
请看下面的指令：

Vue-指令-v-bind和v-model

3.png 

<!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>

因为我这里绑定的是url，因此我们改变表单中的链接，同样能访问acwing

5.png 

为什么是这样的呢？
因为Vue中的ViewModel模型，会帮我们修改链接。而我们的a和input标签只需要绑定Vue对象中的url即可，这样便于维护,同时这也是Vue框架的好处

v-on

作用：为HTML标签绑定事件

比如这里我们定义一个button，为button绑定一个click事件，当点击按钮的时候，就会触发handle()函数。
触发Vue对象中的函数我们要在Vue对象中定义一个methods，然后再methods中写handle函数

代码如下：

<!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", // Vue接管区域
        data: {

        },
        methods: {
            handle: function() {
                alert("你点我了一下");
            }
        },
    });
</script>

</html>

6.png

Vue的v-if和v-show指令

1.png 

<!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 < 60">中年人(35-60)</span>
        <span v-else="age > 60">年轻人(60及以上)</span>

        <br><br>

        年龄<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>
    new Vue({
        el: "#app",
        data: {
            age: 20
        },
        methods: {

        },
    });
</script>

</html>

2.png
通过观察v-if和v-show指令的输出结果我们可以发现
v-show会把所有结果都输出出来对于没有的会用display属性标记为none

v-for

4.png 

<!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="addr in addrs">{{addr}}</div>
        <hr>
        <div v-for="(addr, index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            addrs: ["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {

        },
    });
</script>

</html>

3.png

Vue-案例

1.png

思路：
把Vue对象中的data引入body的表格中
代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 案例</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="(user, i) in users">
                <td>{{i + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td><span v-if="user.gender == 1">男</span> 
                    <span v-if="user.gender == 2">女</span></td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            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>

2.png

Vue的生命周期

1.png
2.png

对于Java程序员我们只需要掌握mounted挂载完成这个周期，当挂载完成之后我们需要写后端的方法包括异步处…
4.png
代码示例：

<!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>
</body>
<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {

        },
        mounted() {
            alert("Vue挂载完成，发送请求请求服务器")
        },
        be
    })


</script>
</html>

3.png

Vue小结

5.png 

v-bind用来绑定HTML标签属性
v-model用来绑定表单属性
v-on用来绑定事件(在vue对象中写的method中写对应的触发事件函数)
v-if和v-show的区别：
v-if判定条件成立为true，不成立则为false
v-show无论什么条件均判断为true，不成立的条件的display属性为none
v-for用来遍历Vue对象中的date

个人理解

Vue这个框架的出现，会使js--DOM变得很灵活，
比如我们要维护一个事件的时候，我们只需要找到Vue对象操作即可，
这样会大大减少前端工程师的工作量，提高工作效率

0 评论