Vue的八个基础命令及作用

1.v-text

作用:获取data数据, 设置标签的内容,以纯文本进行显示v-text 会覆盖 标签中的内容,如果想要拼接数据,可以直接在v-text中拼接如果拼接的是数字:直接使用 "+"如果拼接的是字符串,需要使用与外部不同的引号进行包裹内容

2.v-html

作用:可以当做 v-text 一样使用,显示普通文本,设置元素的 innerHTML (可以向元素中写入新的标签)

3.v-on

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法

4.v-show

作用: v-show 需要一个 boolean 类型的值,根据值的变化,进行标签的显示和隐藏

5.v-if

作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

原理:会操作 DOM 元素,将元素删除或添加,而不是像 v-show 一样修改样式,使用场景:频繁切换使用 v-show,反之使用 v-if

6.v-bind

作用: 设置元素的属性 (比如:src,title,class,style传递json串

一次只能修改一个属性 v-bind:属性名="属性值": 属性名

7.v-for

作用: 根据数据生成列表结构,常与数组一起使用,进行遍历操作

v-for="item,index in arr1"

v-for="person in persons"

push():将元素追加进入数组

shift():将数组的起始元素删除

数组的长度变化,会同步更新到页面上,是响应式的

8 v-on

**作用:**可以向函数传递参数,事件修饰符,可以制定哪些方式触发事件,比如说按键,回车等

相关推荐
闲蛋小超人笑嘻嘻1 分钟前
非父子通信: provide和inject
前端·javascript·vue.js
周亚鑫2 分钟前
vue3 js代码混淆
开发语言·javascript·ecmascript
止观止16 分钟前
不止解构:深入掌握 ES6+ 对象与函数的高级语法糖
前端·javascript·es6
捻tua馔...22 分钟前
antd3的表单实现(HOC解决方案)
前端·javascript·react.js
AllinLin35 分钟前
JS中的call apply bind全面解析
前端·javascript·vue.js
POLITE340 分钟前
Leetcode 438. 找到字符串中所有字母异位词 JavaScript (Day 4)
javascript·算法·leetcode
创思通信41 分钟前
STM32F103C8T6采 DS18B20,通过A7680C 4G模块不断发送短信到手机
javascript·stm32·智能手机
海绵宝龙44 分钟前
Vue 中的 Diff 算法
前端·vue.js·算法
zhougl9961 小时前
vue中App.vue和index.html冲突问题
javascript·vue.js·html
止观止1 小时前
告别全局污染:深入理解 ES Modules 模块化与构建工具
javascript·webpack·vite·前端工程化·es modules