Vue命令及案例学习总结

最新推荐文章于 2025-12-15 06:58:03 发布

原创最新推荐文章于 2025-12-15 06:58:03 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

学习总结同时被 2 个专栏收录

7 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

本文详细介绍了Vue框架的基础语法和常用指令，包括v-text、v-html、v-show、v-if/v-else-if/v-else、v-for、v-on/v-model、v-bind等，并展示了事件监听、组件、props、$emit、$bus的使用。同时，通过实例演示了Vue实现Ajax请求以及九九乘法表、百度预搜索等功能，深入理解Vue的生命周期和组件通信。

Vue框架

【官网】：Vue官网

【Vue语法】

<body id="index">
<h1>{{age}}</h1>
</body>
...
<script>
    var vm= new Vue({
        el: "#index";
		data: {
			age：18
	}
});
</script>

el:挂载点，设置Vue可管理的区域

data:数据源

【修改属性值】

语法：对象.属性=[属性值]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{age}}
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            age:1
        }
    });
    vm.age=3
</script>

【Vue常用指令】

v-text

更新标签的文本内容，指令不会解析标签文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-text="text"></p>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            text:"<a href='https:\\www.baidu.com'\>百度传送</a>"
        }
    });
</script>

v-html

更新标签的文本内容，指令会解析标签文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-html="text"></p>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            text:"<a href='https:\\www.baidu.com'\>百度传送</a>"
        }
    });
</script>

v-show

可控制标签的显示（true）/隐藏（false），底层原理是通过CSS中display属性控制

<p v-show="false">起床"肝"《原神》啦！</p>    <!--v-show="1>2"同理-->

v-if

根据属性值为真假操作标签，与=实现效果相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>你的性别是什么呀？</h1>
        <ul>
            <li v-if="'男'==sex">男</li>
            <li v-if="'女'==sex">女</li>
            <li v-if="'秘密'==sex">秘密</li>
        </ul>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            sex:"女"
        }
    });
</script>

v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>你的性别是什么呀？</h1>
        <ul>
            <li v-if="'男'==sex">男</li>
            <li v-else-if="'女'==sex">女</li>
            <li v-else-if="'秘密'==sex">秘密</li>
        </ul>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            sex:"女"
        }
    });
</script>

v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>你的性别是什么呀？</h1>
        <ul>
            <li v-if="'男'==sex">男</li>
            <li v-else="'女'==sex">女</li>
        </ul>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            sex:"女"
        }
    });
</script>

v-for

循环

语法：v-for="[昵称] in [数据源]"

指定循环100次

<h1 v-for="item in 100">第{{item}}遍：我是宝贝酱！</h1>

遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-for="item in count">{{item}}</h1>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            count:["宝贝1","宝贝2","宝贝3"]
        }
    });
</script>

添加U点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="arrText"><button type="button" @click="add">添加我的U点</button>
        <ui>
            <li v-for="(item,index) in arr">优点{{index+1}}：{{item}}</li>
        </ui>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            //创建数组
            arr:['怦','然','心','动'],
            arrText:""
        },
        methods:{
            add(){
                //新增到数组
                vm.arr.push(this.arrText);
                //重置变量
                vm.arrTest="";
            }
        }
    });
</script>

v-on

这个指令可以绑定事件，简写”@“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--"v-on"与"@"同理-->
        <button v-on:click="show">我在v-no哟！快点我</button>
        <button @click="show">我在@哟！快点我</button>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{

        },
        methods:{
            show(){
                alert("点到你了！")
            }
        }
    });
</script>

v-model

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{text}}
        </br>
        <input type="text" v-model="text">
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            text:""
        }
    });
</script>

v-bing

简写：”:“，动态改变变量的值

语法：:[属性名]=[值]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" :value="text"/>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            text:"我在这个长方形里面哟"
        }
    });
</script>

【事件】

@click="[方法名]";

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="add()">我在这！点我试试</button>
    </div>
</body>
</html>
<script>
    var vm =new Vue({
        el:"#app",
        methods:{
         /*第二种方式*/
         add(){
            alert("add方法1");
        },
    	 /*第二种方式*/
         /*add:function(){
            alert("add方法2");
         }*/
      }
    });
</script>

