vue - day01-优快云博客

本文链接：https://blog.youkuaiyun.com/DDHuao/article/details/130152196

Vue是一款JavaScript框架，用于构建用户界面，特点包括声明式渲染、响应式数据绑定、组件化和轻量级。文章介绍了如何在WebStorm中创建Vue工程，讲解了v-text、v-html、v-on、v-if/v-show、v-bind、v-for和v-model等核心指令的用法，并通过计数器和图片切换的案例展示了Vue的应用。此外，还提及了axios作为Vue中进行异步请求的库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue简介

1.1 vue介绍

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

1.2 核心功能

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

1.3 优点

1、轻量级框架。

2、简单易学。

3、双向数据绑定。

4、组件化。

5、视图,数据,结构分离。

6、虚拟DOM。

7、运行速度更快。

2.在webstorm中创建vue工程

2.1 引入vue.js文件

 <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

2.2 创建 div 标签

<body>
    <div id="app">
        {{msg}}
    </div>
</body>

2.3 创建js代码

<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            msg:"sss",
            people:{"name":"王建"},
            hobby:["a","b","c"]
        }
    })
</script>

---效果

2.4 el 属性

作用：把当前vue对象挂载到指定的标签元素上，使其vue生效

3.vue部分属性

3.1 v-text属性

特性：文本显示标签,不会覆盖原始文本不解析html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/Bookindex.css" />

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <script  src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <!--文本显示标签,不会覆盖原始文本 不解析html标签 -->

    <span v-text="msg"></span>

</div>

</body>

<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            msg:"<font color='#5f9ea0'>忘记拿晚饭</font>",

        }
    })
</script>
</html>

3.2 v- html 属性

特性：文本显示标签,会覆盖原始文本可以解析html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/Bookindex.css" />

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <script  src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <!--文本显示标签,会覆盖原始文本 可以解析html标签 -->

    <span v-html="msg">帆帆帆帆</span>

</div>

</body>

<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            msg:"<font color='#5f9ea0' size='20px'>忘记拿晚饭</font>",

        }
    })
</script>

--效果

3.3 v-on属性

v-on指令作用是为元素绑定事件
v-on指令可以简写为@
绑定的方法在methods中
方法内部通过this关键字访问定义在data中的数据

--演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/Bookindex.css" />

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <script  src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}

    <!--点 击 事 件-->
    <button v-on:click="add">
        点击
    </button>
    <!-- @click相当于  v-on的缩写  方便-->
    <button @click="add2">
        点击2
    </button>

</div>

</body>

<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            msg:"忘记拿晚饭",

        },
        methods:{
            add(){
                /*alert("点击了")*/
                //this表示vue对象
                this.msg="杀杀杀";
            },
            add2(){
                this.msg="kkkkk";
            }
        }
    })
</script>
</html>

3.4 v-show --- v-if

v-show 指令根据表达式的真假来显示元素和隐藏，是响应式的

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

v-if 也是一种判断条件

两者区别：

控制手段不同
编译过程不同
编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

----应用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/Bookindex.css" />

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <script  src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--v-show 通过style的diaable标签 显 示 隐 藏 标 签-->

<img src="img/00.jpg" width="300" v-show="age>18&&age<20">
    <button @click="num"> 点击</button>
    <br>
    <!--v-if 通过创建和删除 来控制 -->
<img src="img/00.jpg" width="300" v-if="age>18&&age<23">

    <button @click="num"> 点击</button>
</div>

</body>

<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            age:18

        },
        methods:{
            num(){
                this.age++
            }
        }
    })
</script>
</html>

3.5 v-bind属性

v-bind 用于绑定数据和元素属性

可以缩写为 “ ：”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/Bookindex.css" />

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <script  src="../js/axios.min.js"></script>
    <style>
        .a{
            border: red solid 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--v-bind 用于属性绑定 -->

    <!--:  是v-bind 的缩写新方式-->

<img v-bind:src="imgurl" v-bind:title="title" v-bind:class="flag?'a':''" width="300">
    <button @click="num"> 点击</button>
    <br>

<img :src="imgurl" :title="title" :class="flag?'a':''" width="300">
    <button @click="num"> 点击</button>

</div>

</body>

<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            age:18,
            imgurl:"img/00.jpg",
            title:"aa",
            //边 框 效 果
            flag:true

        },
        methods:{
            num(){
                this.imgurl="img/01.jpg",
                this.title="bb"
            }
        }
    })
</script>
</html>

3.6 v-for

v-for循环指令是需要以 item in list形式的特殊语法，list是源数据数组， item 是数据组元素迭代的别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/Bookindex.css" />

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <script  src="../js/axios.min.js"></script>

