<!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. 关于python中的GIL

    什么是GIL锁? GIL是Global Interpreter Lock的缩写,GIL中文可以称为全局解释器锁.提及到GIL,我们要知道它是在实现Python解析器(CPython)时所引入的一个概念 ...

  2. Redis基础入门

    学习redis之前,要了解NoSQL.. 一.NoSql概述 由于关系型数据库很难实现: 1.高并发读写 2.海量数据的高校率存储和访问 3.高可扩展性和高可用性 所以出现NoSql,(Not Onl ...

  3. centos7 eclispe 编译C++遇到的问题总结

    最近由于工作的需要,又开始回归之前已经遗忘了的技术.arm嵌入式这个古老的名词. 开始选择了linuxminit,开始的linuxminit17以前还可以,可是用了一下linuxminit19,发现r ...

  4. .NET界面控件DevExpress发布v18.2.8|附下载

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  5. [工控安全]西门子S7-400 PLC固件逆向分析(一)

    不算前言的前言:拖了这么久,才发现这个专题没有想象中的简单,学习的路径大致是Step7->S7comm->MC7 code->firmware,我会用尽量简短的语言把前两部分讲清楚, ...

  6. C# 连蒙带骗不知所以然的搞定USB下位机读写

    公司用了一台发卡机,usb接口,半双工,给了个dll,不支持线程操作,使得UI线程老卡. 懊恼了,想自己直接通过usb读写,各种百度,然后是无数的坑,最终搞定. 现将各种坑和我自己的某些猜想记录一下, ...

  7. c++ string 转double

    #include <iostream>#include <sstream> //使用stringstream需要引入这个头文件using namespace std; Type ...

  8. php的array数组 －－－－－－－方法foreach循环时候，利用数组里值的引用地址（& ）从而改变数组里的值

    /* * 把每个数组值后面都加个SQL然后返回数组 * foreach循环时候,直接用引用(&)的方式就能改变之前的数组 */public function array_foreach(){ ...

  9. JVM逃逸分析

    开启逃逸分析: -server -XX:+DoEscapeAnalysis -XX:+PrintGCDetail -Xmx10m -Xms10m 关闭逃逸分析: -server -XX:-DoEsca ...

  10. winform程序读取和改写配置文件App.config元素的值

    winform程序读取和改写配置文件App.config元素的值 2016-05-16 17:49 by newbirth, 2412 阅读, 0 评论, 收藏, 编辑 1 2 3 4 5 6 7 & ...