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

前面几期整理，详见博客

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

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

3. 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的用法写在注释上

代码演练

	

		

			

				姓名：  
			
			

				学号： 
			
			
		

			
性别
			  
			男
			

			
			女
		
		

			
请选择你要选择的科目
			
			
			语文
			
			数学
			
			英语
			
			物理
			
			化学
			
			生物
		
		

			

			
您的信息如下
			
			
姓名：{{name}}
			
学号：{{num}}
			
性别：{{sex}}
			
科目：{{kemu}}
			
		
			
			
		提交
		
	
	

看一下运行效果

二、组件基础 

1、组件简介

• 模块化：是从代码逻辑的角度进行划分的；

• 组件化：是从UI界面的角度进行划分的。

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

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

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

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

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

  
//也可以创建很多个button-counter组件，因为组件是可以复用的

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

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

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

 

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