<!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. hibernate @OneToMany等注解设置查询过滤条件

    如实体PdOrg对象中有users对象,数据库user表有字段DEL_FLAG(0:删除:1:未删除): private List<User> users= new ArrayList&l ...

  2. 使用DD 创建SWAP

    1创建所需swap空间的文件 + records in + records out bytes ( MB) copied, 2.01386 s, 52.1 MB/s[root@web01 ~]# ll ...

  3. 在当前TestSuite/TestCase run之前先run另一个TestSuite/TestCase

    在当前的TestSuite/TestCase的Setup Script里面写上这段代码: import com.eviware.soapui.model.support.PropertiesMap l ...

  4. Thread类源码解析

    源码版本:jdk8 其中的部分论证和示例代码:Java_Concurrency 类声明: Thread本身实现了Runnable接口 Runnable:任务,<java编程思想>中表示该命 ...

  5. Jsの练习-数组常用方法 -forEach()

    forEach()  : 对数组进行遍历循环,对数组中的每一项运行给定函数. 格式: arr.forEach(function(value,index){}) <!DOCTYPE html> ...

  6. listener介绍

    当Web 应用在Web 容器中运行时, Web 应用内部会不断地发生各种事件: 如Web 应用被启动.Web 应用被停止,用户session 开始.用户session 结束.用户请求到达等, 通常来说 ...

  7. 三张图搞懂JavaScript的原型对象与原型链

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...

  8. 前端开发【第三篇: JavaScript基础】

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  9. Springboot添加定时任务

    请参考这篇文章:https://blog.csdn.net/ysp_0607/article/details/71430281

  10. 2017年5月17日20:14:29 rabbitmq 消费 异常信息无法处理 导致轮询

    同事说如果同步的配置的正确的话不会出现这种问题 只有异常的情况下才会,但是 我就真的出现了//TODO 等我有时间的时候再查查看. 如果是异步的出现这种问题的话 包进AmqpRejectAndDont ...