概述
框架提供一些基础性服务,不只是api
基本使用
vue编译成原生语法(通过vue框架)
不涉及dom操作
可以进行简单字符串拼接计算(满足js语法的)
Vue模板语法
原生js,拼接字符串
前端模板引擎
VUE模板
指令
自定义属性
闪动:先显示花括号内容,然后迅速替换为msg内容
v-cloak
纯文本刷新 虽然也有闪动但是不会出现花括号里面的文本内容了
原理:通过样式隐藏内容,然后再内存中进行值的替换,替换之后显示最终的结果
数据绑定指令
v-text
没有闪动问题
v-html
跨站脚本攻击
v-pre
显示原始信息
数据响应式
默认是响应式的,如果不需要修改可以用v-once,可以提高性能
双向数据绑定
从视图到模型用事件监听
从模型到视图用的是数据绑定
在网页里修改,他实际的值也被修改,在代码里修改,网页里 的值也被修改
事件绑定
应该把逻辑放在方法里面
this是vue的实例对象
不用传递event也可以调用event
事件修饰符
传统方式:
vue方式:
阻止默认行为:
原生js
vue:
按键修饰符
自定义按键修饰符
数值是唯一标识
按下a打印,但是不方便
对应的值必须是按键对应event的keyCode值
计算器案例
属性绑定
属性绑定+事件绑定
样式绑定
数组语法
同时拥有两个类名,点击按钮,其中一个类名变为空
相关细节:
对象绑定数组绑定可以结合使用
class绑定的值可以简化操作
默认的class会保留
可读性不好。可以用对象
重复属性会覆盖,不同的会加上去
分支循环结构
这时候页面中不会显示优秀
v-show会渲染但是不显示
频繁显示隐藏用v-show,因为dom元素生成删除开销比较大
数组里包含了很多对象
其中每个item是一个对象
可能对我们没变化,但可以提高vue的性能
结合使用
顺序不能变,名字自定义
原生js遍历对象
tab选项卡
数据填充
判断索引,添加类