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


Posted in Javascript onJuly 13, 2017

这两天学习了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 属性上使用这种语法,框架本身就会报错,如下图所示:

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

上面的报错,除了提示不能使用双大括号语法以外,还告诉我们可以使用 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>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      html: '<div>div element</div>'
    }
  });
</script>

出于安全考虑,默认的数据绑定,会进行转义操作,屏蔽掉 html 标签。使用 v-html 指令,可以实现对文本内容不转义输出。这里的输出会替换掉目标标签的 innerHTML 代码中 p 标签中原本的文本将被替换,angular 中也有类似的 ng-bind-html。

双向绑定

<div id="app">
  <div>{{input}}</div>
  <textarea v-model="input"></textarea>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      input: 'two-way-binding'
    }
  });
</script>

跟 angular 一模一样,双向绑定依赖于 v-model 指令。修改 textarea 中的内容的时候, {{input}} 将让内容同步更新到对应的 div 元素中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JavaScript Split()方法
Dec 18 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 #Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 #Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 #Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 #Javascript
Angular如何引入第三方库的方法详解
Jul 13 #Javascript
详解如何构建Angular项目目录结构
Jul 13 #Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
PHP动态变静态原理
2006/11/25 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php获取excel文件数据
2017/04/21 PHP
JS event使用方法详解
2008/04/28 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
ES6的新特性概览
2016/03/10 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python 自动补全(vim)
2014/11/30 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Django实现快速分页的方法实例
2017/10/22 Python
python实现126邮箱发送邮件
2020/05/20 Python
Opencv求取连通区域重心实例
2020/06/04 Python
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
shell的种类有哪些
2015/04/15 面试题
电焊工岗位职责
2014/03/06 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
品德与社会教学反思
2016/02/24 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Element实现动态表格的示例代码
2021/08/02 Javascript
Java实现学生管理系统(IO版)
2022/02/24 Java/Android