Vue.js 双向数据绑定

🌙
手机阅读
本文目录结构

VUE 是 View-Model-viewModel

其中 viewModel 起到粘合剂的作用,连接 view 层和 Model 层;

HTML 代码是 view 层的表现;Model 是数据的集合;

可以通过 v-model 在 input 等表单输入标签上,实现数据的双向绑定;

数据绑定就是将数据和视图相关联,互相影响,修改其中任一数据,都会立即体现到另外一层;

输出 hello word

首先介绍的一段话的渲染

{{message}}  以文本的方式渲染出来;

{{{message}}}   把message以HTML的方式渲染出来;注意写三个大括号的时候不要写成{{{}}这个了,webStorm2016亲测不能正常补全;

这么写和 angular 一样有个确定 FOUCS 的现象,就是没有加载数据的时候,此时的模版没有被替换,直接显示出{{messagr}}这样的输出,非常不利于体验;如果你仅仅是输出一段话,那么推荐你可以用下面这种的写法;

v-text=”message”

v-html=”message”

这样的写法;

写在大括号里的这种写法也叫插值,v-*这种的写在在 vue 里叫做指令;

{{}}插值的其他用法

1、支持忽略同步

2、支持作为自定义属性输出

3、支持表达式(注意是表达式,不是语句;三目运算符是表达式,if 语句是属于语句,不属于运算符)

4、支持过滤器;

一、支持忽略同步;

如果你仅仅只是想输出数据的初始值,那么并不推荐你这么做,推荐你下面这种的写法

{{*messagr}} 这种渲染的时候,就只会渲染你第一次的值,后面修改并不会改变了;{{{*}}} 这也是同样的用法;

二、支持作为自定义属性输出

下面这种的用法也可以输出类名,ID 之类的

<p data-text="{{classText}}">测试</p>

三、支持表达式的写法

注意一:if 是属于语句,不属于表达式;
注意二:如果用三木运算符,请写完整,否则容易出问题;

四、支持过滤器;

注意有些教程的转换大写用的是 toUpperCase,这个方法是错误的,正确的是 uppercase; 版本 V2.0+’


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>