no.3_表单与组件-《VueJs+elementUI+node+es6开发点菜应用》
Posted web前端教室
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了no.3_表单与组件-《VueJs+elementUI+node+es6开发点菜应用》相关的知识，希望对你有一定的参考价值。
今次是vue课程的第3次课，内容大体上是：
一、事件；
在vue当中，事件是使用v-on指令，它可以定义一个方法来调用。
语法：
<input v-on:click="number++" type='button' value='这是一个按钮' />
简写：
<input @click="number++" type='button' value='这是一个按钮' />
二、表单；
用的最多的，就是双向绑定： v-model [ˈmɑ:dl]
text文本、单选&复选框、select下拉列表
三、组件；
它在vue里面是最强大的功能。
一般看页面上的功能，根据这些功能的划分，来界定组件的范围。
//==============
例如，
一个桌子，包括桌面、四条腿。
那它的组件如何划分？
(1)、桌面；(2)、腿1；(3)、腿2；(4)、腿3；(5)、腿4；
一共五个组件呢？
还是说，
(1)、桌面；(2)四条桌腿；共二个组件呢？
我个人主观的感受，
（1）、组件不要划分的太细，
（2）、组件从我所理解的本质上来看，它是“范围”，是“容器”；
它里面所包含的是，你想单独处理的业务逻辑。
<!-- -->
组件可以扩展 html 元素，封装可重用的代码。
语法：
Vue.component(name,ops);
name:组件名；
ops:组件配置项
调用：
<name></name>
<!-- -->
全局组件，它可以定义在vue的实例之外；
局部组件，定义在vue的实例上，
<!-- 使用props传值，单身数据流 -->
prop父组件向子组件数据的一个自定义属性，
我可以在父组件上自定义props的属性名
组件，并不参与页面dom的渲染，
但在使用props传值的时候，它却是做为容器存在的。
<!-- -->
下次课，把自定义指令、vue的路由
以上是关于no.3_表单与组件-《VueJs+elementUI+node+es6开发点菜应用》的主要内容，如果未能解决你的问题，请参考以下文章
vue-form-table（vuejs+element-ui的表格表单控件的二次封装插件）