VUE大神的成长之路--模板语法

一:插值
(1)文本
<span>Message: {{ msg }}</span>
可以使用v-once指令执行一次性的插值,当数据变化时,插值处内容不会更新,请留心,这样会影响到该节点上所有的数据绑定
<span v-once>This will never change: {{ msg }}</span>
(2)纯HTML
<div v-html="rawHtml"></div>
你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。
(3)属性
{{}}---不能在html属性中使用,应使用v-bind(简写::XXX),
<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:
<button v-bind:disabled="someDynamicCondition">Button</button>
二:指令:指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上
(1)参数v-bind v-on
(2)修饰符:用于指出一个指令应该以特殊方式绑定
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
三:过滤器:过滤器可以用在两个地方:mustache 插值和 v-bind 表达式
{{ message | capitalize}}

<div v-bind:id="rawId | formatId"></div>

*** Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。

过滤器还可以串联
{{ message | filterA | filterB }}

过滤器是JavaScript函数,因此可以接受参数
{{ message | filterA('arg1',arg2)}}
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
四:缩写
v-bind:href="url" ---- :href="url"
v-on:click="clickSome" --- @click="clickSome"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,474评论 0 29
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,088评论 19 139
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,693评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,802评论 4 129
  • 今天11:30起床… 读了李笑来专栏,看到留言区有一句:你感觉时间不够用,是因为现在的你在还债。 看了得到上的知识...
    简洁一方阅读 1,468评论 0 0

友情链接更多精彩内容