Vue基础（一）---- 模板语法

⚫1、基本理解

Vue其实是一个渐进式JavaScript框架，封装好了一些方法，不再需要操作通过操作DOM，在相同的目标下能够更快的编写代码。

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20kB运行大小，超快虚拟DOM

⚫2、Vue基本使用

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象

Vue代码------(经过Vue框架的编译过程)-------原生js代码

⚫3. Vue模板语法
3.1 差值表达式
比如：

{{msg}}

注意：插值表达式在浏览器频繁刷新的时候，会出现“闪动”问题（显示花括号和内容，然后迅速替换为对应的数据----这也是Vue的解析方式）
解决办法：
v-cloak指令的用法：
> 1、提供样式

> 2、在插值表达式所在的标签中添加v-cloak指令即可解决

{{msg}}

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

3.2 指令
v-cloak

v-text
v-html
v-pre

如何理解响应式（比如在VScode编辑器中修改数据，实际浏览器上面的显示也会跟着变化）：
> html5中的响应式----（屏幕尺寸的变化导致样式的变化）
> 数据的响应式-------（数据的变化导致页面内容的变化
v-once

{{info}}

只编译一次，显示内容之后不再具有响应式功能，即使在VScode编辑器中修改数据，实际浏览器上面的显示也不会再变化
应用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。
v-show
> 共同点：
v-if 和 v-show 都是通过判断绑定数据的 true\false 来控制元素的显示和隐藏。
> 不同点：
v-if 只有在判断为 true 的时候才会对数据进行渲染，false 的时候把包含的代码进行删除。
除非再次进行数据渲染，v-if 才会重新判断。可以说是用法比较倾向于对数据一次操作。
v-show 是无论判断是什么都会先对数据进行渲染，只是 false 的时候对节点进行 display:none 的操作。
所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏。
> 用法推荐：
v-if 更适合于带有权限的操作，渲染时判断权限数据，有则展示该功能，没有则删除。
v-show 更适合于日常使用，可以减少数据的渲染，减少不必要的操作。
综上，v-if 有更高的切换消耗，而 v-show 有更高的初始渲染消耗。

因此，如果需要频繁切换 v-show 较好（已经加载，只是通过display:none/block 控制显示/隐藏而已），如果在运行时条件不大可能改变，更倾向功能权限性的话 v-if 较好。
v-model
1、修改页面会影响到数据
2、修改数据会影响到页面

v-on
直接绑定函数名称 Hello或者简写 Hello

console.log(event.target.innerHTML)----> 得到 “ 点击2 ”
v-bind
>属性绑定：
v-bind指令用法 跳转
缩写形式 跳转
v-model的低层实现原理分析

>样式绑定

v-for

key的作用：帮助Vue区分不同的元素，从而提高性能
v-if
v-else-if
v-else

v-slot
较少使用
修饰符

事件修饰符
.stop 阻止冒泡 跳转
.prevent 阻止默认行为 跳转
按键修饰符
.enter 回车键 ------------比如此处的 submit 函数直接congsole.log(this.uname)
.esc 退出键
自定义修饰符
全局config.keyCodes 对象
规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
Vue.config.keyCodes.f1 = 112

案例：
Tab选项卡