Vue 学习 总结

姓名： 李四 ---- 年龄： 29 ---- 1

姓名： 王五 ---- 年龄： 28 ---- 2

姓名： 赵六 ---- 年龄： 36 ---- 3

–>

3.循环对象

• {{ value }} — {{ key }} — {{ index }}

  v-show 与 v-if 区别：

  v-show 修改css样式 display 隐藏

  v-if 元素节点 删除

  v-for 与 v-if 不一起使用：

  v-for 的优先级比 v-if 更高，不建议一起使用

  在上使用v-for（本身是标签，但不会渲染到页面上）判断跟key放到里面的元素内

  {{ i }}

  属性绑定

  8. v-bind 【简写： ：】

  用于绑定属性

  事件

  9. v-on 【简写 ： @】

  用于绑定事件

  事件:methods 里面的函数调用与否都能执行 如果调用可以传递参数 如果没有传递参数，那么第一个参数默认为 事件对象， 如果传递了参数

  methods: {

  fn(num) {

  console.log(num)

  }

  }

  ①事件修饰符

  阻止冒泡事件

  .stop - 调用 event.stopPropagation()。

  . capture - 添加事件侦听器时使用 capture 模式。

  . self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

  不能同时使用

  . passive - (2.3.0) 以 { passive: true } 模式添加侦听器

  . prevent - 调用 event.preventDefault()。

  ②按键修饰符

  .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

  .native - 监听组件根元素的原生事件。

  .once - 只触发一次回调。

  .left - (2.2.0) 只当点击鼠标左键时触发。

  .right - (2.2.0) 只当点击鼠标右键时触发。

  .middle - (2.2.0) 只当点击鼠标中键时触发。

  双向绑定

  10. v-model

  用于双向绑定 只能适用于表单中

  ①修饰符

  .lazy - 当执行change事件的时候才把里面的内容拿到

  .number - 输入字符串转为有效的数字

  .trim - 输入首尾空格过滤

  input checkbox 多选框 是个数组类型：

  data(){

  return{

  val:[]

  }

  }

  编译

  11. v-cloak

  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  示例：

  [v-cloak] {

  display: none;

  }

  {{ message }}

  不会显示，直到编译结束。

  12. v-pre

  跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。

  13. v-once

  只渲染元素和组件一次。

  14. v-slot 【 缩写： # 】 插槽

  仅限于

  自定义指令

  ---

  全局指令

  Vue.directive ( )

  参数一：自定义指令 ； 参数二 ：钩子函数

  // 注册一个全局自定义指令 v-focus

  Vue.directive(‘focus’, {

  // 当被绑定的元素插入到 DOM 中时……

  inserted: function (el) {

  // 聚焦元素

  el.focus()

  }

  })

  局部指令

  directives

  directives: {

  focus: {

  // 指令的定义

  inserted: function (el) {

  el.focus()

  }

  }

  }

  然后你可以在模板中任何元素上使用新的 v-focus

  钩子函数

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind：只调用一次，指令与元素解绑时调用。

  钩子函数参数

  1. el：当前指令所绑定的元素，可以用来直接操作 DOM。

  2. binding：一个对象

  3. vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

  4. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

  5. List item

  选项

  ================================================================

  1. data

  Vue 实例的数据对象

  2. props

  props 可以是数组或对象，用于接收来自父组件的数据。

  • type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。

  • default：any

  为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
  

  • required：Boolean

  定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
  

  • validator：Function

  自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。
  

  3. methods 方法

  methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

  注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

  4. computed 计算属性 有缓存

  计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

  注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

  5. watch 深度监听

  注意，不应该使用箭头函数来定义 watcher 函数

  6. directives 自定义指令

  7. filters 过滤器链

  8. components

  9. 生命周期

  1、beforeCreate

  2、created

  3、beforeMount

  4、mounted

  5、beforeUpdate

  6、updated

  7、beforeDestroy

  8、destroyed

  9、activated

  10、deactivated

  11、errorCaptured

  全局API

  ===================================================================

  1. vue.directive()

  2. vue.filter()

  3. vue.component()

  4. vue.nextTick()

  5. vue.set()

  6. vue.delete()

  7. Vue.use()

  实例属性与方法

  =====================================================================

  方法

  1. this.$emit（ )

  2. this.$mount( )

  3. this.$nextTick()

  4. this.$set()

  属性

  1. this.$options

  2. this.$refs

  特殊属性

  ==================================================================

  1. ref

  2. is

  3. key

  内置组件

  最后

  ❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

  =========================

  1. vue.directive()

  2. vue.filter()

  3. vue.component()

  4. vue.nextTick()

  5. vue.set()

  6. vue.delete()

  7. Vue.use()

  实例属性与方法

  =====================================================================

  方法

  1. this.$emit（ )

  2. this.$mount( )

  3. this.$nextTick()

  4. this.$set()

  属性

  1. this.$options

  2. this.$refs

  特殊属性

  ==================================================================

  1. ref

  2. is

  3. key

  内置组件

  最后

  ❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。