<div id="app">
<div class="item">
<span>姓名：</span>
<!-- v-model指令，绑定文本框的内容，实现双向数据绑定 -->
<input type="text" v-model="name">{{name}}
</div>
<div class="item">
<span>地址：</span>
<!-- v-model指令，绑定多行文本框的内容，实现双向数据绑定 -->
<textarea cols="80" rows="4" v-model="address"></textarea>{{address}}
</div>
<div class="item">
<span>是否同意：</span>
<!-- 单个复选框，通过v-model绑定一个布尔值 -->
<input type="checkbox" v-model="isOK">{{isOK}}
</div>
<div class="item">
<span>爱好：</span>
<!-- 多个复选框，通过v-model绑定到同一个数组 -->
<input type="checkbox" value="抽烟" v-model="hobbies">抽烟
<input type="checkbox" value="喝酒" v-model="hobbies">喝酒
<input type="checkbox" value="烫头" v-model="hobbies">烫头
<input type="checkbox" value="唱" v-model="hobbies">唱
<input type="checkbox" value="跳" v-model="hobbies">跳
<input type="checkbox" value="篮球" v-model="hobbies">篮球
{{hobbies}}
</div>
<div class="item">
<span>性别：</span>
<!-- 多个单选框，通过v-model绑定同一个数据 -->
<input type="radio" value="男" name="sex" v-model="sex">男
<input type="radio" value="女" name="sex" v-model="sex">女
{{sex}}
</div>
<div class="item">
<span>学历：</span>
<!-- 通过v-model可以给下拉框绑定一个属性 -->
<select v-model="xueli">
<option value="小学">小学</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
<option value="博士后">博士后</option>
</select>
{{xueli}}
</div>
<div class="item">
<span>美食：</span>
<!-- 下拉框设置multiple属性后，就可以选择多个项 -->
<!-- 通过v-model可以给下拉框绑定一个数组 -->
<select v-model="meishi" multiple>
<option value="螃蟹">螃蟹</option>
<option value="龙虾">龙虾</option>
<option value="鸡腿">鸡腿</option>
<option value="牛排">牛排</option>
<option value="海鲜">海鲜</option>
</select>
{{meishi}}
</div>
<div class="item">
<span>修饰符lazy</span>
<!-- v-model指令，添加.lazy修饰符，在文本框失去焦点后在更新数据 -->
<input type="text" v-model.lazy="msg">{{msg}}
</div>
<div class="item">
<span>修饰符number</span>
<!-- v-model指令，添加.number修饰符，在修改文本框内容时，会将修改后的内容转为number类型 -->
<input type="text" v-model.number="age">{{age+10}}
</div>
<div class="item">
<span>修饰符trim</span>
<!-- v-model指令，添加.trim修饰符，在修改文本框内容时，会忽略前后的空格 -->
<input type="text" v-model.trim="city">
<span>长度：{{city.length}}</span>
</div>
</div>
let vm = new Vue({
el:'#app',
data:{
name:'张三',
address:'北京市朝阳区',
// 用于表示是否同意
isOK:true,
// 爱好数组
hobbies:["烫头","跳"],
// 性别
sex:'女',
// 学历
xueli:'博士',
// 美食
meishi:[],
// 消息
msg:'',
//年龄
age:20,
city:'北京'
},
})
绑定事件
<div id="app">
<!-- v-on:指令绑定事件，可以指定一个事件方法，事件方法要在methods里面定义。
指定事件方法时，如果没有给方法传递参数，默认会传递一个事件对象参数 -->
<button v-on:click="sayHi">Say Hi</button>
<br><br>
<!-- 如果我们传递了一个参数，还想再传递事件对象参数，就要通过$event关键字设置。 -->
<button v-on:click="sayHello('你好',$event)">Say Hello</button>
<br>
<br>
<!-- 如果事件处理的逻辑比较简单，可以直接在行内编写。 -->
<button v-on:click="name+='*'">修改name</button>{{name}}
<hr>
<!-- @是v-on:的简写 -->
<!-- 通过.prevent事件修饰符，阻止默认行为 -->
<div class="a" @click="a" @contextmenu.prevent="cm">
<!-- 通过.stop事件修饰符，阻止事件冒泡 -->
<div class="b" @click.stop="b"></div>
</div>
<br>
<!-- 通过.once事件修饰符，让事件方法只执行一次 -->
<button @click.once="once">只触发一次</button>
<br><br>
<!-- 通过.self事件修饰符，控制事件在当前元素自身触发，不在内部元素身上触发 -->
<div class="c" @click.self="c">
<div class="d"></div>
</div>
<br>
<!-- 默认情况下，手机的捕获模式是，从内部往外部挨个执行。
如果外部事件添加.capture修饰符，此时事件的不会模式就变成了，从外部外内部挨个执行。 -->
<div class="e" @click.capture="e">
<div class="f" @click="f"></div>
</div>
<br>
<!-- passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作 -->
<div class="g" @scroll.passive="g">
<div class="h"></div>
</div>
</div>
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. 深度响应式
<div id="app">
<button @click="name='李四'">修改姓名</button>
<h2>{{name}}</h2>
<hr>
<button @click="obj.name='张飞'">修改姓名</button>
<button @click="addJob">添加工作属性</button>
<button @click="delAge">删除年龄属性</button>
<h2>{{obj}}</h2>
<hr>
<button @click="arr.push('可乐')">添加可乐</button>
<button @click="arr.splice(1,1,'榴莲')">通过方法修改元素</button>
<button @click="updateArr">通过下标修改元素</button>
<button @click="delArr">通过下标删除元素</button>
<h2>{{arr}}</h2>
</div>
// 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)
}
},
})