vue.js数据绑定的方法（单向、双向和一次性绑定）_vue数据绑定一次 - CSDN文库

130 浏览量更新于2023-03-16 评论收藏 56KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue.js数据绑定的方法（单向、双向和一次性绑定）数据绑定的方法（单向、双向和一次性绑定）

这两天学习了vue.js数据绑定这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

前言前言

感觉 vue 的很多方面的内容，都参考了 angular 的东西，数据绑定方面，更是赤裸裸的“抄袭”。对照来看，更有助于我们学习和理解框架本身

透露出来的思想，而非框架本身。

一、单向绑定一、单向绑定

（一）Mustache 语法，双大括号 {{}}（html 内字符串绑定）

<div id="app">

<p>{{text}}</p>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

text: 'text content'

}

});

</script>

但是，这种双大括号语法，只能用于 html 内部的字符串，不能用于绑定 html 的属性（如 title、disabled、checked 等），angular亦如是。

（二）v-bind 指令（html 属性绑定）

<div id="app">

<p title={{title}}></p>

<p v-bind:title="title">title属性绑定，html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>

<p :title="title">“:” 是 “v-bind” 的快捷方式</p>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

title: 'title content'

}

});

</script>

某些框架如 Ember.js 支持在 html 属性上面使用双大括号语法，如 title={{title}}，但是如果像上面，在 vue.js 的 html 属性上使用这种语法，框

架本身就会报错，如下图所示：

上面的报错，除了提示不能使用双大括号语法以外，还告诉我们可以使用 v-bind 或者 shorthand，也就是 v-bind 的缩写 :。这一点上，vue 还

是和 angular 的 ng-bind 非常相似。

一次性绑定一次性绑定

<div id="app">

<p v-once>{{once}}</p>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

once: 'once content'

}

});

app.once = 'changed content';

</script>

原本 angular 不支持一次性绑定的，而过分的使用数据绑定，将严重影响应用性能，angular 中 bindonce 这个第三方模块解决了这个问题。而

vue 通过 v-once 实现了框架本身对一次性绑定的原生支持。

## 不进行 html 转义

<div id="app">

<p v-html="html">不转义的绑定（直接输出 html）</p>

</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38700240

粉丝: 2
资源: 976

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