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

1、基本理解

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

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

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kB运行大小，超快虚拟DOM

2、Vue基本使用

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）

data：模型数据（值是一个对象

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

3. Vue模板语法

3.1 差值表达式

比如：<div>{{msg}}</div>

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

解决办法：

v-cloak指令的用法：

> 1、提供样式



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

<div v-cloak>{{msg}}</div>

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

3.2 指令

v-cloak



v-text

v-html

v-pre



如何理解响应式（比如在VScode编辑器中修改数据，实际浏览器上面的显示也会跟着变化）：

> html5中的响应式----（屏幕尺寸的变化导致样式的变化）

> 数据的响应式-------（数据的变化导致页面内容的变化

v-once

<div v-once>{{info}}</div>

只编译一次，显示内容之后不再具有响应式功能，即使在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

直接绑定函数名称 <button v-on:click='say'>Hello</button>或者简写 <button @click='say'>Hello</button>



修改为：如果事件绑定函数调用，需要传递事件对象，那么必须作为最后一个参数传递，名称必须是$event；不需要可以不传

console.log(event.target.innerHTML)----> 得到 “ 点击2 ”

v-bind

>属性绑定：

v-bind指令用法 <a v-bind:href='url'>跳转</a>

缩写形式 <a :href='url'>跳转</a>

v-model的低层实现原理分析



>样式绑定



v-for



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

v-if

v-else-if

v-else



v-slot

较少使用

修饰符

事件修饰符

.stop 阻止冒泡 <a v-on:click.stop="handle">跳转</a>

.prevent 阻止默认行为 <a v-on:click.prevent="handle">跳转</a>

按键修饰符

.enter 回车键 <input v-on:keyup.enter='submit'>------------比如此处的 submit 函数直接congsole.log(this.uname)

.esc 退出键 <input v-on:keyup.delete='handle'>

自定义修饰符

全局config.keyCodes 对象

规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

Vue.config.keyCodes.f1 = 112

案例：

Tab选项卡