v-bind:
用于绑定属性，通过v-bind:绑定过的属性，可以在属性值可以写表达式
v-bind:可以用**: **简写。
<input type="text" :value="age">
v-on:
通过v-on:绑定过的事件，可以指定Vue实例定义的方法
v-on:可以用@简写。
<input type="text" :value="age" @input="updata">
v-model
通过v-model指令，可以实现对数据的双向绑定，
v-model指令是 v-bind:value 和 v-on:input 的简写。
实现双向绑定
<div id="app">
<div>
<span>姓名：</span>
<input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
</div>
<div>
<span>年龄：</span>
<!-- 如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this，$event是事件对象 -->
<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
<div>
<span>工作：</span>
<input type="text" v-model="job">{{job}}
</div>
</div>
// 关闭生产提示
Vue.config.productionTip = false
let vm = new Vue({
el: '#app',
//数据
data: {
name: '张三',
age: 20,
job:'程序员'
},
methods: {
updateName(e){
//获取文本框里面的内容，更新数据
this.name = e.target.value
}
},
})
v-model详细使用方法
先实例vue 方法和定义数据
new Vue({
el: '#app',
data() {
return {
name: '张三',
sex: '男',
addres: '南京市-雨花区-赛虹桥街道-小行路',
isok: false,
hobbies:['抽烟','喝酒','烫头','敲代码','打游戏','睡觉'],
foods:'蛋糕',
fos:['咖啡'],
}
},
})
普通的文本数据绑定
<div>
姓名：<input type="text" v-model="name">{{name}}
</div>
单选框绑定 value 值必须写，不如会出现没有默认选择 "男" v-model 绑定sex值 value值可以是0和1且要与 v-model绑定的值相同
<div>
性别：
<input v-model="sex" type="radio" name="sex" value="男">男
<input v-model="sex" type="radio" name="sex" value="女">女
<span>{{sex}}</span>
</div>
多行文本框可以像普通文本框一样绑定
<div>
地址：<textarea name="" id="" cols="30" rows="10" v-model="addres"></textarea>{{addres}}
</div>
单个复选框绑定的值可以是Boolean值
<div>
是否同意：<input type="checkbox" name="" id="" v-model="isok">{{isok}}
</div>
多行文本框绑定的是数组，value里的值要和数组中的值相同
<div>
爱好：
<input v-model="hobbies" type="checkbox" value="抽烟" id="">抽烟
<input v-model="hobbies" type="checkbox" value="喝酒" id="">喝酒
<input v-model="hobbies" type="checkbox" value="烫头" id="">烫头
<input v-model="hobbies" type="checkbox" value="打游戏" id="">打游戏
<input v-model="hobbies" type="checkbox" value="敲代码" id="">敲代码
<input v-model="hobbies" type="checkbox" value="睡觉" id="">睡觉
<span>{{hobbies}}</span>
</div>
选择框在select标签中用v-model 绑定即可 绑定的值类型是string
<div>
食物：
<select v-model="foods">
<option value="蛋糕">蛋糕</option>
<option value="咖啡">咖啡</option>
<option value="蛋挞">蛋挞</option>
</select>
{{foods}}
</div>
multiple 下可以选择多个文本，绑定的是一个数组
<div>
食物：
<select v-model="fos" multiple>
<option value="蛋糕">蛋糕</option>
<option value="咖啡">咖啡</option>
<option value="蛋挞">蛋挞</option>
</select>
{{fos}}
</div>
修饰符
方法：
.prevent 是阻止默认事件 比如：右键
.stop 是阻止冒泡事件
.once 是方法只触发一次
按键修饰符
Vue针对键盘事件，提供了按键修饰符 ，一共有9个按键修饰符，分别是：
.enter是回车键
.tab 是tab键
.delete 是删除键和退格键
.esc 是退出键
.space 是空格键
.up 是上箭头
.down 是下箭头
.left 是左箭头
.right 是右箭头
input 文本框的几种修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
绑定事件
先定义一个vue 实例
new Vue({
el: '#app',
data() {
return {
age: 20
}
},
methods: {
sayHi() {
console.log('sayHi');
},
sayHello(str) {
console.log(str);
},
sayNice(e) {
console.log(e);
},
showbox() {
console.log(123);
},
one() {
console.log("one");
},
two(e) {
// e.stopPropagation();
console.log('two');
},
keyup(e) {
let { keyCode } = e
console.log(keyCode);
}
}
})
绑定一个点击事件，可以传参数也可以不传参数，每个绑定的方法有个默认参数e
如果既要传参也要默认参数,需要在传参的后面加上$event
<p><button @click="sayHi">sayHi</button></p>
<p><button @click="sayHello('hello',$event)">sayHello</button></p>
<p><button @click="sayNice">sayNice</button></p>
如果逻辑简单 可以写在行类
<p>年龄：{{age}}
<button @click="age++">年龄+</button>
</p>
阻止右键默认事件，vue中用.prevent
原js 是e.preventDefault();
<div class="box1" @contextmenu.prevent="showbox">
box
</div>
阻止冒泡事件.stop | .once 是只触发一次方法
原js代码是e.stopPropagation()
<div class="one" @click.once="one">
<div class="two" @click.stop="two"></div>
</div>
键盘事件keyup |keydown 抬起|按下
<div> //.enter
请输入关键字查询： <input type="text" @keyup.13="keyup">
</div>
<div>
↑： <input type="text" @keyup.up="keyup">
</div>
<div>
↓： <input type="text" @keyup.down="keyup">
</div>
<div>
←： <input type="text" @keyup.left="keyup">
</div>
<div>
→： <input type="text" @keyup.right="keyup">
</div>
深度响应式
new Vue({
el:'#app',
data() {
return {
obj:{
name:'张三',
age:20,
},
arr:[11,22,33,44,55,66]
}
},
methods: {
addobj(){
this.$set(this.obj,'sex','男')
},
delobj(){
this.$delete(this.obj, 'age')
},
addarr(){
this.$set(this.arr, 3, 88)
},
delarr(){
this.$delete(this.arr,5)
}
}
})
Vue实例，在初始化的时候，会将对象身上的所有数据，做响应式处理，
之后再向对象中添加属性，这些属性就不再具备响应式能力了。
针对数组，只能通过以下方法，才能实现响应式：
push() pop() unshift() shift() splice() reverse() sort()
如何解决上面的问题？
方式1：通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员
方式2：通过Vue实例的delete方法，删除指定对象的属性或数组的成员
学生信息：
<input type="text" v-model="obj.name">
<input type="text" v-model.number="obj.age"><br>
<button @click="addobj">添加性别</button><br>
<button @click="delobj">删除年龄</button>
<br>
{{obj}}
网友评论