前端系列-Vue3基本语法-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端系列-Vue3基本语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

# 插值操作
1、插值：{{}}
2、指令：v-
 在{{}}和v-指令进行数据绑定时，支持js单个表达式
 {{msg}} 数据只第一次时显示，不响应式
 {{msg}} 内容原封不动的展示
 相当于插值表达式的功能
 可以解析标签
# 绑定属性
1、指令：v-bind
 插值{{}}只能用于在模板内容中，用于动态内容绑定
 如果希望元素的属性也可以动态绑定，需要通过v-bind指令
 "v-bind" 缩写 ":"
 绑定有意义元素中的属性
 绑定class属性，四种用法（字符串，数组，对象，方法）
 绑定style属性
# 计算属性
 计算属性关键词：computed
 计算属性处理一些复杂逻辑时是有用的
# 事件监听
 绑定事件监听器指令：v-on
 缩写：@
 参数：$event
 v-on 事件修饰符号
 .stop 阻止事件冒泡
 .self 当事件在该元素本身触发时才触发事件
 .capture 添加事件侦听器是。使用事件捕获模式
 .prevent 阻止默认事件
 .once 事件只触发一次
# 条件判断
 v-if 是"真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
 v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换
 v-if v-else
 v-if v-else-if v-else
# 循环遍历
 遍历指令：v-for
 遍历数组：v-for="{item,[index]} in 数组"
 遍历对象：v-for="{value,[key],[index]} in 对象"
 vue列表循环需加:key="唯一标识" 唯一标识可以是item里面id, index等，因为vue组件高度复用增加key可以标识组件的唯一性，为了更好地区别各个组件key的作用主要是为了高效的更新虚拟DOM，使用diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比
# 其他语法
1、指令：v-model
 v-model指令的本质是：它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理，同时v-model会忽略所有表单元的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。然后当输入事件发生时，实时更新vue实例中的数据
 实现原理：<input -v-bind:value="message" v-on:input="message=$event.target.value"/>
 v-model的修饰符号：
 .lazy 懒加载修饰符
 .number 修饰符让其转换为number类型
 .trim 修饰符可以自动过滤掉输入框的首尾空格
文章来源地址https://www.toymoban.com/news/detail-491843.html