Vue基础及指令总结

一、认识Vue

在这里插入图片描述
在这里插入图片描述

Vue的安装

在这里插入图片描述

响应式、计算器(方法)

在这里插入图片描述

MVVM

在这里插入图片描述
在这里插入图片描述

创建Vue实例传入的options

在这里插入图片描述
代码规范:缩进四个空格,两个空格。

Vue的生命周期

v-clock

在这里插入图片描述
| 插值语法
v- 基本语法

v-bind

在这里插入图片描述

class对象语法:
在这里插入图片描述
class数组语法:(用得少)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
style对象语法:
在这里插入图片描述
在这里插入图片描述
style数组语法:
在这里插入图片描述

计算属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
计算属性的setter和getter
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
计算属性的缓存(和methods的对比)
性能更高,有缓存,只调用一次

es6语法补充

在这里插入图片描述
在这里插入图片描述
es5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于function的作用于来解决应用外面变量的问题。

es6中,加入了let,有if和for的块级作用域。

const
在这里插入图片描述
3.注意三:常量的含义是指向的对象不能修改(不能改变指向),但是可以改变对象内部的属性。

对象增强写法:
在这里插入图片描述

事件监听 v-on

在这里插入图片描述
在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器生产的event事件对象作为参数传入到方法。
在这里插入图片描述
在这里插入图片描述
总结:
在这里插入图片描述
在这里插入图片描述
v-on修饰符:
在这里插入图片描述

v-if 和 v-else-if 和v-else

在这里插入图片描述
在这里插入图片描述
小问题:
在这里插入图片描述

v-if和v-show的区别:

在这里插入图片描述
在这里插入图片描述

v-for

在这里插入图片描述
value key index
在这里插入图片描述
在这里插入图片描述
组件key的属性
key的作用主要是为了高效的更新虚拟DOM
:key一般绑定index没有用,绑定唯一值(如:item)

数组中哪些方法是响应式的:

在这里插入图片描述
在这里插入图片描述
作业练习回顾:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
购物车案列:
过滤器
在这里插入图片描述
在这里插入图片描述
按钮不可点:<button disabled>案列</button>
在这里插入图片描述
///
在这里插入图片描述
在这里插入图片描述

高阶函数

在这里插入图片描述

v-model

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

结合radio使用

在这里插入图片描述
在这里插入图片描述
只有在有v-model情况下可以不使用name属性

v-model:checkbox

checkbox单选框
在这里插入图片描述
checkbox多选框
在这里插入图片描述
在这里插入图片描述

v-model:select

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
input中值绑定:
在这里插入图片描述

v-model修饰符的使用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值