Vue入门(一)之常用事件、生命周期

清疚 2022-12-19 13:23 27阅读 0赞

## 前言 ##

前端web开发最流行的工具库之一，但之前有过学习之后。一直没有怎么使用，很多东西已经忘记，这里对之前学过一点内容做一下回顾，也可当做入门小案例。

## 案例 ##

### **一、入门小demo** ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        
        <div id="app">
            
            {
       {message}}
        </div>
    
    </body>
    
    <script>
        let vm = new Vue({
            //固定写法
            el: "#app",
            //存放需要用到一些数据
            data: {
                message: 'hello Word'
            }
        })
    </script>
    
    </html>

### **二、vue中最常用v-model、v-for、v-if、 @click的简单演示** ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            
            <input type="text" v-model="message">通过v-model进行填{
       {message}}</input>
            <br />
    
            <ul>
                
                <li v-for="item in arr">
                    {
       {item}}
                </li>
            </ul>
            
            <div v-if="isShow">
                v-if ture or false 来判断是否显示
            </div>
    
            <input v-model="age">输入你年龄</input>
            <div v-if="age<18">
                年轻人
            </div>
            <div v-else-if="age>=18 && age <50">
                成年人
            </div>
            <div v-else="age>=50">
                老年人
            </div>
            
            <button type="button" @click="isShow=!isShow">@click后面直接跟方法内容处理</button>
            <button type="button" @click="handleMethod">@click后面跟方法名，具体内容交由定义方法处理</button>
        </div>
    
    </body>
    
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: "message config data",
                arr: ['arr1', 'arr2', 'arr3'],
                isShow: false,
                age: 10
            },
            //方法所在位置
            methods: {
                handleMethod() {
                    alert(this.message)
                }
            }
        })
    </script>
    
    </html>

### **三、vue中v-for 中获取其他类型值（编号，key等）** ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <input v-model="hoppy" /><button @click="handleAdd">添加值</button><button @click="handleSub">减少值</button>
            <br />
    
            <div>
                <ul>
                    <li v-for="i,index in hoppies">
                        {
       {i}}--{
       {index}}
                    </li>
                </ul>
    
            </div>
    
            <div>
                <ul>
                    <li v-for="key,value,index in user" :key="key">
                        {
       {key}}--{
       {value}}--{
       {index}}
                    </li>
                </ul>
            </div>
    
        </div>
    
    
    
    </body>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                hoppies: ["游泳", "羽毛球", "乒乓球"],
                hoppy: "",
                user: {
                    username: "张三",
                    "password": "passwordValue",
                    "gender": "man"
                }
    
            },
            methods: {
                handleAdd() {
                    var i = this.hoppies.indexOf(this.hoppy);
                    if (i != -1) {
                        alert(this.hoppy + "是重复值")
                        return
                    }
                    this.hoppies.push(this.hoppy)
                },
                handleSub() {
                    var i = this.hoppies.indexOf(this.hoppy);
                    console.log(i)
                    if (i != -1) {
                        this.hoppies.splice(i, 1)
                    }
                }
            }
        })
    </script>
    
    </html>

### **四、vue中class的动态绑定（根据参数选择不同class）** ###

### **五、vue的生命周期和监听方法** ###

这个是vue生成的时候会调用一些方法，下面是vue经常使用到的一些钩子方法，进行演示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <div>计算属性：{
       {fullName}}年龄{
       {age}}</div>
            <div>普通方法{
       {getFullName()}}</div>
            <div>监听器{
       {fullName2}}</div>
            <button @click="handleClick">@click后面跟方</button>
        </div>
    
    </body>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                firstName: 'firstNameValue',
                lastName: 'lastNameValue',
                age: 20,
                fullName2: ''
            },
            watch: {
                firstName(newValue, oldValue) {
                    console.log("监听firstName 发生变化，newValue is" + newValue + "oldValue is " + oldValue);
                    this.fullName2 = this.firstName + this.lastName
                },
                lastName() {
                    console.log("监听到lastName 发生变化了")
                    this.fullName2 = this.firstName + this.lastName
                }
            },
            methods: {
                getFullName() {
                    console.log("执行getFullName")
                    return this.firstName + ":" + this.lastName
                },
                handleClick() {
                    this.firstName = this.firstName + "124"
                }
            },
            computed: {
                fullName() {
                    console.log("计算值");
                    return this.firstName + "&&" + this.lastName;
                }
            }, created() {
                console.log("执行created..")
            },
            beforeMount() {
                console.log("beforeMount.." + this.$el.innerHTML)
            },
            mounted() {
                console.log("执行mounted.." + this.$el.innerHTML)
            }
        })
    </script>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 1]

## 结尾 ##

学习vue都就离不开，就离不开vue的子父组件之间的通信和脚手架的创建，两样会在接下来两篇中做一个小展示。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/94076d3aaf15447181a67c9d30b3a87d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/713dd3e7f12446baa29d6048baf693e1.png