html代码
<div id="app">
<p>{{message}}</p>
<span>message1</span> <input v-model="message">
<span>message2</span> <input v-model="message">
</div>
javascript代码
var vm = new Vue({
el: "#app",
data: {
message: ''
},
methods: {}
});

说明

1) v-model 是用在表单中的指令

2) 双向绑定:都是指的是类似input这样的,自带change事件的表单项目

3) p标签中的message发生了变化,input的value的变化改变了message,从而使视图发生了相应的变化。

VUE 入坑系列 一 双向绑定的更多相关文章

  1. VUE 入坑系列 一 事件

    html代码 <div id="app"> <button v-on:click="counter += 1">加1</butto ...

  2. VUE 入坑系列 一 基础语法

    html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...

  3. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  4. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  5. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  6. gulp入坑系列(2)——初试JS代码合并与压缩

    在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...

  7. 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

    2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...

  8. 2-STM32带你入坑系列(点亮一个灯--Keil)

    1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...

  9. 1-STM32带你入坑系列(STM32介绍)

    由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车 ...

随机推荐

  1. Linux中的mysql.redis

    1,Linux上的mysql MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源 ...

  2. HashMap的数据机构是什么样的?

    参考:http://www.cnblogs.com/ITtangtang/p/3948406.html

  3. 深入研究java.lang.Object类

    前言:Java的类库日益庞大.所包括的类和接口也不计其数.但当中有一些非常重要的类和接口,是Java类库中的核心部分.常见的有String.Object.Class.Collection.ClassL ...

  4. extends && implements

     final声明的类不能被继承 方法的重写(@Override):  两同两小一大原则: 方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型(java里无论怎样都对) 子类抛出异常小于等于 ...

  5. Lightoj 1011 - Marriage Ceremonies

    You work in a company which organizes marriages. Marriages are not that easy to be made, so, the job ...

  6. HDU1151 Air Raid —— 最小路径覆盖

    题目链接:https://vjudge.net/problem/HDU-1151 Air Raid Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  7. HDU2819 Swap —— 二分图最大匹配

    题目链接:https://vjudge.net/problem/HDU-2819 Swap Time Limit: 2000/1000 MS (Java/Others)    Memory Limit ...

  8. HDU1698 Just a Hook —— 线段树 区间染色

    题目链接:https://vjudge.net/problem/HDU-1698 In the game of DotA, Pudge’s meat hook is actually the most ...

  9. YTU 2837: 编程题B-狐狸算卦

    2837: 编程题B-狐狸算卦 时间限制: 1 Sec  内存限制: 128 MB 提交: 76  解决: 52 题目描述 注:本题只需要提交需要完善部分的代码,请按照C++方式提交. 小熊和狐狸是邻 ...

  10. 一步一步学Silverlight 2系列(4):鼠标事件处理

    一步一步学Silverlight 2系列(4):鼠标事件处理   概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言V ...