vue的常用指令

简介: vue的常用指令

1.使用双花括号( {{}} )对变量输出,内部可以写简单的表达式用于对数据的处理

f334453002824dc1bfb1f76004cd9b22.png43335be70c854134bfd378f397f01b6b.png

2..v-text相当于js的innerText,

41f6d62faf9e47b788b78ff9589e7055.png642f5a5ba0d14e51acc0e3f0d8331462.png

3.v-html:相当于js的innerHTML

58a8bf37782d41249e0f0be41807f638.png6371e29328304b2daf50a555d79663fd.png

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

34a9fadceee34c5b9dfff4e524cbe3e2.png

5.绑定class:操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们

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

986813907ac54aed8e48657096e7d9e3.png

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


8.v-if  v-else-if v-else:

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

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


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

v-ifvsv-show的区别:v-if是通过动态向dom里面插入或者是删除一个节点,来实现元素的显示隐藏的;二v-show:是通过css样式的display:none;来实现的。


10.v-pre:原样输出,不解析模板标签{{}}.


11.v-cloak:当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题.

 

[v-cloak]{
display:none;
}

584d5c6b9a284ab69648e36144519d91.png

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

3c437fca5c994a3aa645f3c770317c8e.gif

相关文章
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
8天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
43 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
30 1
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
38 1
vue学习第四章
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
31 1
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
32 1
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能

热门文章

最新文章