JavaWeb开发 —— Vue框架_java vue框架

作者：IT小白 | 2024-02-28 02:09:50

踩

java vue框架

一、概述

3. v-if & v-else-if & v-else & v-show

4. v-for

四、案例分析

五、生命周期

一、概述

Vue 是一套前端框架，免除原生Javascript中的DOM操作，简化书写。
基于 MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网：http://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

二、Vue快速入门

新建 HTML 页面，引入 Vue.js 文件
```
<script src="js/vue.js"></script>
```

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


<script>
    new Vue({
         el: "#app",
         data: {
             message: "Hello Vue ! "
         }
   })
</script>

编写视图


<div id = "app">
       <input type="text" v-model = "message">
       {{ message }} 
</div>

插值表达式：

① 形式： {{ 表达式 }}

② 内容：

变量
三元运算符
函数调用
算术运算


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

三、常用指令

① 指令：HTML标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如: v-if，v-for ...

② 常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

1. v-bind & v-model

注意事项：通过 v-bind 或者 v-model 绑定的变量，必须在数据模型中声明。


<html>
<head>
    <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",  //Vue接管区域
        data:{
            url:"http://www.baidu.com",
        }
    })
</script>
</html>

2. v-on


<html lang="en">
<head>
    <script src = "js/vue.js"></script>
</head>
<body>
    <div id="app">
       <input type="button" value="点击" v-on:click="handler()">
       <input type="button" value="点击" onclick="handler()">
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",  //Vue接管区域
        data:{
        },
        methods:{
            handler:function(){
                alert("点击了一下...");
            }
        }
    })
</script>
</html>

3. v-if & v-else-if & v-else & v-show


<!DOCTYPE html>
<html lang="en">
<head>
    <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 >老年人(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>
    //定义Vue对象
    new Vue({
        el:"#app",  //Vue接管区域
        data:{
            age:20
        }
    })
</script>
</html>

4. v-for


<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    //定义Vue对象
    new Vue({
        el:"#app",  //Vue接管区域
        data:{
            addrs:["北京","上海","西安","成都","深圳"]
        },
        methods:{
 
        }
    })
</script>
</html>

四、案例分析

通过Vue完成表格数据的渲染显示：


<!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>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 = "(user ,index) in users" >
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-show = "user.gender == 1">男</span>
                    <span v-show = "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>
    //定义Vue对象
    new Vue({
        el:"#app",  //Vue接管区域
        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>

五、生命周期

生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态	阶段周期
beforecreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/157149