vue基础知识简述(v-if&v-for&v-show&v-model)

Posted 2023-03-09

参考技术A

条件渲染主要有两个指令：v-if v-show
   有v-if 相应会有 v-else v-else-if
      v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染

v-if为true的表达式会显示
v-if为false的表达式不会显示

示例需要用到的data部分：

利用data变量进行判断使用

类似于if-else条件语句判断

在template上使用 v-if 条件渲染分组

利用上面提供的data变量和下面的template结合，启动网页后查看源码可知
v-show与v-if区别：
  v-show 只是简单的切换元素的display CSS propertity,带有 v-show 元素始终会被渲染并保存在 dom 中
    v-if:后面若为false，标签直接消失，控制dom元素的创建和销毁
      v-if是一个编译、卸载的过程，创建和销毁子组件
          v-show是控制css property

v-for用于循环遍历数据
 示例需要用到的data部分：

用v-for把一个数组映射为一组元素
  v-for基于一个数组来渲染一个列表
   v-for使用数组，item代表数组中每个元素，index表示数组元素下标

两种分隔符：in of
  item标识键值，key表示键名，index表示索引

注意观察上面循环标签的最后都有 :key
 为什么要添加key?
  key作为唯一标识
   为了给vue一个提示，以便它能跟踪每一个节点的身份，重而重用和重新排序现有元素

官方解释：
你可以用v-model 指令在表单＜input> 、 <textarea＞及<select＞元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。
v-model会 忽略所有表单元素的value 、checked 、 selected attribute 的初始值。 它将始终将当前活动实例的数据作为数据来源。你应该通过javascript在组件的 data选项中声明初始值。

v-bind （:value="msg"）负责将data变量显示页面input框
v-on (@input="changeValue) 负责利用函数中事件对象获取页面input框的值传data变量使其发生改变

缺陷：v-model数据中每一次改变都会触发试图更新，特别消耗性能
因此官方为v-model设定了一些修饰符

lazy ,当输入框失去焦点,再去同步输入框中的数据

trim:自动过滤用户输入的首尾空白字符

如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符