<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue--表单与组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
<h1> input 和 textarea 元素中使用 v-model 实现双向数据绑定：</h1>
<p>input输入：{{message}}</p>
<input v-model="message" pliceholder="....">
<p>textarea输入：{{message2}}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>

<h1>复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：</h1>
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>

<h1>select双向数据绑定：</h1>
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>

<!-- v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：-->
<input v-model.lazy="msg" >
<!--如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）-->
<input v-model.number="age" type="number">
<!--如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：-->
<input v-model.trim="msg">
</div>

<!--自定义组件-->
<div id="component">
<runoob>
</runoob>
</div>

<div id="prop">
<child message="hello!"></child>
</div>

<div id="proping">
<div>
<input v-model="parentMsg"><br>
<child v-bind:message="parentMsg"></child>
</div>
</div>

<div id="proptodo">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item">

</todo-item>
</ol>
</div>

<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body>
<script>
//父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
//我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
//使用 $on(eventName) 监听事件
//使用 $emit(eventName) 触发事件
//另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
//以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',

//这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>

<script>
//prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#proptodo',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>

<script>
//用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
Vue.component('child',{
//声明props
props:['message'],
template:'<span>{{message}}</span>'
})
new Vue({
el:'#proping',
data:{
parentMsg:'fuzujianneirong'
}
})
</script>
<script>
var sss=new Vue({
el:'#app',
data:{
message:'Runoob',
message2:'baidu.com',
checked:false,
checkedNames:[],
selected:''
}

})

</script>
<script>

<!--自定义组件-->

<!--全局组件语法格式Vue.component(tagName, options)--
<!--tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：==>
Vue.component('runoob',{
template:'<h1>自定义组件</h1>'
})
var Child={
template:'<h1>悟空</h1>'
}
new Vue({
el:'#component',
components:{
//<runoob>将只在父模板可用
'runoob':Child
}
})
</script>

<script>
// 注册
Vue.component('child', {
// 声明 props prop 是父组件用来传递数据的一个自定义属性。
//父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#prop'
})
</script>
</html>

vue-----表单与组件的更多相关文章

  1. Vue表单和组件

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

  2. vue表单和组件使用

    表单: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

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

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

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

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

  5. Vue表单控件绑定

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

  6. vue_表单_组件

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

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

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

  8. vue表单校验（三）

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

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

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

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

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

随机推荐

  1. cdh日常维护常见问题及解决方案

    为数据节点添加新硬盘 - 挂载硬盘到指定文件夹.如`/dfs_diskb`: - 打开cloudera manager -> hdfs -> 配置 -> DataNode -> ...

  2. canvas背景动画

    偶然反驳可看到博客背景的炫酷效果  觉得很新奇就去查看了一下源码  结果在git上找到了  记录一下 https://github.com/hustcc/canvas-nest.js/

  3. solrcloud jsonfacet分组聚合 unique计数不准确

    jsonfacet分组聚合查询 unique.hll函数问题: 对不同的值进行估算,并非准确的值, 优点:节省内存消耗,用分组算法对不同的值count进行估算 缺点:无法准确统计count(disti ...

  4. docker学习常用指令---第五章节

    前面我们了解了docker的基本概念,和docker镜像,端口相关的内容.在具体的实际操作过程中,我们需要了解一些相关的docker操作指令. 一.Docker save指令 指令功能:将指定镜像保存 ...

  5. java基础知识—继承

    1.不能被继承的父类成员: private成员.子类与父类不在同包,使用默认访问权限的成员.构造方法. 2.访问修饰符: 访问修饰符        本类       同包      子类     其它 ...

  6. 网站优化之Apache2.4GZIP功能

    现在主流浏览器都支持资源文件压缩传输(通过设置http header的Content-Encoding=gzip). 网站优化之一就是开通服务器端的gzip功能,通过对资源文件压缩传输,加快了页面响应 ...

  7. 信息技术手册可视化进度报告 基于jieba的关键字提取技术

    在这一篇博客之前,我已经将word文件中的内容通过爬虫的方式整理到数据库中了,但是为了前台展示的需要,还必须提取出关键字,用于检索. 我用的是jieba分词,GitHub地址:https://gith ...

  8. SLAM for dummies中文翻译

    1.简介 本文的主要目的是简单介绍移动机器人领域中广泛应用的技术SLAM(同步定位与地图绘制)的理论基础以及应用细节.虽然目前存在很多关于SLAM技术的方方面面的论文,但是对于一个新手来说,仍然需要花 ...

  9. 学号 20175223 《Java程序设计》第 6 周学习总结

    目录 教材学习内容总结 代码调试中的问题和解决过程 1. 编译运行时,跳过 Scanner.nextLine() 语句. 2. 提示 NullPointerException 错误. [代码托管] 学 ...

  10. 万维网(WWW)

    简介:万维网(WWW)是 Internet上最为普及的一种应用服务,它是由成千上万万维网站点(简称网站)组成的一个联机信息存储系统. 万维网的工作模式采用客户机/服务器方式,在用户计算机上运行浏览器作 ...