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

时间:2022-04-27
本文章向大家介绍【课堂笔记】先行者 3.0版本的vueJs课程的第二次课,主要内容包括"><!-- -->、"><!-- -->、"><!-- -->、"><!-- -->、"><!-- -->、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

先用大概二三次课把vue的基本操作、命令都讲一下,

然后接下来会用几次课,会用几个例子,把vue的具体应用讲一下,

然后再用一二次课,结合实例把vuex也讲一下。

整个vue节点的课程的具体时间,这个不太好定。

<!-- -->

上一次课最后讲到了v-if、v-for,条件与循环,

v-for指令,它的格式是,arr in arrs的这种形式的语法,

在这里,arr相当于是迭代arrs数组时的别名。

它跟原生js的 for in 循环的思路,基本是完全一样。

在vue中,v-for它可以把一个数组循环渲染到一个列表,

demo1.html, demo2.html

<!-- -->

如果想输出一个对象当中的键名和值,那么应该这样,

<template v-for="( lis, keys, inx) in vals">...

第二个参数 keys,就是键名

第三个参数 inx,就是索引

demo3.html

还可以循环整数,看 demo4.html

<!-- -->

computed,计算,它里面保存的是它所关注的对象的依赖,只要这个依赖发生了变化,它就重新计算(就是会被调用)。

它和methods不一样,methods是明确说明的,当某个click或其它的事件发生时,methods里面的方法会被调用 。

demo5.html

<!-- -->

v-bind,指令,

主要用来处理class或style,

根据表达式的结果:false / true,来决定是否绑定

你从很多指令的用法可以感觉到,vueJs里面很强调“配置”。

demo6.html、demo7.html

<!-- -->

下一次课,是第三次课,讲 事件,表单,组件,自定义指令,

在下一次课,把基本的这些方法都讲完,

从第四次课开始,咱们讲实例。