0
点赞
收藏
分享

微信扫一扫

Vue（二）

鲤鱼打个滚 2023-01-19 阅读 92
新星计划htmlVuevue.js系统/运维


文章目录

  • ​​1、基本指令测试案例​​
  • ​​1.1、入门案例​​
  • ​​1）不同选择器测试​​
  • ​​2）测试运算​​
  • ​​1.2、v-text和v-html​​
  • ​​1.3、v-on事件绑定​​
  • ​​1.4、v-show和v-if​​
  • ​​1.5、v-for​​
  • ​​1.6、v-model​​
  • ​​1.7、综合小案例——实现备忘录​​
  • ​​1.8、综合小案例——购物车​​
  • ​​1.9、计算属性​​
  • ​​1.10、事件修饰符​​
  • ​​1.11、按键修饰符​​
  • ​​2、Axios​​
  • ​​2.1、Axios处理并发请求​​
  • ​​3、Vue的生命周期​​


该篇博文根据B站UP主编程不良人的课程——​​【编程不良人】2021最新Vue全家桶系列教程​​整理而出



本文是对之前学习过的​​Vue​​知识点的一个复习和补充

1、基本指令测试案例



1.1、入门案例

1）不同选择器测试

案例一：分别使用id选择器和类选择器进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}}
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: "#app", //指定vue实例作用的范围
    data: {
        msg: "hello mobian"
    }
});
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="bpp">
    {{msg}}
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: ".bpp",
    data: {
        msg: "hello mobian"
    }
});
</script>



注意事项：

  1. 作用要素建议放在body内部，而不要放在在body上。即不要将el指向<body>标签和<html>标签
  2. 页面解析顺序为由上到下，所以Vue获取相关要素时，相关要素已经要已经加载。即可以把Vue语法放在页面的最后
  3. Vue内部各个元素之间使用逗号隔开
  4. 在定义选择器样式时，可以使用任意的CSS选择器，比如类选择器、id选择器。但更推荐使用id选择器


2）测试运算

案例二：对获取数据进行相关的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--算术运算-->
    {{msg + "123"}} <p></p>

    <!--逻辑运算-->
    {{msg == "123"}} <p></p>

    <!--调用js方法-->
    {{msg.toUpperCase()}} <p></p>

    {{ age+1 }} <p></p>
    {{ age == 24 }} <p></p>
    {{ age == '24' }} <p></p>
    {{ age == "24" }} <p></p>


</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: "#app",
    data: {
        msg: "hello mobian",
        age: 24
    }
});
</script>



结果：

Vue（二）_Vue


1.2、v-text和v-html

v-text：用来获取data中的数据将数据以文本的形式渲染到指定的标签内部，类似于JavaScript中的innerText

v-html：用来获取data中数据将数据重包含的html标签先解析在渲染到指定标签的内部，类似于JavaScript中的innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h2>{{msg}}+'这里有msg'</h2>
    <h2 v-text="msg">这里有msg</h2>
    <h2 v-html="msg">这里有msg</h2>
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: "#app",
    data: {
        msg: "hello mobian<a href='http://www.baidu.com'>点我</a>"
    }
});
</script>

Vue（二）_html_02



结论：

  1. 使用v-text渲染数据会直接覆盖标签里面的内容
  2. 使用v-html渲染数据会解析msg里面的html标签
  3. 使用v-text可以避免插值闪烁。即数据会渲染时，不会由{{msg}}状态变为具体内容，而是由空白直接渲染出来。


1.3、v-on事件绑定

js事件三要素：

  1. 事件源：事件的源头，一般指html标签
  2. 事件：如onclick（单击）、dbclick（双击）、onkeyup（键盘抬起）、mouseenter（鼠标移入）、mouseleave（鼠标移出）…
  3. 事件处理程序：事件处理函数 function(){}

定义一个按钮，每次点击后，显示的数字＋5

这里的函数定义方式和单击事件的定义方式为ES6的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <h2>{{ age }}</h2>
    <input type="button" value="点我" @click="addAge(5)" />

</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        age : 23,
        fatherOld : 50,
    },
    methods: {
        addAge(number){
            this.age = this.age + number;
        }
    }
})
</script>


1.4、v-show和v-if

