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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
VSCode搭建Vue项目的方法
Apr 30 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php多重接口的实现方法
2015/06/20 PHP
php array_map()函数实例用法
2021/03/03 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
酒店应聘自荐信
2013/11/09 职场文书
企业授权委托书范本
2014/09/22 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
乐山大佛导游词
2015/02/02 职场文书
军训新闻稿范文
2015/07/17 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书