vue基础指令

vue核心概念

• 1.vue的本质声明式/响应式（寻常的指令）组件化。（定制）
• 2.vue简介：MVVM框架（不完全是，react完全是），渐近式（可大可小，既可以做简单的html页面，又可以做大型的管理系统）
• 3.vue开发思想：当我们想要改变视图界面时，我们只需要改变视图界面对应的声明式变量即可（间接）
• 4.jquery开发思想：当我们想要改变视图界面时，我们要使用$选择器获取DOM元素对象，再使用DOM API操作DOM（直接）

指令

• 1.指令是vue中的特色（在react中是没有的），Angular，微信小程序也有指令。
• 2.指令的本质，就是DOM封装。指令就是一组相似的DOM操作
• 3.降低我们直接操作DOM的频率。（尽可能减少DOM操作（滥杀无辜，只想改变一个列表某一行时，把全部列表重新渲染），不推荐用户直接操作DOM）
• 4.指令如果有值，这个值是变量（变量必须在组件中可以通过this访问），也可以是表达式（有变量参与的运算）

一、文本指令

• 1.{{}}文本插值。缺点有“一闪而过”的效果（不够美观）。可以使用v-text替代，或者用v-clock替代，但是要设置css样式[display:none]但是某些情况下只能用{{}}，存在即合理。
• 2.v-text专门用于渲染文本，如字符串，数字等，但是null，undefined不会渲染，直接显示为空
  • 注意，渲染Boolean值时，vue会自动的隐式转化为字符串
    进一步理解：v-text就相当于是innerText
• 3.v-html 专门渲染HTML字符串。
  • v-html的值是HTML字符串，这些字符串会被Vue引擎解析渲染成真实的DOM结构
  • v-html默认具有“防注入攻击XSS”的功能，可以放心使用v-html
• 4.v-once
  • 在语法上：v-once和v-cloak一样，没有值，不能这么使用：v-once=‘msg’
  • 它有一个非常重要的特点，它所作用的DOM节点上的声明式变量只会渲染一次。换句话说，当它对应的声明式变量发生改变时，视图不会发生改变。
  • 说明：工作中几乎不会用到

动态属性

• v-bind给标签动态添加属性，凡是可以使用的属性都可以变成动态的
  • 简写： v-bind：style 简写成：style=‘’
  • 进阶：使用v-bind实现动态class，动态style，是非常重要的，在“组件化”时用的非常多

事件绑定

• v-on 给标签绑定事件（事件是网页交互的基础）
  +.可以绑定哪些事件？什么事件都可以绑定，如：鼠标事件，键盘事件，滚动事件等...
  +.简写：v-on：事件名=‘事件处理器’ 简写为 @事件名 = ‘事件处理器’
  +.事件修饰符（可以链式调用）:.enter/.stop阻止冒泡/.prevent阻止默认行为/...
  +. 事件对象
  +.(1)当没有事件传参时，事件处理器默认的第一个参数就是事件对象。（如果没有参数时，定义不要加（））当事件传参时，需要手动传入$event事件对象。
  在什么场景下会使用事件传参？通常为了复用“事件处理器”，减少methods封装
  语法1：没有事件传参<tag @click='handle'>
  语法2:有事件传参时<tag @click='handle(变量1，$event)'>

四、表单绑定

• v-model用于表单双向绑定，即方便我们取表单值。（这不是响应式的原理）
• 约定：一般我们谈论的“双向绑定”指的是表单的v-model，谈论“响应式/声明式”指的是vue响应式的原理。
• 怎么理解双向绑定？从表单的角度，当表单视图发生改变时，对应的生名式变量自动更新。当v-model对应的声明式变量发生变化时。表单视图自动更新
• 好处：有了v-model，我们取表单的值非常的简单
  三个修饰符：
• trim去掉文本类表单值首位的字符串/空格
• number用于把由数字组成的字符串，转化成Number类型.
• lazy用于“长表单”的v-model，当长表单光标失焦时，再把表单视图上的更新值更行到其对应的声明式变量上。这是一种性能优化。

五、列表循环

• v-for常用于循环数组，数字，字符串，对象，一切可迭代的变量（如：map，set）
  • vue工作中很少使用Map，Set，原因是Vue没办法把Map，Set这类数据变成响应式数据
  • 提示：在v-for中很少用于循环Map，SET
  • 说明：常用于循环数组，数值
  • 问题：v-for循环时要加key，后续再补充

六、条件渲染

• v-show对元素进行显示与隐藏
  • 背后的原理是给元素添加或移除{display：none}的css样式来实现显示与隐藏
    语法的坑：v-show=‘Boolean（表达式）’，v-show的值永远都是布尔值，一定要留意v-show值的数据类型
• v-if/v-else-if/v-else 用于对元素进行显示与隐藏
  • 背后的原理：是通过DOM操作对元素节点进行插入与删除（removeChild&appendChild）
  • 语法的坑：v-if=‘Boolean（表达式）’，v-id和v-else-id的值必须是布尔值，vue会自动隐式类型转化
  • 注意：当v-if/v-else-if/v-else成为‘一组’时，在这组兄弟节点中不能插入其他节点
  • v-else 是不用给‘值’的
• v-if和v-show的区别？
  • v-show是通过css的{display：none}来实现显示与隐藏的。而v-if是通过DOM元素操作实现的。
  • 使用v-show实现隐藏功能时，页面初始化的开销比较大，而使用v-if实现隐藏功能时，页面初始化开销比较小。当一个元素节点需要频繁进行显示与隐藏，建议使用v-show来做，反之建议使用v-if

七、其他指令

• v-slot插槽，是组件化的基础语法之一，它可以简写为#
• v-pre 一般用于调试。特点：一般被v-pre所包裹的都没节点，都不参与vue编译和解析。这个指令不常使用。