vue入门（first day）

Sunneyz

于 2020-06-09 22:13:51 发布

阅读量211

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Sunneyz/article/details/106651472

本文深入探讨了Vue.js中的六个核心指令：v-html用于插入HTML，v-model实现表单的双向数据绑定，v-show和v-if控制元素显示，v-on绑定事件，v-for遍历数组，以及v-bind用于绑定属性。通过这些指令，Vue提供了强大的功能，让开发者能更高效地进行前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 创建一个Html文件
2 引入vue.js
在这里插入图片描述
3 Vue 应用会将其挂载到一个 DOM 元素上 (对于下面这个例子是 #app) 然后对其进行完全控制。

4 指令

一：v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
在这里插入图片描述
二：v-model
这个指令用于在表单上创建双向数据绑定。

三：v-show
根据条件展示元素当为false时 v-show元素会始终被渲染并保存在dom中
它只是简单的切换css的dispaly属性。
v-if
可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。与v-show的不同在于如果v-if的值是false，则这个元素被销毁，不在dom中

在这里插入图片描述
四：v-on:click
绑定事件 v-on:click 是个方法可以简写成@ 方法要在methods中写

五：v-for
遍历数组来进行渲染

六：v-bind
绑定一个变量也可以直接写成冒号 :

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。