【Vue入门篇】基础篇—Vue指令，Vue生命周期

news2025/10/31 23:35:09

🎊专栏【JavaSE】
🍔喜欢的诗句：更喜岷山千里雪三军过后尽开颜。
🎆音乐分享【如愿】
🎄欢迎并且感谢大家指出小吉的问题🥰

文章目录

🍔Vue概述
🎄快速入门
🌺Vue指令
- ⭐v-bind
- - ✨运行结果
- ⭐v-model
- - ✨运行结果
- 🏳️‍🌈注意
- ⭐v-on
- - ✨运行结果
- ⭐v-if && v-else-if && v-else
- - ✨运行结果
- ⭐v-show
- - ✨运行结果
- ⭐v-for
- - ✨运行结果
🌺生命周期
- ⭐mounted
- - ✨运行结果

🍔Vue概述

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

官网：https://v2.cn.vuejs.org/

🎄快速入门

在这里插入图片描述

⭐新建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>

🌺Vue指令

指令：HTML标签上带有 v- 前缀的特殊属性，不同指令有不同含义
在这里插入图片描述

⭐v-bind

v-bind为HTML标签绑定属性值，如设置herf，css样式等

<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a v-bind:href="url">链接2</a>

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

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>

在这段代码里面就是给a标签绑定herf属性，而herf是一个链接

✨运行结果

在这里插入图片描述

⭐v-model

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

<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a v-bind:href="url">链接2</a>

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

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>

表示表单输入的内容会自动绑定到url里面，可以对表单里面的内容进行修改做到

✨运行结果

在这里插入图片描述

🏳️‍🌈注意

通过v-bind或者v-model绑定的变量必须在数据模型中声明
即必须在data里面指定url的值
在这里插入图片描述

⭐v-on

为html标签绑定事件

<body>
    <div id="app">
		 <!-- 单击事件 -->
        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        <!-- 定义方法 -->
        methods: {
               <!-- 函数体 -->
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>

v-on:click可以简化为@click

✨运行结果

在这里插入图片描述

⭐v-if && v-else-if && v-else

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

<body>
    <div id="app">
        年龄<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>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            age:20
        },
        methods: {
            
        }
    })
</script>

✨运行结果

在这里插入图片描述

⭐v-show

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

<body>
    <div id="app">
        年龄<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>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            age:20
        },
        methods: {
            
        }
    })
</script>

✨运行结果

在这里插入图片描述

⭐v-for

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

<body>
    <div id="app">
        //没有索引
        <div v-for="(addrs) in addrs">{{addrs}}</div>
        //有索引
        <div v-for="(addrs,index) in addrs">{{index}}:{{addrs}}</div>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            addrs:["北京","上海","西安","南京"]
        },
        methods: {
            
        }
    })
</script>

✨运行结果

在这里插入图片描述

🌺生命周期

指一个对象从创建到销毁的全过程
每触发一个生命周期事件，会自动执行一个生命周期的方法在这里插入图片描述

⭐mounted

<body>
    <div id="app">

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

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