</head>
<body>
<div id="app">

    <!-- v- for 循 环-->
    <ul>
        <li v-for="(item,i) in hobby">
            {{item}}----->{{i}}
        </li>
    </ul>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>

        <tr v-for="item in user">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>

            <!--传参-->
            <td>
                <button @click="dele(user.name)">删 除</button>
                <button>编 辑</button>
            </td>
        </tr>

    </table>

    <!-- 回车键-->
    <input type="text" @keyup.enter="num"/>
</div>

</body>

<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            hobby:["a","b","c","d"],
            user:[
                {"name":"王建","age":18},
                {"name":"王一","age":18},
                {"name":"王二","age":18}
            ]

        },
        methods:{
            dele(name){
               alert(name)
            },
            num(){
                alert("回车")
            }
        }
    })
</script>
</html>

------效果

3.7v-model

v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。

因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。
当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。

原理

通过v-bind绑定一个value属性
通过v-on指令给当前元素绑定input事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
           <!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
           <input type="text" v-model="name" />
           {{name}}
           <button @click="dj">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                name:"刘德华"
            },
            methods:{
                 dj(){
                    this.name="张学友";
                 }
            }
      })
</script>
</html>

4 ：案例

4.1计数器

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>计数器</title>
  <link rel="stylesheet" href="css/index01.css"/>
  <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>
</head>

<body>
  <!-- html结构 -->
  <div id="app">
    <!-- 计数器功能区域 -->
    <div class="input-num">
      <button @click="subtract">
        -
      </button>

      <span>{{num}}</span>

      <button @click="increase">
        +
      </button>

    </div>
    <!--<img src="http://qnaaa.zzaaa.net/aaajy/logo.png" alt="" />-->
  </div>


</body>
<script type="text/javascript">
  let app = new Vue({
    el:"#app",
    data:{
      num:0
    },
    methods:{
      increase(){
        this.num++;
      },
      subtract(){
        this.num--;
      }
    }
  })
</script>


</html>

效果

4.2 图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>

    <link rel="stylesheet" href="./css/index02.css"/>

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>


</head>
<body>
<div id="mask">
    <div class="center">
        <h2 class="title">
            <img src="./img/logo.png" alt="">
            深圳创维校区环境
        </h2>
        <!-- 图片 -->
        <img :src="imgs[index]" alt="" />
        <!-- 左箭头 -->
        <a href="javascript:void(0)"  class="left" @click="left" v-show="index > 0">
            <img src="./img/prev.png" alt="" />
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right" @click="right" v-show="index < imgs.length-1">
            <img src="./img/next.png" alt="" />
        </a>
    </div>
</div>


</body>
<script type="text/javascript" >
    let rotation = new Vue({
        el:"#mask",
        data:{
            imgs:[
                "./img/00.jpg",
                "./img/01.jpg",
                "./img/02.jpg",
                "./img/03.jpg",
                "./img/04.jpg",
                "./img/05.jpg",
                "./img/06.jpg",
                "./img/07.jpg",
                "./img/08.jpg",
                "./img/09.jpg",
                "./img/10.jpg"
            ],
            index:0,
        },
        methods:{
            right(){

                    this.index++

            },
            left(){

                    this.index--


            }
        }
    })

</script>

</html>

效果

5：vue结合axios以及后台代码

axios简介

axios前端异步请求库类似jouery ajax技术，ajax用来在页面发起异步请求到后端服务，并将后端服务响应数据渲染到页面上，jq推荐ajax技术，但vue里面并不榷荐在使用jquery框架，vue推荐使用axios异步请求库。

引入axios

<script  src="../js/axios.min.js"></script>

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="./css/Bookindex.css" />

    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <script  src="../js/axios.min.js"></script>
    <style>
        /*样式*/
        *{
            font-size: 20px;
            padding-top: 10px;
            text-align: center;
        }
    </style>

</head>

<body>
<section id="stu">

    <div >
        <div >
            <button @click="student" style="background-color: #ad2a27">学生信息</button>
        </div>
        <br>
        <table width="400" border="1" bgcolor="#5f9ea0" style="margin-left: 70px">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>班级</td>
            </tr>
            <!-- 取 值-->
            <tr v-for="item in mm">
                <td>{{item.sid}}</td>
                <td>{{item.sname}}</td>
                <td>{{item.age}}</td>
                <td>{{item.cid}}</td>
            </tr>

        </table>
    </div>
</section>
</body>

<script type="text/javascript">
    let stu = new Vue({
        el:"#stu",
        data:{
           studentvo:{},
            mm:[],
        },
        methods:{
            student(){
                axios.get("http://localhost:8080/student/queryAll",this.studentvo).then(result=>{
                    this.mm=result.data.data;
                })
            }
        }

    })
</script>
</html>

效果显示