一个Java后端的Vue自学笔记_Vue第二天学习笔记（后端适用）

Vue

1. v-for

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

遍历对象：

{{ user.name }} {{ user.age }}

{{ u }}

{{ key }} : {{ value }}

{{ index }} : {{ key }} : {{ value }}

el: "#app",

data: {

user:{name:"Kaiii",age:21}

},

methods: {}

});

遍历数组和数组中的对象：

• {{ index }} {{ a }}

• {{ index }} === {{ user.name }} === {{ user.age }} === {{ user.content }}

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: {}

});

总结：

在使用v-for的时候一定要注意加入:key，用来给Vue内部提供重用和排序的唯一key。

2. v-model 双向绑定

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

{{ message }}

---

el: "#app",

data: {

message:""

},

methods: {

changeValue(){

this.message = "点了我就会变成这个";

}

}

});

总结：

使用v-model指令可以实现数据的双向绑定。

所谓双向绑定，表单中数据变化导致Vue实例中data数据变化，Vue实例中data数据的变化导致表单中数据的变化，称之为双向绑定。

MVVM架构 双向绑定机制

Model：数据，Vue实例中绑定的数据。

VM：ViewModel，监听器。

View：页面，页面展示的数据。

3. 事件修饰符

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

常用的事件修饰符：

.stop

.prevent

.capture

.self

.once

.passive

3.1 .stop 事件修饰符

.stop：用来阻止事件冒泡。

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

el: "#app",

data: {},

methods: {

btnClick(){

alert("button被点击了");

},

divClick(){

alert("div被点击了");

}

}

});

3.2 .prevent 事件修饰符

.prevent：用来阻止标签的默认行为。

(点击超链接之后并不会跳转到百度的网址上)。

百度

3.3 .self 事件修饰符

.self：用来针对于当前标签的事件触发，只触发自己标签上的特定动作的事件，只关心自己标签触发的事件，不监听事件冒泡。

(在div标签事件上加上self事件修饰符，就不会监听事件冒泡)。

3.4 .once 事件修饰符

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

百度

4. 按键修饰符

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

常用的按键修饰符：

.enter

.tab

.delete(捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

4.1 .enter 回车键

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

el: "#app",

data: {

msg:"",

},

methods: {

keyups(){

alert(this.msg);

}

}

});

4.2 .tab 键

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

5. Vue生命周期

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

生命周期图示：

Vue生命周期总结：

初始化阶段：

{{ msg }}

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:你能拿到吗

}

});

运行阶段：

{{ msg }}

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:你能改不

},

});

销毁阶段：

beforeDestory(){ //7.生命周期中的第七个函数，该函数执行时，Vue中所有数据，methods，component都没有销毁

},

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

}