vue-02

常用特性概览

vue-02_第1张图片

表单操作

vue-02_第2张图片
vue-02_第3张图片
双向绑定+阻止表单的默认提交
vue-02_第4张图片
vue-02_第5张图片
vue-02_第6张图片
默认选中value为1 的
vue-02_第7张图片
vue-02_第8张图片
vue-02_第9张图片
爱好
vue-02_第10张图片
复选框应该用数组表示
vue-02_第11张图片
vue-02_第12张图片

下拉选项添加mutipily=true可以多选
数据要是数组形式

表单域修饰符

vue-02_第13张图片
这时候做的是字符串的拼接
vue-02_第14张图片
vue-02_第15张图片
vue-02_第16张图片
vue-02_第17张图片
默认触发的input事件,输入文字发生变化,change是失去焦点,发生改变,可以用在验证过程
在这里插入图片描述

自定义指令

vue-02_第18张图片
vue-02_第19张图片
vue-02_第20张图片
vue-02_第21张图片
带参数的指令
vue-02_第22张图片
vue-02_第23张图片
打印binding
vue-02_第24张图片
vue-02_第25张图片
所以这样可以得到orange
vue-02_第26张图片
这是可以修改data里的颜色来修改颜色了
vue-02_第27张图片
局部指令:
vue-02_第28张图片
vue-02_第29张图片
vue-02_第30张图片
局部指令只在本组件中使用

计算属性

vue-02_第31张图片
要return,不用调用,抽取逻辑方法,让模板变得简单
vue-02_第32张图片
基于数据做处理,数据变化,结果也会变化

vue-02_第33张图片
vue-02_第34张图片
属性会保存执行结果,log只会打印一次,耗时计算会节省性能
vue-02_第35张图片

侦听器

vue-02_第36张图片
当文本框里内容改变,就进行拼接(一直监听属性变化
vue-02_第37张图片
也可以用计算属性
vue-02_第38张图片

案例(验证用户名)

需要调用ajax的异步处理
vue-02_第39张图片
vue-02_第40张图片
1、采用侦听器监听用户名变化
2、调用后台接口进行验证
3、根据验证的结果调整提示信息
vue-02_第41张图片
在这里插入图片描述
离开焦点触发事件

过滤器

vue-02_第42张图片

自定义过滤器

vue-02_第43张图片
vue-02_第44张图片
在这里插入图片描述
vue-02_第45张图片

局部过滤器

在实例对象里定义
vue-02_第46张图片
vue-02_第47张图片

带参数过滤器

vue-02_第48张图片
默认从第二个参数开始接收
vue-02_第49张图片

默认是这个样子的
在这里插入图片描述
vue-02_第50张图片
在这里插入图片描述
可以传入多个参数
vue-02_第51张图片
vue-02_第52张图片

生命周期

vue-02_第53张图片
vue-02_第54张图片
vue-02_第55张图片
vue-02_第56张图片

图书馆案例

数组变异,替换

vue-02_第57张图片
实现添加功能
简单的删除功能
vue-02_第58张图片
形成了新数组,无法响应式,所以要重新赋值
vue-02_第59张图片

修改响应式数据

vue-02_第60张图片
用索引修改:
在这里插入图片描述
vue-02_第61张图片
在这里插入图片描述

这样修改的数据不是响应的,在浏览器里修改不会改变
vue-02_第62张图片
这样就是响应式的了
在这里插入图片描述

图书列表

vue-02_第63张图片
遍历,阻止默认行为
vue-02_第64张图片

添加

vue-02_第65张图片
vue-02_第66张图片
点击提交触发事件
vue-02_第67张图片

修改

vue-02_第68张图片
过滤
vue-02_第69张图片
vue-02_第70张图片
vue-02_第71张图片
vue-02_第72张图片
编号是不允许修改的

vue-02_第73张图片
vue-02_第74张图片
vue-02_第75张图片
vue-02_第76张图片
vue-02_第77张图片

删除

vue-02_第78张图片
vue-02_第79张图片
vue-02_第80张图片

vue-02_第81张图片
vue-02_第82张图片
利用监听器,名称重复,无法提交
在这里插入图片描述
vue-02_第83张图片
vue-02_第84张图片

你可能感兴趣的:(vue)