两个标签都是用来控制页面中的标签是否展示或隐藏，使用示例 v-if= “true”，当然我们也可以使用Vue中data的变量来控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <h2 v-if="isShow">默辨</h2>
    <h2 v-show="isShow">默辨2</h2>
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        isShow:true
    },
    methods: {}
})

</script>

同样是隐藏，但是两者隐藏的方式是不一样的：

  • v-if：底层是通过控制dom元素实现，即这个隐藏是在dom树上删除该节点
  • v-show：底层是通过CSS样式实现的，即这个隐藏是样式的隐藏，元素节点还在dom树上。数据量大时推荐使用该标签

Vue（二）_新星计划_03


1.5、v-for

遍历获取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h3>遍历对象</h3>
    <h5 v-for="(value, key ,index) in student">
        {{ value}}
        {{ key}}
        {{ index}}
    </h5>

    <h3>遍历数组</h3>
    <h5 v-for="(value, index) in place">
        {{ value}}
        {{ index+1}}
    </h5>

    <h3>遍历数组中的对象</h3>
    <!--为了利于Vue进行标签的区分，所以此处绑定一个key标签，该标签对于结果没有影响-->
    <h5 v-for="(value, index) in people" :key="value.id">
        {{ index}} {{value.name}} {{value.age}} {{value.hobby}}
    </h5>
</div>
</body>
</html>
<script src="../vue/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        msg: "hello mobian",
        student: {name: "mobian", age: 12, class: 17},
        place: ["深圳", "北京", "成都", "重庆", "杭州"],
        people: [{
            id:"1",
            name: "mobian",
            age: 21,
            hobby: "跑步"
        }, {
            id:"2",
            name: "zhangsan",
            age: 11,
            hobby: "跳远"
        }, {
            id:"3",
            name: "wangwu",
            age: 21,
            hobby: "踢足球"
        }],
    },
})
</script>



测试结果：

Vue（二）_Vue_04


注意事项：以下说明来源Vue官网

即我们在使用v-for遍历获取对象内容时，尽可能的为我们的value绑定一个唯一的key，且类型为数字或字符串

Vue（二）_Vue_05


1.6、v-model

用来绑定form表单标签中的value属性，然后交给vue实例进行管理，常作用的标签input、select、checkbox、button…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        msg: "hello mobian",
    },
    methods: {}
})

</script>

Vue（二）_新星计划_06


当我们修改输入框中的值，直接会影响到Vue的data中的msg值。

曾经我们修改一个form表单中的数据的过程：

  1. 查询对应的数据，渲染到界面
  2. 修改对应的值
  3. 获取对应元素节点的内容值
  4. 将获取到的值，传递到后端，完成修改


现在使用Vue修改form表单中的数据过程：

  1. 查询对应的数据，渲染到界面
  2. 修改对应的值（由于Vue的双向绑定机制，我们这里表面上除了修改的前端视图的值，还修改了Vue的data中的数据）
  3. 直接将data中的数据传递给后端


1.7、综合小案例——实现备忘录

该测试案例，结合了v-for、v-show、v-on事件、v-model等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>备忘录功能实现</h2>
    请输入备忘录内容<input type="text" v-model="context" value=""/> <input type="button" @click="addItems" value="添加到备忘录"/>

    <!--备忘录信息为空时，显示空提示-->
    <h4 v-show="items.length == 0">当前备忘录没有信息</h4>
    <li v-for="item ,index in items" :key="">{{index+1}}.{{ item }}
        <a href="javascript:;" v-on:click="deleteItems(index)">删除</a>
    </li>

    <h2>当前备忘录中共：{{ items.length}}条</h2>

    <input type="button" v-on:click="clearItems" value="清空备忘录"/>
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        context: "",
        items: ["今天要好好学习", "跑步打卡"],
    },
    methods: {
        //清空所有备忘录数据
        clearItems() {
            this.items = [];
        },
        //添加备忘录数据
        addItems() {
            if (this.context) {
                this.items.push(this.context);
                this.context = "";
            }
        },
        //删除备忘录数据
        deleteItems(index) {
            this.items.splice(index, 1);

        }
    }
})

</script>



测试结果：

Vue（二）_html_07


1.8、综合小案例——购物车

