姓名：

{{name}}

地址：

{{address}}

是否同意：

{{isOK}}

爱好：

抽烟

喝酒

烫头

唱

跳

篮球

{{hobbies}}

性别：

男

女

{{sex}}

学历：

{{xueli}}

美食：

{{meishi}}

修饰符lazy

{{msg}}

修饰符number

{{age+10}}

修饰符trim

长度：{{city.length}}

let vm = new Vue({

el:'#app',

data:{

name:'张三',

address:'北京市朝阳区',

// 用于表示是否同意

isOK:true,

// 爱好数组

hobbies:["烫头","跳"],

// 性别

sex:'女',

// 学历

xueli:'博士',

// 美食

meishi:[],

// 消息

msg:'',

//年龄

age:20,

city:'北京'

},

})

绑定事件

{{name}}

new Vue({

el:'#app',

data() {

return {

name:'张三'

}

},

methods: {

sayHi(e){

console.log(e);

console.log('Hi');

},

sayHello(val,e){

console.log(val);

console.log(e);

},

a(){

alert('大家好！我是a')

},

b(){

// 通过事件对象，阻止事件冒泡

// e.stopPropagation();

alert('大家好！我是b')

},

cm(){

// 通过事件对象，阻止默认行为

// e.preventDefault();

console.log('哈哈');

},

once(){

alert('你好呀！')

},

c(){

alert('大家好！我是c')

},

e(){

alert('大家好！我是e')

},

f(){

alert('大家好！我是f')

},

g(){

console.log(11);

}

},

深度响应式

1. 按键修饰符

new Vue({

el:'#app',

// data选项，定义属性，该选项可以是一个对象，也可以是一个方法返回一个对象。

data:{

// 商品数组

goodses:['小米手机','华为电脑','苹果手表','尼康相机'],

// 搜索关键字

keywords:'',

// 搜索结果

content:''

},

// methods选项，定义方法

methods: {

keydown(){

// 字符串的includes()方法，用于检查字符串中是否包含指定的内容，包含返回true

this.content = this.goodses.find(g=>g.includes(this.keywords))

}

},

})

2. 深度响应式

{{name}}

{{obj}}

{{arr}}

// Vue实例，在初始化的时候，会将对象身上的所有数据，做响应式处理，

// 之后再向对象中添加属性，这些属性就不再具备响应式能力了。

// 针对数组，只能通过以下方法，才能实现响应式：push() pop() unshift() shift() splice() reverse() sort()

// 如何解决上面的问题？

// 方式1：通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员

// 方式2：通过Vue实例的$set方法，更新指定的对象属性或数组成员；$delete方法，删除指定对象的属性或数组的成员

Vue.config.productionTip = false

let vm = new Vue({

el:"#app",

data:{

// 基本类型数据

name:'张三',

// 对象数据

obj:{

name:'张杰',

age:20,

sex:'男'

},

// 数组数据

arr:['面包','饼干','薯片','巧克力']

},

methods: {

// 给对象添加工作属性的方法

addJob(){

// 通过观察可以发现，我们可以给对象添加属性，但是添加后的属性，不具备响应式能力。

// this.obj.job='前端开发工程师'

// set方法的参数分别是：指定的对象，对象的属性，属性值

// Vue.set(this.obj,'job','前端开发工程师')

this.$set(this.obj,'job','前端开发工程师')

},

// 删除对象身上年龄的方法

delAge(){

// delete this.obj.age

// delete烦烦烦的参数分别是：指定的对象，对象的属性

// Vue.delete(this.obj,'age')

this.$delete(this.obj,'age')

},

// 修改数组身上的成员

updateArr(){

// this.arr[1] = '苹果'

// 这里set方法的参数分别是：指定的数组，数组的下标，对应的数据

this.$set(this.arr,1,'苹果')

},

// 根据下标删除数组元素

delArr(){

// delete this.arr[1]

// 这里的delete方法的参数分别是：指定的数组，数组的下标

this.$delete(this.arr,1)

}

},

})

V-model指令的详细用法、绑定事件、深度响应式

绑定事件

深度响应式

1. 按键修饰符

2. 深度响应式

{{name}}

{{obj}}

{{arr}}

你可能感兴趣的:(V-model指令的详细用法、绑定事件、深度响应式)