Vue-01

概述

Vue-01_第1张图片
框架提供一些基础性服务,不只是api
Vue-01_第2张图片
Vue-01_第3张图片

基本使用

Vue-01_第4张图片
vue编译成原生语法(通过vue框架)
不涉及dom操作
Vue-01_第5张图片
Vue-01_第6张图片
可以进行简单字符串拼接计算(满足js语法的)

Vue模板语法

Vue-01_第7张图片
Vue-01_第8张图片
原生js,拼接字符串
Vue-01_第9张图片
前端模板引擎
Vue-01_第10张图片

VUE模板

Vue-01_第11张图片

指令

自定义属性
Vue-01_第12张图片
闪动:先显示花括号内容,然后迅速替换为msg内容
v-cloak
Vue-01_第13张图片
Vue-01_第14张图片
纯文本刷新 虽然也有闪动但是不会出现花括号里面的文本内容了
原理:通过样式隐藏内容,然后再内存中进行值的替换,替换之后显示最终的结果

数据绑定指令

Vue-01_第15张图片
v-text
Vue-01_第16张图片
没有闪动问题

v-html
Vue-01_第17张图片
Vue-01_第18张图片
跨站脚本攻击

v-pre
显示原始信息
在这里插入图片描述

数据响应式

Vue-01_第19张图片
默认是响应式的,如果不需要修改可以用v-once,可以提高性能

双向数据绑定

Vue-01_第20张图片
从视图到模型用事件监听
从模型到视图用的是数据绑定
Vue-01_第21张图片
Vue-01_第22张图片
在网页里修改,他实际的值也被修改,在代码里修改,网页里 的值也被修改

事件绑定

Vue-01_第23张图片
Vue-01_第24张图片
在这里插入图片描述
应该把逻辑放在方法里面
Vue-01_第25张图片
Vue-01_第26张图片
this是vue的实例对象
在这里插入图片描述
Vue-01_第27张图片
Vue-01_第28张图片
Vue-01_第29张图片
不用传递event也可以调用event

事件修饰符

Vue-01_第30张图片
传统方式:
Vue-01_第31张图片
vue方式:
Vue-01_第32张图片
阻止默认行为:
原生js
Vue-01_第33张图片
vue:
在这里插入图片描述
Vue-01_第34张图片

按键修饰符

Vue-01_第35张图片
Vue-01_第36张图片
Vue-01_第37张图片

自定义按键修饰符

在这里插入图片描述
数值是唯一标识
按下a打印,但是不方便
Vue-01_第38张图片
Vue-01_第39张图片
Vue-01_第40张图片
对应的值必须是按键对应event的keyCode值

计算器案例

在这里插入图片描述
Vue-01_第41张图片

属性绑定

Vue-01_第42张图片
Vue-01_第43张图片
属性绑定+事件绑定
在这里插入图片描述
Vue-01_第44张图片
在这里插入图片描述
在这里插入图片描述

样式绑定

Vue-01_第45张图片
Vue-01_第46张图片
Vue-01_第47张图片
数组语法
同时拥有两个类名,点击按钮,其中一个类名变为空
Vue-01_第48张图片
相关细节:
对象绑定数组绑定可以结合使用
class绑定的值可以简化操作
默认的class会保留
Vue-01_第49张图片
Vue-01_第50张图片
Vue-01_第51张图片
Vue-01_第52张图片
Vue-01_第53张图片
可读性不好。可以用对象
Vue-01_第54张图片
在这里插入图片描述
重复属性会覆盖,不同的会加上去

分支循环结构

Vue-01_第55张图片
这时候页面中不会显示优秀
Vue-01_第56张图片
v-show会渲染但是不显示
在这里插入图片描述
Vue-01_第57张图片
在这里插入图片描述
频繁显示隐藏用v-show,因为dom元素生成删除开销比较大
Vue-01_第58张图片
Vue-01_第59张图片
Vue-01_第60张图片
Vue-01_第61张图片
数组里包含了很多对象
其中每个item是一个对象

在这里插入图片描述
在这里插入图片描述
可能对我们没变化,但可以提高vue的性能

结合使用
Vue-01_第62张图片
顺序不能变,名字自定义
原生js遍历对象
Vue-01_第63张图片
Vue-01_第64张图片
Vue-01_第65张图片

tab选项卡

Vue-01_第66张图片
数据填充
Vue-01_第67张图片
判断索引,添加类
Vue-01_第68张图片
Vue-01_第69张图片
Vue-01_第70张图片

你可能感兴趣的:(vue)