Java Web——第二天（Vue）

最新推荐文章于 2024-09-11 22:31:16 发布

CtrlCV 攻城狮

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量249

点赞数 5

文章标签：前端 vue.js java

本文链接：https://blog.csdn.net/weixin_53891720/article/details/140954623

版权

Vue

什么是vue?

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据]

官网: Vue.js

Vue快速入门

1.引入Vue的JS文件

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

也可以在线引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

2.定义Vue对象

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

3. 编写视图层的展示代码

 <!-- 3. 编写视图层的展示代码 -->
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

常用指令

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

v-bind

为HTML标签绑定属性值，如设置 href,css样式等

<a v-bind:href="url">链接1</a>
     <!-- 可简写： -->
    <a :href="url">链接2</a>

v-model

在表单元素上创建双向数据绑定

<input type="text" v-model="url">

注意事项

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

v-on

为HTML标签绑定事件

      <input type="button" value="按钮1" v-on:click="handle()">
      <!-- 可简写： -->
      <input type="button" value="按钮2" @click="handle()">

v-if、v-else-if、v-else

条件性的渲染某元素，判定为true时渲染,否则不渲染

    年龄<input type="text" v-model="age">经判定，为：
    <span v-if="age <= 35">年轻人</span>
    <span v-else-if="age > 35 && age<60">中年人</span>
    <span v-else>老年人</span>

v-show

根据条件展示某元素，区别在于切换的是display属性的值

    年龄<input type="text" v-model="age">经判定，为：
    <span v-show="age <= 35">年轻人</span>
    <span v-show="age > 35 && age<60">中年人</span>
    <span v-show="age>=60">老年人</span>

区别：

v-for

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

    <div v-for="addr in address" >{{addr}}</div>
    <hr>
    索引从0开始
    <div v-for="(addr,index) in address" >{{index}}:{{addr}}</div>
    <hr>
    索引从1开始
    <div v-for="(addr,index) in address" >{{index+1}}:{{addr}}</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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app1">
     
    <!-- v-bind：为HTML标签绑定属性值，如设置 href,css样式等 -->
    <a v-bind:href="url">链接1</a>
     <!-- 可简写： -->
    <a :href="url">链接2</a>
    
    <!-- v-model：在表单元素上创建双向数据绑定 -->
     <input type="text" v-model="url">

    <br>
    <br>
    <br>

     <!-- v-on:为HTML标签绑定事件 -->
      <input type="button" value="按钮1" v-on:click="handle()">
      <!-- 可简写： -->
      <input type="button" value="按钮2" @click="handle()">

    <br>
    <br>
    <br>
    <!-- v-if、v-else-if、v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染 -->
     年龄<input type="text" v-model="age">经判定，为：
    <span v-if="age <= 35">年轻人</span>
    <span v-else-if="age > 35 && age<60">中年人</span>
    <span v-else>老年人</span>
    

    <br>
    <br>
    <br>
    <!-- v-show:根据条件展示某元素，区别在于切换的是display属性的值 -->
    年龄<input type="text" v-model="age">经判定，为：
    <span v-show="age <= 35">年轻人</span>
    <span v-show="age > 35 && age<60">中年人</span>
    <span v-show="age>=60">老年人</span>

    <br>
    <br>
    <br>
    <!-- v-for:列表渲染，遍历容器的元素或者对象的属性 -->
    <div v-for="addr in address" >{{addr}}</div>
    <hr>
    索引从0开始
    <div v-for="(addr,index) in address" >{{index}}:{{addr}}</div>
    <hr>
    索引从1开始
    <div v-for="(addr,index) in address" >{{index+1}}:{{addr}}</div>
    
</div>
</body>
<script>
    new Vue({
        el: "#app1",
        data: {
            url: "https://www.baidu.com",
            age: 20,
            address: ['长沙', '杭州', '深圳', '北京', '武汉', '上海']
        },
        methods: {
            handle: function() {
                alert("我被点击了");
            }
        }
    })
    </script>
    
</html>

Vue指令案例

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

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <title>Document</title>
</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>
            <!-- v-for="(user,index) in users"  循环获取users数据 -->
            <tr align="center" v-for="(user,index) in users" >
                <!-- 序号为索引0+1 -->
                <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 v-else style="color: red;">不及格</span>
                </td>
            </tr>
        </table>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            users: [{
                name:"Tom",
                age:20,
                gender:1,
                score:78
            },{
                name:"Rose",
                age:19,
                gender:2,
                score:60
            },{
                name:"Jack",
                age:21,
                gender:1,
                score:100
            },{
                name:"Peter",
                age:19,
                gender:1,
                score:51
            },]
        }
    })
</script>
</html>

Vue生命周期

生命周期:指一个对象从创建到销毁的整个过程

生命周期的八个阶段: 每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{

        },  
        mounted(){
            alert("vue挂载完成，发送请求到服务端")
        }
             
    })
</script>

mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。 (发送请求到服务端，加载数据)

小结

1.Vue是什么?

Vue是一个基于MVVM模型的前端js框架。

2.Vue常用指?

v-bind、v-model、v-on、v-if、v-show、v-for

3.Vue生命周期?

mounted

CtrlCV 攻城狮

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java Web——第二天（Vue）

指令:HTML 标签上带有 V- 前缀的特殊属性，不同指令具有不同含义。例如: v-if，v-for..mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。生命周期的八个阶段: 每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。通过v-bind或者v-model绑定的变量，必须在数据模型中声明。根据条件展示某元素，区别在于切换的是display属性的值。列表渲染，遍历容器的元素或者对象的属性。
复制链接

扫一扫