涉及知识点：v-for遍历数组中的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>购物车案例实现</h2>

    <table border="1">
        <tr>
            <th>id</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        <tr v-for="(phone, index) in phones">
            <td>{{ phone.id }}</td>
            <td>{{ phone.name }}</td>
            <td>{{ phone.price }}</td>
            <td><input type="button" value="-" @click="reduceCount(index)" />{{ phone.count }}<input type="button"
                                                                                                     value="+"
                @click="addCount(index)"/>
            </td>
            <td>{{ (phone.price * phone.count).toFixed(2) }}</td>
        </tr>
    </table>
    <h4>总计：{{totalPrice()}}</h4>


</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        phones: [{
            id: 1,
            name: "hua wei",
            price: 25.21191,
            count: 1,
            amount: 20
        }, {
            id: 2,
            name: "apple",
            price: 10.50,
            count: 2,
            amount: 20
        }]
    },
    methods: {
        addCount(index) {
            this.phones[index].count++;

        },
        reduceCount(index) {
            if (this.phones[index].count > 0) {
                this.phones[index].count--;
            }
        },
        totalPrice() {
            let sum = 0;
            for (let a of this.phones) {
                sum += a.count * a.price;
            }
            return sum.toFixed(2);
        }
    }
})
</script>



测试结果：

Vue（二）_vue.js_08


1.9、计算属性

在案例8的基础上，如果我们在多个场景使用totalPrice方法，那么我们就可以使用计算属性，避免多次计算带来效率的延迟。

new Vue({
    el: '#app',
    data: {},
    methods: {},
    // 使用计算属性
    computed:{
        totalPrice() {
            let sum = 0;
            for (let a of this.phones) {
                sum += a.count * a.price;
            }
            console.log(sum)
            return sum.toFixed(2);
        }
    }
})

当我们在获取相关数据的计算结果时，如果使用传统的methods方式，我们每调用一次该方法，就会去重新计算一遍这个结果。如果使用了computed计算属性，那么只会在我们的计算结果发生变化的时候，才会去重新执行方法中的计算。

由名字——计算属性可得，我们将computed中的方法都当成了一个一个的属性，我们正常调用属性的时候，是没有括号的，即调用方法为：

<h4>总计：{{ totalPrice }}</h4>


1.10、事件修饰符

事件修饰符：和事件连用，用来决定事件的触发条件和决定事件的触发机制

.stop 停止事件冒泡

.prevent 阻止事件行为

.self 只触发自身行为

.once 只触发一次

可以使用链式的写法，如v-on:click.stop.once=“xxx”

测试案例：使用四个代码块分别测试四种不同的事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    
    <h2>stop事件修饰符</h2>
    <!--用来阻止事件的冒泡-->
    <div v-on:click="parent" style=" width: 200px;height: 200px;border: 1px;background: red">
        <div v-on:click.stop="son" style=" width: 100px;height: 100px;border: 1px; background: pink">
        </div>
    </div>


    <h2>prevent事件修饰符</h2>
    <!--根据href的链接自动跳转，.prevent阻止事件默认行为-->
    <a href="http://www.baidu.com" v-on:click.prevent="clickHref">百度一下，你就知道</a>
    <a href="javascript:;" v-on:click="clickHref">百度一下，你就知道</a>
    <a href="javascript:void(0);" v-on:click="clickHref">百度一下，你就知道</a>

    <h2>self事件修饰符</h2>
    <div v-on:click.self="parent" style=" width: 200px;height: 200px;border: 1px;background: red">
        <div v-on:click="son" style=" width: 100px;height: 100px;border: 1px; background: pink">
        </div>
        <div v-on:click="son" style=" width: 100px;height: 100px;border: 1px; background: orange">
        </div>
    </div>

    <h2>once事件修饰符</h2>
    <input type="button" value="点我" v-on:click.once="clickOnce"/>


</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {},
    methods: {
        parent() {
            alert("parent")
        },
        son() {
            alert("son")
        },
        clickHref(){

        },
        clickOnce(){
            alert("click me")
        }
    },
    computed: {}
})

</script>


1.11、按键修饰符

按键修饰符：和键盘上的事件进行连用，用来修饰键盘上特定的案件来触发对应的事件

.enter：按下回车键时触发

.tab：按下tab键时触发

.delete：按下delete键时触发

