<!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. bash配色

    Table of Contents PS1格式 基本格式 其它可能的格式 PS1配色方案 配置文件 bash的命令提示符和终端外观由环境变量PS1定义 PS1格式 基本格式 \u 显示当前用户名 \h ...

  2. 理解什么是适配器(adapter)和接口(interface)

    ● 适配器(adapter) In computing, adapter is a hardware device or software component that converts transm ...

  3. [Leetcode 72]编辑距离 Edit Distance

    [题目] Given two words word1 and word2, find the minimum number of operations required to convert word ...

  4. 最短路径HDU3790（Dijkstra)

    准备考研,荒废了好多东西,希望做了正确的决定 /********************************************************* *author:chen xin * ...

  5. flv文件解析(纯c解析代码)

    参考链接: 1. FLV科普12 FLV脚本数据解析-Metadata Tag解析 https://blog.csdn.net/cabbage2008/article/details/50500021 ...

  6. 初读"Thinking in Java"读书笔记之第七章 --- 复用类

    组合语法 将对象引用置于新类中,即形成类的组合. 引用初始化方法 在定义处初始化. 在类的构造器中初始化. 在使用这些对象之前,进行"惰性初始化". 使用实例初始化. 继承语法 J ...

  7. console.log()中的运算与打印事件

    var p=function() { var i = 0; function b() { console.log(i--);//先打印再减一 //console.log(--i);先减一再打印 } f ...

  8. ATL与COM之间的关系、ATL的特点与基本使用方法

    http://blog.csdn.net/titilima/archive/2004/07/18/44273.aspx ATL,Active Template Library活动模板库 是一种微软程序 ...

  9. 如何将新建的项目完整的提交到gitlab上？

    描述: 使用idea开发工具新建了一个项目工程,此时此刻工程没有任何的版本控制,代码存放在本地磁盘中,如果需要直接将项目工程代码提交到gitlab上,该如何操作呢? 因为当前没有版本控制,不能像正常的 ...

  10. abp框架下,donet core配置swagger

    abp已经自带了swagger,但是我们的文档注释swagger并没有做处理,需要我们自己手动处理一下 1.对Application层配置xml输出,一般勾上xml,默认的地址就可以啦! 2.修改St ...