VUE - 2 - vue基础

最新推荐文章于 2023-02-21 15:16:17 发布

wendyGao_Yin

最新推荐文章于 2023-02-21 15:16:17 发布

阅读量615

点赞数

分类专栏： VUE 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/wendyGao_Yin/article/details/122965531

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文深入探讨Vue.js的基础知识，包括模板语法的插值和指令，如v-text、v-if/v-else、v-model等。同时，介绍了Vue的全局配置选项，如Vue.config.productionTip，以及组件的生命周期钩子，如created、mounted等。此外，还涵盖了data、props、computed、methods和watch等核心概念，助你掌握Vue开发必备技能。

摘要由CSDN通过智能技术生成

这是之前的案例代码和效果。

模板语法

插值语法
 你好 {{msg}} ！
指令语法
 你好 ！

vue的常用内置指令

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show : 通过控制 display 样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 绑定解析表达式, 可以省略 v-bind
v-model : 双向数据绑定
v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

vue的常用全局配置

Vue.config.productionTip 是vue的全局配置属性。
Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：

silent：Vue.config.silent = true -> 取消 Vue 所有的日志与警告。
devtools：Vue.config.devtools = true （务必在加载 Vue 之后，立即同步设置该内容）
productionTip：Vue.config.productionTip = false -> 设置为 false 以阻止 vue 在启动时生成生产提示。
…

选项

Vue创建实例对象vm是传入的配置项有 el 和 data ，都是vue的选项。

DOM

和DOM相关的选项有el、template、render、renderError。

el ：只在用 new 创建实例时生效。
- el 为 vue 的实例对象 vm 指定挂载的DOM 元素，值是 CSS 选择器，或者 HTMLElement 实例。
- 不推荐挂载 vm 实例到 <html> 或者 <body>。
- 也可以使用 vm.$mount() 手动开启编译（全局API）。
template：在选项中编辑vm实例模板字符串，会替换 #root 和其内部的元素。
render ：在vue组件化中用于接受一个createElement，创建vm实例。

数据

data 选项用来给vm实例提供数据。在el指定的模板内直接使用。
和数据相关的选项有data、props、propsData、computed、methods、watch。

data：有对象和函数两种数据类型值，在组件实例对象中只能是函数。
props：可以是数组或者对象，用于接收父组件传入的数据
- 值是对象时，允许配置高级选项，如类型检测（type）、是否必填项（required）、自定义验证（validator）和设置默认值（default）。

propsData：用于创建组件实例对象时传入参数。官网示例：

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

computed：计算属性{ [key: string]: Function | { get: Function, set: Function } }

不建议使用箭头函数，this就不收vm实例控制了。
计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})

methods：在vm实例中的事件方法。用于在特定的事件中处理数据和逻辑。this指向vm实例对象。
- 不建议使用箭头函数来定义 method 函数，所有vue实例直接管理的函数都不建议是用箭头函数。

watch：{ [key: string]: string | Function | Object | Array }

一个对象，键是需要观察的表达式，值是对应回调函数。
值也可以是方法名，或者包含选项的对象。官网示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // 监听 ‘ vm.e.f ’ 的值 {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

常用生命周期钩子

所有生命周期钩子的 this 上下文将自动绑定至vue实例中，可以访问 data、computed 和 methods。
钩子函数同样不建议使用箭头函数，会改变this指向。

beforeCreate：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
created：在实例创建完成后被立即同步调用。
- 数据侦听、计算属性、方法、事件/侦听器的回调函数已配置完毕。
- 挂载阶段还没开始，且 $el property 目前尚不可用。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
- mounted 不会保证所有的子组件也都被挂载完成。
- 希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：
```
//官网示例：
mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}
```
beforeUpdate：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
- 当这个钩子被调用时，组件 DOM 已经更新，可以修改DOM了。最好使用计算属性或 watcher 取而代之。
- updated 不会保证所有的子组件也都被重新渲染完毕。希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- 此步骤一般用于一些收尾工作，清楚定时器等，不再接受数据修改的请求。
destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
…