1. 表单：
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.         <meta charset="UTF-8">
  7.         <title></title>
  8.         <style type="text/css">
  9.             .div1{
  10.                 width: 300px;
  11.                 height: 300px;
  12.                 margin: 0 auto;
  13.                 background: skyblue;
  14.             }
  15.         </style>
  16.         <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  17.     </head>
  18.     <body>
  19.         <div id="app">
  20.             <h2>输入框</h2>
  21.             <input type="text" v-model='inputText' name="" id="" value="" />
  22.             <p>{{inputText}}</p>
  23.             <hr />
  24.             <h2>单选框</h2>
  25.  
  26.             <input type="radio" v-model='sex' name="sex" id="" value="男" />
  27.             <input type="radio" v-model='sex' name="sex" id="" value="女" />
  28.             <p>{{sex}}</p>
  29.  
  30.             <hr />
  31.             <h2>复选框</h2>
  32.             <input type="checkbox" v-model='fx' name="man" id="" value="男" />
  33.  
  34.             <input type="checkbox" v-model='fx' name="girl" id="" value="女" />
  35.             <p>{{fx}}</p>
  36.  
  37.             <hr />
  38.  
  39.             <h2>选项</h2>
  40.             <select name="city" v-model='city'>
  41.                 <option value="广州">广州</option>
  42.                 <option value="深圳">深圳</option>
  43.                 <option value="上海">上海</option>
  44.             </select>
  45.             <p>{{city}}</p>
  46.  
  47.             <hr />
  48.             <textarea v-model='longtext' name="txt" rows="" cols=""></textarea>
  49.             <p>{{longtext}}</p>
  50.         </div>
  51.         <script type="text/javascript">
  52.             var app = new Vue({
  53.                 el:'#app',
  54.                 data:{
  55.                     inputText:'',
  56.                     sex:'',
  57.                     fx:[],
  58.                     city:'',
  59.                     longtext:'123'
  60.                 },
  61.                 compute:{
  62.  
  63.                 }
  64.                 methods:{
  65.  
  66.                 }
  67.             })
  68.         </script>
  69.     </body>
  70. </html>
  71.  
  72. 组件：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <headnav user='xx'></headnav>
  11.             <indexmain @send='changeChild'></indexmain>
  12.             <indexfooter></indexfooter>
  13.  
  14.             <headnav :user='username'></headnav>
  15.  
  16.             <h1>{{childContent}}</h1>
  17.         </div>
  18.  
  19.         <script src="js/indexComponent.js" type="text/javascript" charset="utf-8"></script>
  20.         <script type="text/javascript">
  21.             Vue.component('headnav',{
  22.                     template:'<div><h1>欢迎{{user}}</h1></div>',
  23.                     props:['user'],
  24.                     data:function(){
  25.                         return {
  26.                             msg:'headnav'
  27.                         }
  28.                     }
  29.             })
  30.  
  31.             var app = new Vue({
  32.                 el:'#app',
  33.                 data:{
  34.                     username:'隔壁老王',
  35.                     childContent:''
  36.                 },
  37.                 methods:{
  38.                     changeChild:function(value){
  39.                         console.log(value)
  40.                         this.childContent = value
  41.                     }
  42.                 }
  43.             })
  44.  
  45.             //组件：要想父组件传递数据给子组件，那么需要使用props
  46.             //如果想要子组件将数据传递给父父组件，那么需要使用自定义事件，$emit(事件名称，事件内容)，进行触发，监听：@事件名称=‘要执行的函数’
  47.  
  48.         </script>
  49.     </body>
  50. </html>

vue表单和组件使用的更多相关文章

  1. Vue表单和组件

    一.表单 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素. <input v-model="message" ...

  2. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  4. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  5. vue_表单_组件

    表单.组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  6. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

  7. vue表单校验（三）

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  8. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  9. meta生成器 —— 表单元素组件

    手写代码? meta(json)需要手写吗?别闹,手写多麻烦呀,我这么懒怎么可能手写,这辈子都别想,所以要弄个工具出来,咱们说干就干. 这个工具,说白了本身就是一个表单,一个meta属性对应一个met ...

随机推荐

  1. maven 3.6的安装

    呵呵,按网上的步骤不能安装maven3.6,所以降低版本.因为3.6的没有bin文件夹. 下载地址:https://archive.apache.org/dist/maven/maven-3/3.5. ...

  2. C# 时间戳的相关操作

    一般的 时间戳 格式分为两种 即 10位(秒)时间戳 与 13位(毫秒)时间戳 时间戳 类型也分为两种 即 本地时间戳 与 世界统一(UTC)时间戳 废话不多说,直接上代码: 一.时间戳获取方法 // ...

  3. json入门初体验

    json是JavaScript对象表示法,也是轻量级的文本数据交互格式,独立于语言,能够自我描述 json文本格式在语法上与创建JavaScript对象代码相同,多以json不需要解析器,js程序能够 ...

  4. C#2匿名方法中的捕获变量

    乍一接触"匿名方法中的捕获变量"这一术语可能会优点蒙,那什么是"匿名方法中的捕获变量"呢?在章节未开始之前,我们先定义一个委托:public delegate  ...

  5. 纯 CSS 实现幻灯片播放

    介绍:   今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...

  6. Scala 多继承问题

    多继承问题: object LoadIssueDemo extends App { import java.io.PrintWriter trait Logger { def log(msg: Str ...

  7. Ubuntu18.04安装好MySQL5.7后，root账号登录密码问题

    不知道从哪个版本开始,在Ubuntu上用apt安装MySQL后,不会提示让你设置密码了. 安装MySQL5.7 sudo apt install mysql-server -y 然后找到MySQL的配 ...

  8. 在chrome浏览器安装各种前端，后台插件

    如果想要在chrome安装插件,首先得先有应用chrome的商城,但是默认情况下是没有应用商店: 默认情况下下面这个界面是空白的,没有任何东西,第一步就先安装[谷歌访问助手] 安装步骤 第一步: 下载 ...

  9. python编程基础之二十七

    列表生成式:[exp for iter_var in iterable] 同样也会有字典生成式,集合生成式,没有元组生成式,元组生成式的语法被占用了 字典生成式,集合生成式,就是外面那个括号换成{}  ...

  10. MacOS 安装MysqlDB 问题解决方案（ 解决 IndexError: string index out of range）

    pip install MySQL-python时报错如下: Command "python setup.py egg_info" failed with error code 1 ...