如果监听事件时不需要传参数可以省略小括号btnClick
btnClick(event),使用时省略了小括号,但是在方法中默认传入了参数event
如果既需要参数有需要event,btnClick(abc,event)->需要在传递的时候用$event拿到浏览器参数的event对象
2.3. 修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.enter 监听某个键盘的键帽
.once 只触发一次回调事件
.native
三.条件判断
3.1. v-if/v-else-if/v-else
3.2. 登录小案例
有一个小问题,写key防止input复用
3.3. v-show
v-show和v-if区别
决定标签到底存不存在,为false时,v-if执行的是创建删除操作,而v-show是给元素增添行内样式:display: none;
四.循环遍历
4.1. 遍历数组
有索引值和没有索引值
没有索引值:v-for="item in array"
有索引值:v-for="(item,index) in array"
4.2. 遍历对象
value v-for="item in object"
value,key v-for="(value, key) in object"
value,key,index v-for="(value, key, index) in object"
选择要不要加key,加key的话可以更高效的更新虚拟DOM
<li v-for="item in letters" :key="item">{{item}}</li>
4.3. 数组哪些方法是响应式的
push() 从数组的最后添加元素(可添加多个元素)
pop() 删除数组的最后一个元素
shift() 删除数组中的第一个元素
unshift() 在数组最前面添加元素
splice() 删除元素/插入元素/替换元素
sort() 排序 可以传参数、函数
reverse() 反转
通过索引值修改数组中的元素
this.letters[0]='bbb'; // 非响应式的 如果要响应式的话用替换方法
splice方法 this.letters.splice(0,1,'bbb');
set(要修改的对象, 索引值, 修改后的值) Vue内部实现的函数
Vue.set(this.letters, 0, 'bbb');
function f(...nums) {}
五.书籍案例
六.v-model的使用
6.1. v-model的基本使用
v-model=>v-bind:value+v-on:input
6.2. v-model和radio/checkbox/select结合使用
6.3. 修饰符
number
七.组件化开发
7.1. 认识组件化
7.2. 组件的基本使用
7.3. 全局组件和局部组件
7.4. 父组件和子组件
7.5. 注册的语法糖
7.6. 模板的分离写法
script
template
7.7. 数据的存放
子组件不能直接访问父组件
子组件中有自己的data,而且必须是一个函数
为什么必须是一个函数,因为组件实例直接相互会有影响
7.8. 父子组件的通信
父组件向子组件传递 :props
子组件向父组件传递 :自定义事件$emit
7.9. 项目
npm install
npm run serve