@mouseenter="[方法名]"

鼠标移上事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2 @mousemove="count(1,$event)">靠近我噢！方位报告(X:{{x}}-Y:{{y}})第{{number}}次移动</h2>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            number:0,
            x:0,
            y:0
        },
        methods:{
            count(number,event){
                this.number++;
                this.x=event.clientX;
                this.y=event.clientY;
            }
        }
    });
</script>

【监听属性】

watch

监听属性值变化，变量名需和属性监听的方法名一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="arrText"/>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            arrText:""
        },
        watch:{
            arrText(){
                console.log("报告！arrText以发生变化");
            }
        }
    });
</script>

【好玩的实例】

百度预搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
            <input type="text" v-model="url"/>
            <ul>
                <li v-for="item in arr">{{item}}</li>
            </ul>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            url:"",
            arr:[]
        },
        watch:{
            url(a){
                //百度端口号
                var path="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34269,34099,33970,31660,34228,33848,34133,34092,34107,34094,26350,22160&wd="+a+"&req=2&csor=2&pwd=bzhang&cb=jQuery110205059350427401879_1626229795145&_=1626229795152";
                //JSONP跨域拉取数据
                //动态创建script
                var script=document.createElement("script");
                //设置script的src的属性值
                script.src=path;
                //标签上述，把请求发出去
                document.body.appendChild(script);
            }
        }
    });

    //声明一个百度端口同名函数
    function  jQuery110205059350427401879_1626229795145(obj){
        // console.log(object);
        vm.arr=obj.g;
    }
</script>

九九乘法表

<h1>99乘法表</h1>
<table>
   <tr v-for='i in 9'>
   <td v-for='j in i' v-html='`${j}*${i}=${i*j}&nbsp;&nbsp;`'></td>
   </tr>
</table>

10X10”我是最棒滴！“

<table>
  <tr v-for="row in 10">
 		<td v-for="col in 10">我是最棒滴</td>
  </tr>
</table>

【Vue的生命周期】

<body>
    <div id="app">
        {{str}}
        <button @click="count()">a++</button>
    </div>
</body>
...
<script>
    var vm=new Vue({
        el:"app",
        data:{
            str:1
        },
        methods:{
            count(){
                this.str++;
            }
        },
        //在创建实例之前执行一次，访问不到data的数据
        beforeCreate(){
          console.log("1");
        },
        //在实例创建完毕以后执行一次，可以访问到data数据
        created(){
            console.log("2");
        },
        //在实例创建且和模板关联之前执行一次，与顺序无关
        beforeMount(){
            console.log("3");
        },
        //实例被挂载后调用，常用
        mounted(){
            //实际过程中直接从这里拉取服务器数据，可以获取data数据
            console.log("4");
        },
        //当数据发生变化时执行一次，与顺序无关，可处理变量逻辑
        beforeUpdate(){
            console.log("5");
        },
        //在数据发生变化之后执行一次
        updated(){
            console.log("6");
        }
    });
</script>

【组件】

创建组件（不能是关键字、驼峰命名，如”div“、conText（con-Text可行））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
            <one></one>
    </div>
<template id="one">
    <div>
        {{count}}
        <button type="button" @click="add">i++</button>
    </div>
</template>
</body>
</html>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            
        },
        //局部组件需要注册
        components:{
            //注册局部组件
            one:{
                //局部组件模板
                template:"#one",
                //局部组件模板数据
                data(){
                    return{
                    count:1
                }
            },
            //组件方法
            methods:{
                add(){
                    this.count++;
                }
            }
        }
    }
    });
</script>

定义全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局变量</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>我是最帅的！</p>
    </div>
    <div id="app2">
        <appText></appText>
    </div>
</body>
</html>
<script>
    Vue.component("appText",{
        template:"#app"
    });
</script>

props

父组件给子组件传值

语法：props:[“变量名”]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props传值</title>
    <script src="../js/vue.min.js"></script>
</head>
<style>
    .divclass{
        background-color: pink;
        width: 400px;
        height: 200px;
    }
    .sonclass{
        background-color: lawngreen;
        width: 200px;
        height: 100px;
    }
</style>
<body>
    <div id="app" class="divclass">
        <h1>我是父亲，今年{{str1}}</h1>
        <son class="sonclass" :str2="str2"></son>
    </div>
