前言：学习前端的小伙伴肯定对VUE很是熟悉吧，今天叶秋学长带领大家一起学习VUE基础语法，不论你是前端小白还是在开发领域的工作者，叶秋学长都希望这篇文章对大家有所帮助！！！
一、绑定事件
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指令来实现单元素和数据的双向绑定
<divid="app"><inputtype="text"v-model="username"> {{username}} </div><script>newVue({ el:"#app", data:{ username:'默认' } }) </script>
2.v-model原理
绑定value,绑定input事件
<divid="app"><inputtype="text":value="value"@input="getValue($event)"> {{value}} </div><script>newVue({ el:"#app", data:{ value:'默认值' }, methods: { getValue(e){ console.log(e.target.value) this.value=e.target.value } }, }) </script>
3.单选和多选的v-model
单选
v-model绑定普通的一个值
<divid="app"><h1>单选</h1><formaction=""><span>男</span><inputtype="radio"v-model="sex"value="man"><span>女</span><inputtype="radio"v-model="sex"value="woman"> {{sex}} </form><h1>多选</h1></div><script>newVue({ el:'#app', data:{ sex:'man'//默认 } }) </script>
多选
普通多选
v-model绑定普通的一个数组
单个多选
v-model绑定布尔值
<divid="app"><inputtype="checkbox"value="01"v-model="hobby"/>运动 <inputtype="checkbox"value="02"v-model="hobby"/>唱歌 <inputtype="checkbox"value="03"v-model="hobby"/>跳舞 {{hobby}} 多选中的单选 <inputtype="checkbox"v-model="isSelect">{{isSelect?'选择了':'没有选择'}} </div><script>newVue({ el: "#app", data: { hobby: [], isSelect:false }, }); </script>
4.select的v-model
单选
v-model绑定普通的一个值
<divid="app"><selectname=""id=""v-model="selectData"><optionvalue="1">福州</option><optionvalue="2">厦门</option><optionvalue="3">南京</option></select> {{selectData}} </div><script>newVue({ el:"#app", data:{ selectData:1 } }) </script>
多选
v-model绑定普通的一个数组
<divid="app"><selectname=""id=""v-model="selectData"multiple><optionvalue="1">福州</option><optionvalue="2">厦门</option><optionvalue="3">南京</option></select> {{selectData}} </div><script>newVue({ el:"#app", data:{ selectData:[] } }) </script>
5.v-model的修饰符
number:用户输入值转换成数值类型(输入的得是数字)
lazy:输入框输入后要在光标离开或者是按下回车键的时候更新数据
trim:过滤用输入首尾空格
<divid="app"><inputtype="text"v-model.number="value"/><br/><inputtype="text"v-model.lazy="value"/><br/><inputtype="text"v-model.trim="value"/><br/> 长度:{{value.length}} <br> {{typeof value}}---{{value}} </div><script>newVue({ el: "#app", data: { value: 1, }, }); </script>
博主也是一名CSDN博主「叶秋学长」，发布了许多全栈技术文章，原文链接：https://blog.csdn.net/m0_63722685/article/details/125456024，如果不足之地，希望小伙伴们多多指教
