vue基础指令

数据渲染

对比 {{}} , v-text, v-html的区别

具体代码

页面效果

代码解析:

<!-- v-text 会将元素原本的内容覆盖 -->
<h3 v-text="message">借问妹纸何处有?</h3> 

<!-- v-text的值实质是js变量,而非字符串,因此可以执行表达式 -->
<h3 v-text="title + message">借问妹纸何处有?</h3>

<!-- {{}} 仅是渲染数据,并不会覆盖原来的数据 -->
<h3> {{ message }}借问妹纸何处有?</h3> 

<!-- 只是渲染文本,不会解析html -->
<h3 v-text="html_message"></h3>

<!-- 会对html进行解析 -->
<h3 v-html="html_message"></h3>

属性绑定

v-bind 用于对html标签的属性进行值绑定,可缩写为 :

具体代码

页面效果

代码解析:

<div>
    <!-- link只是字符串 -->
    <a href="link" v-text="title"></a>
</div>
<div>
    <!-- link是vm实例中的变量 -->
    <a v-bind:href="link" v-text="title"></a>
</div>
<div>
    <!-- v-bind的缩写 -->
    <a :href="link"><img :src="img" alt=""></a>
</div>

绑定事件

v-on绑定js中的事件,缩写形式为@

具体代码

v-on效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

5033
来自专栏分布式系统和大数据处理

基于Docker的持续集成方案(安装和配置Gogs源码仓库) - Part.4

不管技术还是生活,我现在都越来越喜欢简单、轻巧、专一、高效。因此我放弃了使用笨重、复杂的GitLab,而选择了这个轻量的源码管理工具。它的github地址是:g...

1415
来自专栏吴伟祥

了解Docker 原

docker入门教程是由王春生翻译的docer官方的相应资料,旨在为大家提供docker的中文资料,方便大家了解学习docker。 菜鸟教程:http://...

913
来自专栏古时的风筝

django开发个人简易Blog—nginx+uwsgin+django1.6+mysql 部署到CentOS6.5

前面说完了此项目的创建及数据模型设计的过程。如果未看过,可以到这里查看,并且项目源码已经放大到github上,可以去这里下载。 代码也已经部署到sina sea...

2519
来自专栏nummy

设置VMWARE通过桥接方式使用主机无线网卡上网

将IP地址、子网掩码、默认网关、DNS设置和主机相同网段中。 如此才能真正的实现虚拟机的上网,祝你好运,配置能成功!

722
来自专栏Core Net

ASP.NET Core 2.0 : 九.从Windows发布到CentOS的跨平台部署

1703
来自专栏finleyMa

docker学习系列4 简单总结 docker-curriculum

来源:https://docker-curriculum.com/ 这篇文章不错,可以作为第一篇 docker 的入门,我简单总结了下。顺便重温下之前的内容。...

913
来自专栏LIN_ZONE

easywechat的使用(laravel + easywechat 开发微信公众号(原创))

参考easywechat官方文档:https://easywechat.org/zh-cn/docs/

6612
来自专栏小程序之家

如何在小程序中实现 WebSocket 通信

在以前的文章中,我们介绍了HTTP通讯,这种通讯有一个缺点,如果我想从直接从服务器发消息给客户端,需要客户端先发起HTTP请求后服务器才能返回数据,且后续服务器...

6.3K4
来自专栏码农分享

Cordova 实现热更新

文章来源 http://blog.csdn.net/zhuzhiqiang_zhu/article/details/53608398 一、添加插件 说明:...

973

扫码关注云+社区