Vue.js教程：基础概念与常用指令实践-CSDN博客

本文链接：https://blog.csdn.net/zimoxuejava/article/details/130149690

1. vue简介
2. vue的使用
3. vue中常用的指令
4. axios发送异步请求

它是一个Javascript框架，作用:简化dom的操作，以及响应式编程

2.vue的使用

（1）引入vue.js文件

可以在官网下载vue.js文件

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

（2）body创建一个div标签

 <div id="app">
        {{msg}}
        <hr>
        {{people.name}}
        {{people.age}}
        <hr>
        {{hobby[2]}}
    </div>

（3）创建自己的js代码

创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过('#app')指定el的值

  <script type="text/javascript">
        //创建一个vue对象
      var app=new Vue({
            //vue对象挂载到id为app的标签上，那么该标签下的所有元素都可以使用vue对象中的成员
            el: "#app",
            //数据
            data:{
                 msg:"今天学习vue",
            }
      })
  </script>

2.vue指令

v-text: -----v-html

v-on:-----@

v-show:-----v-if

v-bind: 标签属性绑定----:

v-for: 循环

v-model:表单元素的双向绑定

2.1：v-text: -----v-html

<!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="kk">
        <span>{{msg}}</span>
        <hr>
        <!--v-text无法解析html标签  v-html可以解析-->
        <span v-text="msg"></span>
        <hr>
        <span v-html="msg"></span>
    </div>
</body>
<script>
    let kk=new Vue({
        el:"#kk",
        data:{
            msg:"<font color='#7fff00'>我喜欢打篮球</font>"
        }
    })
</script>
</html>

2.2v-on:-----@

</head>
<body>
    <div id="kk">
        <span>{{msg}}</span>
        <hr>
        <button v-on:click="fun">点击</button>
        <!--v-on: 可以缩写为@-->
        <!--dblclick点击两下触发-->
        <button @dblclick="fun2">点击2</button>
    </div>
</body>
<script>
    let kk= new Vue({
        el:"#kk",
        data:{
            msg:"坤坤喜欢打篮球",
        },
        /*定义方法*/
        methods:{
            fun(){
                //this表示vue对象
                this.msg = "我喜欢rap"
            },
            fun2(){
                this.msg="我喜欢唱歌"
            }
        }
    })
</script>
</html>

2.3 v-show:-----v-if

<!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">
        <img src="img/01.jpg" height="600" v-show="age>18&&age<30">
        <hr>
       <!-- v-show 通过style中disable来控制标签的显示和隐藏 v-if通过删除和创建标签来控制-->
        <img src="img/02.jpg" height="600" v-if="age>18&&age<30">
        <button @click="fun">点击</button>
    </div>

</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            age:18
        },
        methods:{
            fun(){
                this.age++;
            }
        }

    })
</script>
</html>

2.4v-bind: 标签属性绑定 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .a{
            border: #ad2a27 solid 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--如何让img标签中的src属性引用vue对象中的数据-->
        <!--v-bind 设置元素的属性值 如src,title,class-->
        <img v-bind:src="imagURL" height="600" v-bind:title="title" v-bind:class="bk?'a':'' "/>
        <!--v-bind： 可以缩写为 ：-->
        <img :src="imagURL" height="600" :title="title" :class="bk?'a':'' "/>
        <button @click="fun">点击</button>
    </div>

</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            age:18,
            imagURL:"img/01.jpg",
            title:"美女一号",
            bk:true
        },
        methods:{
            fun(){
                this.imagURL="img/02.jpg";
                this.title="美女二号"
            }
        }

    })
</script>
</html>

2.5 v-for: 循环

<!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">
        <ul>
            <li v-for="(a,b) in hobby">
                {{a}}---->{{b}}
            </li>
        </ul>
    </div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            hobby: ["c","t","r","l"]
        }
    })
</script>
</html>

2.6 v-model:表单元素的双向绑定

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

3. vue结合axios以及后台代码

实现前后端交互

<!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">
        <button @click="chaxu">查询</button>
        <table width="500" border="2" bgcolor="#7fffd4" style="margin-left: auto">
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>班级号</td>
            </tr>
            <tr v-for="student in list">
                <td>{{student.sid}}</td>
                <td>{{student.sname}}</td>
                <td>{{student.sage}}</td>
                <td>{{student.cid}}</td>
            </tr>
        </table>

    </div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            student:{},
            list:[],
        },
        methods:{
            chaxu(){
                axios.get("http://localhost:8088/studentAll",this.student).then(result=> {
                    this.list = result.data.data;
                })
            }
        }
    })
</script>
</html>