Vue.js入门之表单和组件基础

最新推荐文章于 2024-02-27 12:30:30 发布

那是我呐

最新推荐文章于 2024-02-27 12:30:30 发布

阅读量1.9k

点赞数 4

分类专栏： Vue.js 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_42402867/article/details/105748076

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前面几期整理，详见博客

Vue.js框架入门之vue简介和基本语法(一）

Vue.js框架入门之基本语法(二)

Vue.js框架入门之条件渲染、列表渲染、事件处理

现在来续写第四期—Vue.js的表单和组件基础

一、表单输入绑定

这节我们为大家介绍 Vue.js 表单上的应用。

我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

基本表单标签这里就不一一介绍了，有HTML基础的基本都懂

直接上一段表单双向绑定的典型案例的代码演练

Vue.js的用法写在注释上

代码演练

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div id="example-2">
		<div class="text">
			<p>
				姓名：<input v-model="name" placeholder="请输入您的姓名">  <!-- 创建双向绑定的v-model值为name -->
			</p>
			<p>
				学号：<input v-model="num" placeholder="请输入您的学号" /> <!-- 创建双向绑定的v-model值为num -->
			</p>
			</div>
		<div class="text">
			<p>性别</p>
			<input type="radio" id="one" value="男" v-model="sex">  <!-- 单选框radio，创建双向绑定的v-model值为sex -->
			<label for="one">男</label>
			<br>
			<input type="radio" id="two" value="女" v-model="sex">
			<label for="two">女</label>
		</div>
		<div class="text">
			<p>请选择你要选择的科目</p>
			<!-- 创建复选框 -->
			<input type="checkbox" id="语文" value="语文" v-model="kemu">
			<label for="语文">语文</label>
			<input type="checkbox" id="数学" value="数学" v-model="kemu">
			<label for="数学">数学</label>
			<input type="checkbox" id="英语" value="英语" v-model="kemu">
			<label for="英语">英语</label>
			<input type="checkbox" id="物理" value="物理" v-model="kemu">
			<label for="物理">物理</label>
			<input type="checkbox" id="化学" value="化学" v-model="kemu">
			<label for="化学">化学</label>
			<input type="checkbox" id="生物" value="生物" v-model="kemu">
			<label for="生物">生物</label>
		</div>
		<div class="text border">
			<div style="padding-left: 10px;">
			<p>您的信息如下</p>
			<!-- 数据双向绑定后，可以再次渲染对应model的值 -->
			<p>姓名：{{name}}</p>
			<p>学号：{{num}}</p>
			<p>性别：{{sex}}</p>
			<p>科目：{{kemu}}</p>
			</div>
		</div>
			
			<!-- 创建提交事件submit -->
		<button type="button" @click="submit">提交</button>
		
	</div>
	
</div>
<script type="text/javascript">
var vm = new Vue({
	el:"#example-2",
	data :{
		// data数据初始化赋值
		name:"",
		num:"",
		sex:"",
		kemu:[],
	},
	methods:{
		// 编写提交事件submit函数
		submit:function(){
			// 这里可以声明一个对象obj，把表单的值进行打包
			var obj ={
				name:this.name,
				num:this.num,
				sex:this.sex,
				kemu:this.kemu,
			}
			console.log(obj);  /* 控制台打印出obj对象的值 */
		}
	}
	
});
</script>
<style type="text/css">
.text{
	margin-top:10px;
}
.border
{
	border-style:solid;
	border-width:1px;
}
</style>
</body>
</html>

看一下运行效果

二、组件基础

1、组件简介

模块化：是从代码逻辑的角度进行划分的；
组件化：是从UI界面的角度进行划分的。

组件（Component）是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树，如下图所示：

这里有一个 Vue 组件的示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="demo">
  <button-counter></button-counter>
//也可以创建很多个button-counter组件，因为组件是可以复用的
</div>

 new Vue({ el: '#demo' })

可以看到页面可以渲染出一个button组件

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

关于组件的具体使用方法下期会详细介绍~~~~

那是我呐

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门之表单和组件基础

前面几期整理，详见博客 Vue.js框架入门之vue简介和基本语法(一） Vue.js框架入门之基本语法(二) Vue.js框架入门之条件渲染、列表渲染、事件处理现在来续写第四期—Vue.js的表单和组件基础一、表单输入绑定这节我们为大家介绍 Vue.js 表单上的应用。我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。...
复制链接

扫一扫