<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

     <div id="app">

         <h4>{{msg}}</h4>

         <!-- v-bind只能实现数据的单向绑定，从M 自动绑定到 V，无法实现数据的双向绑定 -->

         <!-- <input type="text" v-bind:value="msg" style="width: 100%"> -->

         <!-- 使用 v-model 指令，可以实现 表单元素 和 Model 中数据的双向数据绑定 -->

         <!-- 注意：v-model 只能运用在 表单元素中 -->

         <!-- 常见的表单元素： input(radio,text,address,email......)  select  checkbox  textarea -->

         <input type="text" value="msg" style="width: 100%;" v-model="msg">

     </div>

     <script>

        // 创建 Vue 实例，得到 ViewModel

       var vm =  new Vue({

         el:'#app',

         data:{

           msg:'大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'

         },

         methods:{}

       });

     </script>

   </body>

 </html>

第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定的更多相关文章

  1. 第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用

    7 讲解v-cloak.v-text.v-html的基本使用 <!DOCTYPE html> <html lang="en"> <head> & ...

  2. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门--14 使用v-model实现计算器的案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--12 事件修饰符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 【转载】VMware Workstation网络说明

    1.什么是bridged(桥接模式)?答:在这种模式下,使用VMnet0虚拟交换机,虚拟操作系统就像是局域网中的一台独立的主机,与宿主计算机一样,它可以访问网内任何一台机器.在桥接模式下,可以手工配置 ...

  2. 【VS开发】【C/C++开发】C++参数策略传递内存

    参数策略 如果函数的参数是一个指针,不要指望用该指针去动态申请内存.如下: void GetMemory(char *p, int num) { p = (char *)malloc(sizeof(c ...

  3. 【并行计算-CUDA开发】GPU 的硬体架构

    GPU 的硬体架构   这里我们会简单介绍,NVIDIA 目前支援CUDA 的GPU,其在执行CUDA 程式的部份(基本上就是其shader 单元)的架构.这里的资料是综合NVIDIA 所公布的资讯, ...

  4. 【VS开发】EasySize使用设置CFormView空间自适应view窗口大小

    1.在stdafx.h中引用EasySize.h头文件(同时将EasySize.h放到你的程序目录中) 2.在类定义中添加DECLARE_EASYSIZE [cpp] view plain copy ...

  5. nginx多线程高并发

    直接上图 Master-Worker模式 1.Nginx 在启动后,会有一个 master 进程和多个相互独立的 worker 进程. 2.接收来自外界的信号,向各worker进程发送信号,每个进程都 ...

  6. ssm框架的小总结

    一.mybatis框架 mybatis框架主要就是完成持久层的实现,简化了持久层的开发, 1.首先是配置文件的编写,我们这里就命名为mybatis-config.xml,先配置文件头,然后加载连接数据 ...

  7. airflow原理

    官网: http://airflow.apache.org/installation.html 原理: https://www.cnblogs.com/cord/p/9450910.html 原理介绍 ...

  8. 小菜鸟之HTML第三课

    jquery的引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. MySQL优化心得

    一打开科技类论坛,最常看到的文章主题就是MySQL性能优化了,为什么要优化呢? 因为: 数据库出现瓶颈,系统的吞吐量出现访问速度慢 随着应用程序的运行,数据库的中的数据会越来越多,处理时间变长 数据读 ...

  10. llinux 进阶篇

    df 查看磁盘空间 df -h (加了之后就有单位了) free 指令,查看内存使用情况 free -m(表示一mb单位进行查看) head 查看一个文件的前n行,如果没有n 就默认为前10行 hea ...