VUE 12种指令

简介: VUE 12种指令

首先是模板语法

使用双花括号( {{}} )对变量输出,如图

1.v-text 相当于js的innerText

2.v-html 相当于js的innerHTML

3.v-bind 动态绑定属性,简写是冒号( : )

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 classstyle 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组

:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名

4.v-on 绑定事件,简写是@

5.v-model

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

6.v-if

条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy[1] 值的时候被渲染

7.v-else-if v-else

是跟js中的if一样,v-if的else块和else-if块

8.v-show

根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

9.v-for

渲染数组列表, v-for 指令需要使用 item

in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

v-for 还支持一个可选的第二个参数,即当前项的索引。

10.v-pre

原样输出,不解析模板标签{{}}

11.v-cloak

当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。

12.v-once

只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。

相关文章
|
1天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
7 1
|
1天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
8 0
|
1天前
|
JavaScript
vue知识点
vue知识点
10 0
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
2天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
2天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
5 0
|
2天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
2天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
2天前
|
JavaScript
vue封装svg
vue封装svg
7 0