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

时间:2022-04-27
本文章向大家介绍【课堂笔记】先行者 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的路由讲完。