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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 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
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python箱型图处理离群点的例子
2019/12/09 Python
pandas 对group进行聚合的例子
2019/12/27 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
酒店节能降耗方案
2014/05/08 职场文书
法人委托书
2014/07/31 职场文书
人力资源管理求职信
2014/08/07 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
租车协议书范本2014
2014/11/17 职场文书
个人先进材料范文
2014/12/30 职场文书
写给父母的感谢信
2015/01/22 职场文书
行政复议决定书
2015/06/24 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers