前端vue2和vue3中的基础之基础一

前端中平常用到最多的“单词”,没有这些造句就很困难的,正好复习到了,分享给小白的前端,虽然很简单,但是很实用的哟。
1.如果元素的内容需要随变量自动变化{{}}
2.如果元素的属性值需要随变量自动变化
3.控制一个元素显示隐藏 v-show

使用display:none隐藏,计算为false,右边计算为true显示,不改变DOM树结构

4.控制两个元素二选一显示 v-if v-else

使用删除元素方式隐藏(改变DOM树结构),true时保留v-if所在元素

5.多个元素多选一显示 v-if v-else-if v-else
6.只要反复生成多个相同结构的元素组成表时 v-for(:key=“唯一标识”)
7.只要绑定事件@相当于v-on:

$event既能获得对象事件,又传入自定义实参值
①@事件名=“事件处理函数(实参值,…)”//不需要传递任意实参值,则可以省略()
② <元素 @事件名=“函数名($event,自定义)”> methods:{函数名(e,自定义){}}

8.防止用户短暂看到{{}},v-cloak(在new Vue加载完前隐藏网页内容)和v-

text(<元素 v-text="‘welcom ${uname}’">)

9.只要绑定原始html代码片段内容,v-html

因为{{}}(相当于DOM中的textContent)不会把html片段交给网页翻译

10.如果元素的内容只在首次加载时绑定一次,之后都不会改变 v-once

new Vue扫描到v-once后,不会把v-once放入虚拟DOM树

11.保护{{}}中的内容不被翻译 v-pre

就在正文里面写{{}},不打算绑定

12.今后只要想获得表单元素的值或状态:v-model

就是双向绑定,用户通过页面上的操作,只能修改value属性值,v-model自动监视表单元素value属性值

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.