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

ゝ一纸荒年。 2024-04-17 06:39 11阅读 0赞

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

#### 文章目录 ####

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

![在这里插入图片描述][439867bca90942e2a78f68c5501a3be5.png]

## 🍔Vue概述 ##

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

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

## 🎄快速入门 ##

![在这里插入图片描述][2c6d64629f85413c8261e64dc485df96.jpeg]

⭐新建`HTML页面`，引入Vue.js文件

⭐在JS代码区域，创建Vue核心对象，定义数据模型

⭐编写视图

<div id="app">
        <input type="text" v-model="message">
        {
       {message}}
      </div>

## 🌺Vue指令 ##

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

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

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

#### ✨运行结果 ####

![在这里插入图片描述][4f16082f96584d6fa9e5e4d261f8edf2.png]

### ⭐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里面，可以对表单里面的内容进行修改做到

#### ✨运行结果 ####

![在这里插入图片描述][abcbf9c852124026bca65a6c6da4e824.png]

### 🏳️🌈注意 ###

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

### ⭐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

#### ✨运行结果 ####

![在这里插入图片描述][1f66ad39f75a4be3b1cfcfed696cddf9.png]

### ⭐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>

#### ✨运行结果 ####

![在这里插入图片描述][af50dcb046014ef9aa2f914449ba95fc.png]

![在这里插入图片描述][8a530aab48234b7eba026c0eb87dde38.png]

### ⭐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>

#### ✨运行结果 ####

![在这里插入图片描述][af50dcb046014ef9aa2f914449ba95fc.png]

![在这里插入图片描述][8a530aab48234b7eba026c0eb87dde38.png]

### ⭐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>

#### ✨运行结果 ####

![在这里插入图片描述][61c723933ef34f44b10212696b897e0c.png]

## 🌺生命周期 ##

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

### ⭐mounted ###

<body>
        <div id="app">
    
        </div>
    </body>
    <script>
        new Vue({
          
            el:"#app",
            data:{
          
    
            },
            methods: {
          
                
            },
            mounted () {
          
                alert("vue挂载完成，发送请求到服务端")
            }    
        })
    </script>

代表vue挂载完成

#### ✨运行结果 ####

![在这里插入图片描述][6a25a4aaf0424e5abd91d449d37d2600.png]

> 如果大家有不明白的地方，欢迎在评论区进行讨论  
> 如果对您有帮助，请不要吝啬手中的点赞，关注，这对我非常重要❤️

[439867bca90942e2a78f68c5501a3be5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4b7e51a3a8d04c6599d36d9daf2a7c07.png
[2c6d64629f85413c8261e64dc485df96.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/0744351d2dac4baaa3d316e362e3ec3f.jpeg
[6af3aeb26fef4f51947b29a3bef4fc24.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/293cc93923f740d4bd99bff6b840b03f.jpeg
[4f16082f96584d6fa9e5e4d261f8edf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/3a63dab5c5ac44b7bcbf1262c4118f3e.png
[abcbf9c852124026bca65a6c6da4e824.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/79ad43ef954147a6b25616a3934bd53d.png
[73650a9c58d94f6fbf1097590d1afb4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/0984f87225804982980cdb07ea6252cc.png
[1f66ad39f75a4be3b1cfcfed696cddf9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/91e2414aa9364437bb1d111a2cc1cdc0.png
[af50dcb046014ef9aa2f914449ba95fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/478c0371e4fb4a77a8e76747b4b9318e.png
[8a530aab48234b7eba026c0eb87dde38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/0a4c6609dd4843e49a074ae62c149753.png
[61c723933ef34f44b10212696b897e0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/520b192a9683412eb8d62679eb014dd3.png
[31dc81ffbe124012a22836d0d292dbf0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/b375383afde84154a92a82d54d39f163.jpeg
[7cb356f397774374bab6ff77bf0e5236.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/36386324cf124e90bc54b685d6707b4b.jpeg
[6a25a4aaf0424e5abd91d449d37d2600.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6a525147f9cd4cd4b2c7bf866f33462f.png