【课堂笔记】先行者 3.0版本的vueJs课程的第三次课

今次是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）、组件从我所理解的本质上来看，它是“范围”，是“容器”；它里面所包含的是，你想单独处理的业务逻辑。

<!-- -->

// 在这个例子中，父组件并不参与dom节点的渲染，但它在传值当中却是做一个层级、范围来存在的。但如果你想在dom中找到对应的dom节点，却是没有的。

<!-- -->

组件可以扩展 HTML 元素，封装可重用的代码。

语法：

 Vue.component(name,ops);

name:组件名；

ops:组件配置项

调用：

<name></name>
<!--  -->

全局组件，它可以定义在vue的实例之外；

局部组件，定义在vue的实例上，

<!-- 使用props传值，单向数据流 -->

prop父组件向子组件数据的一个自定义属性，

我可以在父组件上自定义props的属性名

组件，并不参与页面dom的渲染，

但在使用props传值的时候，它却是做为容器存在的。

props：传值。

自定义一个属性，感觉跟react的思路是一样一样的

<!-- -->

下次课，把自定义指令、vue的路由讲完。