前言： 原本想的是最近白天学习晚上总结和大家分享，但这两天作业太多了，所以这两天没更新。
今天学习的是vue的表单的一些操作及组件的学习，首先我们在做项目时，表单功能是必不可少的，这也体现了它的重要性，vue表单要比使用JavaScript实现要简单的许多，且能够通过v-model实现数据的双向绑定，主要就是对表单各种组件的控制。例如Input，textarea，select等。
然后谈谈组件，组件可以扩展 HTML 元素，封装可重用的代码（这是官方定义），简单说就是定义一个组件，然后其他模块也可以调用，就像我们写个外部函数一样，其他都可以调用，这样使项目实现更加简单。
Vue.js 表单
输入框
包括 input 和 textarea ，且使用 v-model 实现双向数据绑定。
<!-- 输入框 -->
<p>{{message}}</p>
<input type="text" v-model='message'>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
单选按钮
单选按钮的双向数据绑定：
<!-- 单选按钮 -->
<h3>单选按钮</h3>
<input id="one" value="郭憨憨" type="radio" v-model='picked'>
<!-- label的属性for的作用是使用户名也具有定位作用（点击郭憨憨或猪芳芳都能够实现和点击按钮一样的效果） -->
<label for="one">郭憨憨</label>
<br>
<input id="two" value="猪芳芳" type="radio" v-model='picked'>
<label for="two">猪芳芳</label>
<div style="margin-left:10px">{{picked}}</div>
复选框
输出的数据只能绑定到统一数组内：
<!-- 复选框 -->
<h3>复选框</h3>
<input type="checkbox" id="three" v-model='checked' value='猪飞飞'>
<label for="three">猪飞飞</label>
<input type="checkbox" id="four" v-model='checked' value="清风无虑skr">
<label for="four">清风无虑skr</label>
<input type="checkbox" id="five" v-model='checked' value="卡尔">
<label for="five">卡尔</label>
<div>选择的人物是:{{checked}}</div>
select 下拉列表
案例代码：
<h3>select 列表</h3>
<select v-model="selected">
<option value="">选择一个选项</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<div>
你的选项是: {{selected}}
</div>
以上个情况的综合案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 输入框 -->
<p>{{message}}</p>
<input type="text" v-model='message'>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
<br>
<!-- 单选按钮 -->
<h3>单选按钮</h3>
<input id="one" value="郭憨憨" type="radio" v-model='picked'>
<!-- label的属性for的作用是使用户名也具有定位作用（点击郭憨憨或猪芳芳都能够实现和点击按钮一样的效果） -->
<label for="one">郭憨憨</label>
<br>
<input id="two" value="猪芳芳" type="radio" v-model='picked'>
<label for="two">猪芳芳</label>
<div style="margin-left:10px">{{picked}}</div>
<!-- 复选框 -->
<h3>复选框</h3>
<input type="checkbox" id="three" v-model='checked' value='猪飞飞'>
<label for="three">猪飞飞</label>
<input type="checkbox" id="four" v-model='checked' value="清风无虑skr">
<label for="four">清风无虑skr</label>
<input type="checkbox" id="five" v-model='checked' value="卡尔">
<label for="five">卡尔</label>
<div>选择的人物是:{{checked}}</div>
<h3>select 列表</h3>
<select v-model="selected">
<option value="">选择一个选项</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<div>
你的选项是: {{selected}}
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'Hello World!',
message2: '在你面前说不用太努力的人，都在你背后默默的拼命呢',
picked:'郭憨憨',
checked:[],
selected: ''
}
})
</script>
</body>
</html>
组件
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，可以使用以下方式来调用组件：
<tagName></tagName>
全局组件
定义一个全局组件my-component：
注意：这些包含固定样式的元素<ul>， <ol>， <table>， <select>自定义组件中使用这些受限制的元素时会导致渲染失败；通的方案是使用特殊的 is属性：
<!-- 全局组件 -->
<div id="app">
<my-component></my-component>
<tr is="my-component">
</table>
</div>
// 全局组件
Vue.component('my-component',{
template:'<div>第一个组件</div>'
})
var app = new Vue({
el:'#app',
data:{
}
})
局部组件
案例实现三个按钮的单独点击加1：
<!-- 局部组件 -->
<div id="app1">
<my-component></my-component>
<!-- 在组件当中定义的数据count必须以函数的形式返回 -->
<button-count></button-count>
<button-count></button-count>
<button-count></button-count>
</div>
<br>
// 局部组件
// 注意：此时data 必须是一个函数，若deta是个对象，则会影响其他实例（影响：这个案例将三个按键数字将同时变化）
Vue.component('button-count',{
template:'<button @click="count+=1">{{count}}</button>',
data:function(){
return {
count: 0
}
}
})
Vue.component('my-component',{
template:'<div>my-first-component</div>'
})
var Child = {
template: '<h3>Hello World</h3>'
}
var app1 = new Vue({
el:'#app1',
components:{
'my-component':Child
}
})
Prop及动态Prop
用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
案例：
<div id="app2">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div>
<!-- 重复组件传输 -->
<div id="app3">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
// 动态 Prop
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app2',
data: {
parentMsg: '动态 Prop'
}
})
<!-- 重复组件传输 -->
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app3',
data: {
sites: [
{ text: '郭憨憨' },
{ text: '猪芳芳' },
{ text: 'hijian' }
]
}
})
注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
Prop 验证
这一部分我看的不是太懂，如果有比较理解的朋友，可以在评论区回复一下，大家互相学习下。如果想要好好看下这部分内容可以点击下方链接：
https://www.runoob.com/vue2/vue-component.html
总结： 今天的学习就到这里，学习了表单的几种情况，以及组件的注册与使用，同时也对这部分内容写了一些案例，但Prop验证这部分内容确实没看的太懂，这里就不进行详解了，如果想要好好看下这部分内容可以点击上方链接。
扫一扫
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
