我的Vue之旅(1)
2020-10-17
今天主要学习了Vue中以下几个指令的使用
- v-bind
- v-if
- v-on
- v-for
- v-model
其中v-bind与v-model都是属于数据绑定,v-bind通常来说是绑定属性与data中的数据,而v-model较多在表单中使用,实现数据的双向绑定。
v-if的话和其他语言中的if使用差不多吧,当条件为true时,标签的内容就可以生效,即在页面上显示出来。
v-for循环加载对象列表中的对象,做一些相同的操作,不过要搞清楚v-for应该放在需要进行操作的标签内,不要搞错位置了。v-on就是一个
监听了,通常是接一个事件,比如点击,然后加上这个事件对应的处理操作了,可以直接写JS语句在后面,操作复杂可以通过函数代替。
比较有意思的是,在写v-for例子的时候,把v-for放在了ol标签中,出来的结果就是所有的对象前面的序号都是1,尴尬尴尬。
Vue 生命周期钩子
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- deforeDestory
- destoryed
Examples: Demo1.html
Github: https://github.com/jvxiao/vue-road