初识Vue之API

前言 Hi~ o( ̄▽ ̄)ブ

好家伙,科目三终于过了,硬生生给我拖了一年。
今年毕业生找工作难,大三找实习也难。我已经预见到了我无根浮萍的惨状了。诶≡(▔﹏▔)≡
说回代码,前面算是配置了router,接下来就是写页面了。

页面/组件

页面上.vue与.html文件整体结构上并没有区别

<template>
  <div>

  </div>
</template>

<script>
  export default {
    name: ‘index‘,
  }
</script>

<style>

</style>

也是html+js+css的样式。值得一提的是在vue中在<template>下的第一个<div>是作为一个根源root节点的形式,有一些的API如v-for不能使用。

实例

即在创建Vue实例中所用到的API

  • data

在文件中用于存放数据。

  export default {
      data () {
            return {
      }
}

在使用中需要加一个return,其目的是为了防止变量污染。也就是全局变量和局部变量的区别

  • props

props需要child与parent的配合,即子组件通过props可以访问到父组件的数据。具体可以看IrishMan
的用法详解与官方文档的示例

  • propsData

propsData就不用多说,与上一个相差无几。区别在于一个接收一个传值。
官方实例如下:

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

var vm = new Comp({
  propsData: {
    msg: ‘hello‘
  }
})
  • computed

computed被称为计算属性,默认预设getter,按需要可以添加getter。我的理解是与methods功能类似,不同是computed第一次被调用后进行缓存,随着变量更改而再次调用,如果没有变量就仅加载调用一次。对页面中非变量的渲染以及实时改变的变量渲染应该是有优势的?不是非常理解。gunelark栀子花的讲解应该还是比较详细的。

  • methods

一个主要写js方法的地方

  • watch

监测数据变动,基础了解是动态改变数据关联的状态,分为普通监听以及深度监听,类似于前者只监听root,后者遍历监听包括root在内的所有子节点,使用的话还是有待实战。

  • directives

  • filters

  • components

加载声明组件,如之前配置router以及import vue文件使用

  • parent

父组件,与之对应的是child。一般通过.extend关联

  • minxins

我的理解是和继承类似?官方解释是混合,但没有看明白和extends的区别在哪里

  • extends

很明显,继承

  • provide/inject

和之前的props好像是一种类型的,provide for 提供变量,inject接受变量。其解释是在父组件的生命周期内,其下所有子组件都可以inject调用。

指令

  • v-on

和html中的事件绑定是一样的功能,但一些修饰符的不同需要注意,缩写:@

  • v-bind

通常用于绑定src,key,to等标签属性,将文本标记为变量。缩写::

  • v-model

类似于在html中的type?

  • v-slot

描述是将其他props过来的组件的插槽......router-view???啧,有点懵

  • v-once

标记仅渲染一次,第一次渲染过后其内容为静态内容。

生命周期

  • beforeCreate

实例初始化后,未加载组件属性

  • created

组件属性创建完成,DOM未生成,无$el

  • beforeMount

模板编译之前,实例数据初始化都已完成

  • mounted

模板编译后,挂载完成

  • beforeUpdata

数据更新后view层变化前

  • updata

数据更新完成

  • activated

仅对于中的的变化,于其中组件激活时调用

  • deactivated

仅对于中的的变化,于其中组件移除时调用

  • beforeDestroy

实例销毁前

  • destroyed

实例销毁后调用

  • errorCaptured

错误捕获......这让我想到了try.....catch

生命周期图示

DOM

html创建DOM树——>css创建StyleRules——>两者创建Render树——>Render树页面布局Layout——>绘制Painting

初识Vue之API

其他API

还有全局配置啊,全局api啊,实例property啊,说实话我都搞不清楚......唉有用到再看吧。扒拉出官方API文档链接这块就凑合了。

最后ヾ( ̄▽ ̄)ByeBye

感觉很焦虑...诶...还是自己太菜了...
据说Vue3.0的版本有更多的API,尤大佬还在搞Vite.....好家伙,学不完了。
VUE先放一放,还是返回去学下html和js的基础吧。有点弱....

初识Vue之API

上一篇:PS制作炫酷的游戏专题文字效果


下一篇:cad剖面符号和索引符号该怎么画?