Vue第二天学习笔记(后端适用)

Vue

1. v-for

v-for:用来对对象进行遍历的(数组也是对象的一种)。

  • 遍历对象:
<div id="app">
    <span>{{ user.name }}   {{ user.age }}span>
    <br>
    
    <span v-for="u in user">
        {{ u }}
    span>
    <br>
    <span v-for="(value,key) in user">
        {{ key }} : {{ value }}
    span>
    <br>
    <span v-for="(value,key,index) in user">
        {{ index }} : {{ key }} : {{ value }}
    span>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"Kaiii",age:21}
        },
        methods: {}
    });
script>
  • 遍历数组和数组中的对象:
<div id="app">
    
    <ul>
        <li v-for="a,index in arr" >
            {{ index }}    {{ a }}
        li>
    ul>
    
    
    <ul>
        <li v-for="user,index in users" v-bind:key="user.id">
            {{ index }} === {{ user.name }} === {{ user.age }} === {{ user.content }}
        li>
    ul>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"Kaiii",age:21},
            arr:["学习", "看书", "听音乐"],
            users:[
                {id:"1",name:"xiaokai",age:21,content:"努力编码"},
                {id:"2",name:"xiaobai",age:22,content:"努力游戏"},

            ]
        },
        methods: {}
    });
script>
  • 总结:
    在使用v-for的时候一定要注意加入:key,用来给Vue内部提供重用和排序的唯一key。

2. v-model 双向绑定

v-model:用来绑定标签元素的值与Vue实例对象中data数据保持一致,从而实现双向的数据绑定机制。

<div id="app">
    <input type="text" v-model="message">
    <br>
    
    <span>{{ message }}span>
    <hr>
    <input type="button" value="改变Data中的值" @click="changeValue">
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message = "点了我就会变成这个";
            }
        }
    });
script>
  • 总结:
  1. 使用v-model指令可以实现数据的双向绑定。
  2. 所谓双向绑定,表单中数据变化导致Vue实例中data数据变化,Vue实例中data数据的变化导致表单中数据的变化,称之为双向绑定。
  • MVVM架构 双向绑定机制
  1. Model:数据,Vue实例中绑定的数据。
  2. VM:ViewModel,监听器。
  3. View:页面,页面展示的数据。

3. 事件修饰符

事件修饰符:用来和事件连用,决定事件触发的条件或者是阻止事件的触发机制。
常用的事件修饰符:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

3.1 .stop 事件修饰符

.stop:用来阻止事件冒泡。
(在div里还有一个按钮,点击按钮之后会先触发按钮的事件再触发div的事件,stop可以阻止这种情况发生)。

<div id="app">

    <div class="aa" @click="divClick">
        
        <input type="button" value="按钮" @click.stop="btnClick">
    div>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert("button被点击了");
            },
            divClick(){
                alert("div被点击了");
            }
        }
    });
script>

3.2 .prevent 事件修饰符

.prevent:用来阻止标签的默认行为。
(点击超链接之后并不会跳转到百度的网址上)。

	
    <a href="www.baidu.com" @click.prevent="aClick">百度a>

3.3 .self 事件修饰符

.self:用来针对于当前标签的事件触发,只触发自己标签上的特定动作的事件,只关心自己标签触发的事件,不监听事件冒泡。
(在div标签事件上加上self事件修饰符,就不会监听事件冒泡)。

	
    <div class="aa" @click.self="divClick">
        
        <input type="button" value="按钮" @click.stop="btnClick">

        <input type="button" value="按钮1" @click="btnClick1">
    div>

3.4 .once 事件修饰符

.once:就是让指定的事件触发一次。

	
    <a href="www.baidu.com" @click.prevent.once="aClick">百度a>

4. 按键修饰符

按键修饰符:用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符。
常用的按键修饰符:

  • .enter
  • .tab
  • .delete(捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

4.1 .enter 回车键

.enter:用来触发回车按键之后触发的事件。

<div id="app">
    
    <input type="text" v-model="msg" @keyup.enter="keyups">
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"",
        },
        methods: {
            keyups(){
                alert(this.msg);
            }
        }
    });
script>

4.2 .tab 键

.tab:用来捕获到tab键执行到当前标签时才会触发。(从别的标签捕获到当前标签)。

5. Vue生命周期

生命周期钩子 ===> 生命周期函数。

生命周期图示:
在这里插入图片描述

  • Vue生命周期总结:
  1. 初始化阶段:
<div id="app">
    <span id="sp">{{ msg }}span>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"你能拿到吗",
        },
        methods: {},
        beforeCreate(){ //1.生命周期中的第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有Data,el,methods相关属性
            console.log("beforeCreate:" + this.msg);//beforeCreate:undefined
        },
        created(){  //2.生命周期中的第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
            console.log("created:" + this.msg);//created:你能拿到吗
        },
        beforeMount(){  //3.生命周期中的第三个函数,该函数在执行时Vue将el中指定作用范围作为模板编译
            console.log("beforeMount:" + document.getElementById("sp").innerText);//beforeMount:{{ msg }}
        },
        mounted(){  //4.这是生命周期中的第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新界面
            console.log("mounted:" + document.getElementById("sp").innerText);//mounted:你能拿到吗
        }
    });
script>
  1. 运行阶段:
<div id="app">
    <span id="sp">{{ msg }}span>

    <input type="button" @click="changeData" value="修改数据">
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"你能拿到吗",
        },
        methods: {
            changeData(){
                this.msg = "你能改不";
            }
        },
        beforeUpdate(){ //5.生命周期中第五个函数,该函数是在data中数据发生变化时执行,这个事件执行时仅仅是Vue实例中data数据变化,页面显示的依然是原始数据
            console.log("beforeUpdate:" + this.msg);//beforeUpdate:你能改不
            console.log("beforeUpdate:" + document.getElementById("sp").innerText);//beforeUpdate:你能拿到吗
        },
        updated(){  //6.生命周期中的第六个函数,该函数执行时data中数据发生变化,页面中的数据也发生了变化,即页面中数据已经和data中数据一致
            console.log("updated:" + this.msg);//updated:你能改不
            console.log("updated:" + document.getElementById("sp").innerText);//updated:你能改不
        },
    });
script>
  1. 销毁阶段:
		beforeDestory(){    //7.生命周期中的第七个函数,该函数执行时,Vue中所有数据,methods,component都没有销毁

        },
        destory(){  //8.生命周期中的第八个函数,该函数执行时,Vue实例彻底销毁

        }

你可能感兴趣的:(vue)