.esc、.space、.up、.down、.left、.right

测试案例：当键盘输入delete或enter键抬起后，会弹出“test success”字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 当键盘出现delete键和enter键的抬起时触发该事件中的方法效果。这里的使用方式和事件修饰符一样，可以使用链式的写法-->
    <input type="text" v-on:keyup.delete.enter="testKeyUp" value="msg"/>
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        msg: "hello mobian",
    },
    methods: {
        testKeyUp(){
            alert("test success");
        }
    },
    computed: {}
})

</script>


2、Axios

Axios是一个异步请求技术，核心技术就是用来在页面中发送异步请求，并获取对应数据在页面中渲染。与页面局部刷新技术AJAX相同



2.1、Axios处理并发请求

// 请求1
function findAll() {
    return axios.get("http://127.0.0.1:8080/user/findAll");
}

// 请求2
function subUser() {
    return axios.post("http://127.0.0.1:8080/user/findAll", {
        userName: "mobian",
        age: 12,
        tel: "12345678654"
    });
}

axios.all([findAll(),subUser()]).then(
    axios.spread(function (res1, res2) {  // 用来将一组函数的响应结果进行汇总处理
        console.log(res1.data);
        console.log(res2.data);
    })
)；


3、Vue的生命周期

此图片来源官网

Vue（二）_新星计划_09

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2 id="sp">{{ msg }}</h2>
    <input type="button" v-on:click="updateValue" value="点我完成数据信息修改"/>

</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        msg: "hello mobian",
    },
    methods: {
        updateValue() {
            this.msg = "hello world";
        }
    },
    // 一、初始化阶段钩子函数
    beforeCreate() {
        // 1.生命周期中第一个函数，该函数在执行时，Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作
        // Vue实例中还没有 date、el、method相关属性
        console.log("beforeCreate函数：" + this.msg)
    },
    created() {
        // 2.生命周期的第二个函数，该函数在执行时Vue实例已经完成了初始化data属性和methods中相关的方法
        console.log("created函数：" + this.msg)
    },
    beforeMount() {
        // 3.生命周期中第三个函数，该函数在执行时Vue将El中指定的作用范围作为模板进行编译
        console.log("beforeMount函数：" + document.getElementById("sp").innerText);
    },
    mounted() {
        // 4.生命周期中第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新界面内容
        console.log("mounted函数：" + document.getElementById("sp").innerText);
    },


    // 二、运行阶段钩子函数
    beforeUpdate() {
        // 5.生命周期中第五个函数，该函数是data中数据发生改变时执行
        //   该事件执行时仅仅是Vue实例中data数据变化，界面显示的依然是原始数据
        console.log("beforeUpdate函数：" + this.msg);
        console.log("beforeUpdate函数：" + document.getElementById("sp").innerText);
    },
    updated() {
        // 6.生命周期中第六个函数，该函数执行时data中数据发生变化，页面种数据也发生了变化 此时页面中的数据已经和data中数据一致
        console.log("updated函数：" + this.msg);
        console.log("updated函数：" + document.getElementById("sp").innerText);
    },

    
    // 三、销毁阶段钩子函数
    beforeDestory(){
        // 7.生命周期第七个函数，该函数执行时，Vue中所有数据 methods componet都没有被销毁
        console.log(this.updated());
        console.log(this.msg);
    },
    destoryed(){
        // 8.生命周期的第八个函数，该函数执行时，Vue实例彻底销毁
        console.log(this.updated());
        console.log(this.msg);
    }
})

</script>



测试结果：

页面加载时

Vue（二）_新星计划_10



点击按钮，数据发生修改时

Vue（二）_vue.js_11


举报

相关推荐

vue 基础（二）

前端笔记前端开发那些事儿

vue复习（二）

前端vue

vue 指令（二）

vue.js前端

Vue Router（二）

算法

# Vue 学习笔记（二）

vue.js前端javascript

Vue学习笔记(二)

vue.js前端

Vue学习笔记二

Vue路由配置重定向嵌套虚拟化云计算

vue组件笔记二

vue.js

Vue -- Mixin混入（二）

自定义属性html优先级JavaScript前端开发yyds干货盘点

Vue，初次邂逅(二)

数据vue.jsjavascriptJavaScript前端开发
0 条评论