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的进程优先级NI和PR到底有什么区别

    Linux的进程优先级NI和PR到底有什么区别 - 51CTO.COM http://os.51cto.com/art/201605/511559.htm

  2. ABAP 读取服务器CSV文件到内表

    DATA: BEGIN OF gs_data , cola TYPE string, colb TYPE string, ... END OF gs_data, gt_data LIKE TABLE ...

  3. ABAP 邮件

    function zint_send_email.*"-------------------------------------------------------------------- ...

  4. HDU1281 棋盘游戏 —— 二分图最大匹配 + 枚举

    题目链接:https://vjudge.net/problem/HDU-1281 棋盘游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit ...

  5. jqplot配置参考

    jqPlot整的来说有三个地方需要配置.格式如:    $.jqplot(‘target’, data, options);target:要显示的位置.data:显示的数据.options:其它配置 ...

  6. 进程、轻量级进程(LWP)、线程

    进程.轻量级进程(LWP).线程 进程:程序执行体,有生命期,用来分配资源的实体 线程:分配CPU的实体. 用户空间实现,一个线程阻塞,所有都阻塞. 内核实现,不会所用相关线程都阻塞.用LWP实现,用 ...

  7. Lightoj 1068(数位DP)

    求一段区间中被k整除,各个位数相加之和被k整除的数的个数. 这不是重点,重点是k太大了,最大值有10000,所以不能直接开那么大的数组. 仔细分析一下可以发现,由于数最大是2的31次方(2147483 ...

  8. 《The Unreasonable Effectiveness of Recurrent Neural Networks》阅读笔记

    李飞飞徒弟Karpathy的著名博文The Unreasonable Effectiveness of Recurrent Neural Networks阐述了RNN(LSTM)的各种magic之处, ...

  9. 关于XAMPP Apache无法启动问题解决方案

    安装好XAMPP后,启动Apache服务启动失败,然后从xampp安装目录下执行apache_start.bat文件,如下图 显示443端口被占用. 解决方法: 启动cmd,输入netstat -a  ...

  10. spring boot+mybatis报错mapper无法注入

    搭建spring boot项目时启动出现的问题,先来看异常片段: Error starting ApplicationContext. To display the conditions report ...