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. Hibernate 之 HQL

    通过对Hibernate框架的学习,已经慢慢的对Hibernate有了进一步的了解,接下来我们要说的是HibernateQusery Language(HQL),如果你正在学习SSH框架,那SQL对你 ...

  2. C项目实践--家庭财务管理系统

    1.功能需求分析 家庭财务管理系统给家庭成员提供了一个管理家庭财务的平台,系统可以对家庭成员的收入和支出进行增加,删除.修改和查询等操作,并能统计总收入和总支出.其主要功能需求描述如下: (1)系统主 ...

  3. 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

    有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  4. jquery中的工具函数 Utilities

    noConflict(deep) 释放$和Jquery的控制权 isFunction(obj) isArray(obj) isWindow(obj) isNumeric(obj) type(obj) ...

  5. linkerd——针对java的为微服务提供可靠性的proxy,服务发现重试LB等

    Buoyant是一家云服务公司,宣布了Linkerd(发音为“linker-DEE”)的一周年纪念日,这是一个基于微服务的原生云应用程序的开源“服务网格”项目.诚如公告所述: 在20世纪90年代,TC ...

  6. 洛谷 P1072 Hankson 的趣味题 —— 质因数分解

    题目:https://www.luogu.org/problemnew/show/P1072 满足条件的数 x 一定是 a1 的倍数,b1 的因数,a0/a1 与 x/a1 互质,b1/b0 与 b1 ...

  7. appium学习【四】:第一个appium脚本

    #coding=utf-8 import os import HTMLTestRunner import unittest import time import sys from appium imp ...

  8. 2-6 Opencv模块组织结构

    https://opencv.org/releases.html https://sourceforge.net/projects/opencvlibrary/files/opencv-win/3.4 ...

  9. E20170516-gg

    accelerator  n. 加速器;油门 oscillator  n. 振荡器; 振子; oscillate  vt. 使振荡,使振动  vi. 持续周期性地摆动; frame  n. 框架; 边 ...

  10. bzoj 1699: [Usaco2007 Jan]Balanced Lineup排队【st表||线段树】

    要求区间取min和max,可以用st表或线段树维护 st表 #include<iostream> #include<cstdio> using namespace std; c ...