<template id="son">
    <h3>我是儿子，今年{{str2}}</h3>
</template>

</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            str1:"55岁",
            str2:"19岁"
        },
        components:{
            son:{
                template:"#son",
                props:["str2"]
            }
        }
    });
</script>

$emit

子组件给父组件传值

语法：$emit("[事件方法]",[子组件变量])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$emit</title>
    <script src="../js/vue.min.js"></script>
</head>
<style>
    .divclass{
        background-color: pink;
        width: 400px;
        height: 200px;
    }
    .sonclass{
        background-color: lawngreen;
        width: 200px;
        height: 100px;
    }
</style>
<body>
    <div id="app" class="divclass">
        <h1>我是人类，我很{{str}}</h1>
        <son class="sonclass" @str="show($event)"></son>
    </div>
    <template id="son" class="sonclass">
        <div>
        <h3>我超级帅</h3>
        <button type="button" @click="shuai" @str="show($event)">点击给人类传递秘密</button>
        </div>
    </template>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            str:""
        },
        methods: {
            show(str){
                this.str=str;
            }
        },
        components:{
            son:{
                template:"#son",
                //组件的data务必是一个函数有返回值
                data(){
                    return{
                        str:"帅"
                    }
                },
                methods:{
                    shuai(){
                        this.$emit("str",this.str);
                    }
                }
            }
        }
    });
</script>

$bus

兄弟之间的传值，了解即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$bus</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <son1></son1>
    <son2></son2>
</div>
<template id="son1">
    <h2>我是哥哥,谢谢弟弟送来的{{gegegift}}</h2>
</template>
<template id="son2">
    <div>
        <h2>我是弟弟，我有{{didigift}}给哥哥</h2>
        <button type="button" @click="gift">点我给哥哥</button>
    </div>
</template>
</body>
</html>
<script>
    //前端工程师称之为：中央管道
    //就是将vue实例作为原型对象输值
    Vue.prototype.$bus=new Vue;
    var vm=new Vue({
        el:"#app",
        data:{

        },
        components:{
            son1:{
                template:"#son1",
                data(){
                  return{
                      gegegift:""
                  }
                },
                mounted(){
                    this.$bus.$on("gift",($event)=>{
                        this.gegegift=$event;
                    });
                }
            },
            son2:{
                template:"#son2",
                data(){
                  return{
                      didigift:"小白兔"
                  }
                },
                methods:{
                    gift(){
                        this.$bus.$emit("gift",this.didigift);
                    }
                }

            }
        }
    });
</script>

【Vue实现Ajax】

（注：需启动另一个服务器，再调用另一个服务器的接口方法）

1、在控制台先下载“axios”

cnpm install --save axios vue-axios

2、在项目的“main.js”中引入

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

3、之后在App.vue中的script中第一行引入“import Qs from ‘qs’”

<script>
import Qs from 'qs'
    
<script>

4、案例

<template>
  <div>
    <button type="button" @click="select">点我查询</button>
    <table>
      <tr><td>序号</td><td>昵称</td><td>颜色</td></tr>
      <tr v-for="item in list">
        <td v-html="item.did"></td>
        <td v-html="item.dname"></td>
        <td v-html="item.dcolor"></td>
        <td><a href="javascript:;" @click="getDelete(item.did)">点我删除</a></td>
      </tr>
    </table>
  </div>
</template>

<script>
import Qs from 'qs'

export default {
  name: "index4",
  data(){
    return{
      //创建数组
      list:[""]
    }
  },
  methods:{
    //查询
    select(){
      var _this=this;
      this.axios({
        method:"post",
        url:"http://localhost:8081/getAll",
        data:{

        }
      }).then(function (abc){
        console.log(abc.data);
        _this.list=abc.data;
      });
    },
    //删除
    getDelete(did){
      console.log("did="+did)
      this.axios({
        method:"post",
        url:"http://localhost:8081/delete",
        transformRequest:[
          function(data){
            return Qs.stringify(data);
          },
        ],
        data:{
          did:did
        }
      }).then(function (abc){
        console.log("删除成功！"+abc.data);
      });
    }
  }
}
</script>

<style scoped>

</style>