Vue学习笔记Day03

1、ES6相关新特性
let的使用:let是更完美的var;在使用var声明变量时,变量的作用域主要是和函数的定义相关,针对与其他块级作用域来说是没有作用域的,比如if/for等,在这时我们开发往往会引起一些问题。比如:

但使用let的话就避免了这些问题

const的使用:上面说到let是声明变量时的用法,那么当我们修饰的标识符不会被再次赋值时,就可以使用const来保证数据的安全性,所以在ES6开发中,优先使用const,只有需要改变某一个标识符的时候才使用let声明;

const在声明的时候必须赋值;

对象的增强写法:

2、vue中的事件监听
vue中的事件监听使用v-on语法;语法糖缩写为@;
语法:v-on:事件="事件名";如:v-on:click="btn";


v-on事件如果不需要传参数则可以省略();如果需要传入某个参数,同时需要event那么通过$event传入事件


v-on的修饰符
.stop -调用event.stopPropagetion().停止冒泡;
.prevent -调用event.preeventDefault()阻止默认事件;
.once - 只触发一次回调;

3、v-if/v-else-if/v-else
这三条指令与javascript中的if/else if/else类似,vue指令可以根据条件表达式的值在DOM中渲染或销毁元素或组件


当v-if后面的条件为false时,对应的元素以及其子组件元素不会渲染,也就是根本不会有对应的标签出现在DOM中。
小案例:按钮切换使用用户名登录或者邮箱登录



如果我们在输入了内容的情况下,切换了类型,我们会发现切换后输入框依然有之前显示的内容,这个时候我们可以给输入框(input)添加不同的key来解决这个问题;
4、v-show
v-shohw与v-if非常相似,也用于决定一个元素是否渲染到页面上,区别是:当v-if条件为false时,压根就不会有对应的元素在DOM中,当v-show条件为false时,仅仅是将元素的display属性设置为none而已;我们使用过程中,当需要在显示与隐藏之间频繁的切换时,就可以使用v-show,当只有一次切换时,通常使用v-if;

5、当我们有一组数据需要进行渲染时,可以使用v-for来完成:语法是:item in items的形式,如果在遍历数组时,不需要使用索引值;v-for="item in items",当需要数组中的索引值时,使用v-fo="(iesm,index) in items";

v-for遍历对象
语法v-for="(value,key,index) in info",value为值,key为属性名,index为索引,遍历时的顺序就是这样;

当我们在使用v-for最好是给元素或者组件绑定一个:key属性,例如当向某个数组插入数据时,没有添加:key的话数据会突然插到中间,然后之后的数据会依次往后移,并且索引值也会跟着改变,但时当给这个元素添加来:key并将index所以绑定为key的值,再往数组中间插入数据的时候,虽然也是插在中间,但是索引值还是最后一个,之前的数据索引值也不会被改变;




6、vue中包含了一组观察数组的编译方法,使数组改变时,也会触发视图的更新,.push(),.pop(),.shift(),.unshift(),.splice(),.sort(),.reverse(),但是当我们使用索引值来改变数组值时,视图是不会随着跟新的如:array[1]='vue';这样数组值是改变了但是视图上的内容并没有及时更新显示;
购物车案例:





7、v-model指令
vue中使用v-model指令来实现表单元素和数据的双向绑定。

v-model其实是一个语法糖,他的背后本质上包含两个操作:1:v-bind绑定一个value属性,2:v-on给当前元素绑定input事件;也就是说:

v-model绑定radio时,v-model保存在data中的值是字符串

v-model绑定checkbox时,如果是单个勾选框,v-model保存在data中的值为布尔值,如果时多个勾选框,因为可以选择中多个,所以对应的data中的值时一个数组


v-model绑定select时和checkbox一样分为单选多选两种情况;
单选,v-model绑定的是一个值,当我们选中一个option中的一个时,会将它对应的value值赋给data中作为字符串存储;
多选,v-model绑定的是一个数组,当选中多个值时,就会将选中的option对应的value添加到data中作为数组存储;
8、关于值绑定!
就是将data中的数据动态绑定给元素当作值来使用,如:


9、v-model的修饰符
.lazy可以是输入框失去焦点或者回车时才会绑定数据;
.number可以使输入的内容自动转换成数字类型;
.trim可以过滤内容两边的空白字符

原文地址:https://www.cnblogs.com/recluse/p/12092486.html