一、绑定事件
1.使用
v-on绑定
格式
v-on:事件类型 = "函数名"
简写
@事件类型 = "函数名"
2.参数问题
没有参数,省略小扩号
绑定函数默认有一个事件对象,写$event当参数
3.事件修饰符
(1)阻止事件冒泡:
- @事件类型.stop
- 事件中调用event.stopPropagation()
(2)阻止默认事件：
- @事件类型.prevent
- 事件中调用event.preventDefault()
(3).once 一次性事件
只做一次的事件
(4).enter 回车事件 （vue -- 按键修饰符 - 不会代码的前端 - 博客园）
二、条件判断
vue条件指令可以根据表达式结果来渲染或者销毁组件
1.v-if,v-else-if,v-else
v-if后面表达式为true的时候,对应元素或者组件渲染,否则不渲染
2.v-show
后面表达式或者是值是否是true
区别
v-if:隐藏就是销毁标签,适合做一次的显示隐藏
v-show:隐藏是用display:none,适合于频繁切换
三、遍历循环
1.v-for遍历
格式:
<标签 v-for="(item,index) in 数组">
item:当前遍历值
index:遍历的下标
2.key属性
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key
key原则上是不能一样的
不建议index,接口数据返回,每一条数据都有一个id
3.数据更新检测
数组的更新需要使用vue提供的方法
- push():末尾插入
- pop():末尾删除
- shift():前面删除
- unshift():后面删除
- splice(index,length):删除选中内容
- sort()排序
- 升序 数组.sort(function(a,b){ return a-b })
- 降序
- 数组.sort(function(a,b){ return b-a })
- reverse():反转
- this.$set(要修改的对象,索引值,修改后的值)
四、表单绑定
1.v-model
vue中使用v-model指令来实现单元素和数据的双向绑定
代码语言：javascript复制<div id="app">
<input type="text" v-model="username">
{{username}}
</div>
<script>
new Vue({
el:"#app",
data:{
username:'默认'
}
})
</script>2.v-model原理
绑定value,绑定input事件
代码语言：javascript复制<div id="app">
<input type="text" :value="value" @input="getValue($event)">
{{value}}
</div>
<script>
new Vue({
el:"#app",
data:{
value:'默认值'
},
methods: {
getValue(e){
console.log(e.target.value)
this.value = e.target.value
}
},
})
</script>3.单选和多选的v-model
- 单选 v-model绑定普通的一个值
<div id="app">
<h1>单选</h1>
<form action="">
<span>男</span><input type="radio" v-model="sex" value="man">
<span>女</span><input type="radio" v-model="sex" value="woman">
{{sex}}
</form>
<h1>多选</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
sex:'man'//默认
}
})
</script>
- 多选
- 普通多选 v-model绑定普通的一个数组
- 单个多选 v-model绑定布尔值
<div id="app">
<input type="checkbox" value="01" v-model="hobby" />运动
<input type="checkbox" value="02" v-model="hobby" />唱歌
<input type="checkbox" value="03" v-model="hobby" />跳舞 {{hobby}}
多选中的单选
<input type="checkbox" v-model="isSelect">{{isSelect?'选择了':'没有选择'}}
</div>
<script>
new Vue({
el: "#app",
data: {
hobby: [],
isSelect:false
},
});
</script>
4.select的v-model
- 单选 v-model绑定普通的一个值
<div id="app">
<select name="" id="" v-model="selectData" >
<option value="1">福州</option>
<option value="2">厦门</option>
<option value="3">南京</option>
</select>
{{selectData}}
</div>
<script>
new Vue({
el:"#app",
data:{
selectData:1
}
})
</script>
- 多选 v-model绑定普通的一个数组
<div id="app">
<select name="" id="" v-model="selectData" multiple>
<option value="1">福州</option>
<option value="2">厦门</option>
<option value="3">南京</option>
</select>
{{selectData}}
</div>
<script>
new Vue({
el:"#app",
data:{
selectData:[]
}
})
</script>
5.v-model的修饰符
- number:用户输入值转换成数值类型(输入的得是数字)
- lazy:输入框输入后要在光标离开或者是按下回车键的时候更新数据
- trim:过滤用输入首尾空格
<div id="app">
<input type="text" v-model.number="value" />
<br />
<input type="text" v-model.lazy="value" />
<br />
<input type="text" v-model.trim="value" />
<br />
长度:{{value.length}}
<br>
{{typeof value}}---{{value}}
</div>
<script>
new Vue({
el: "#app",
data: {
value: 1,
},
});
</script>
