HTML_什么是html

发表于 2020-02-29 更新于 2021-08-09 分类于 HTML
本文字数： 855 阅读时长 ≈ 1 分钟

什么是 HTML

HTML 是用来描述网页的一种语言

- HTML 指的是超文本标记语言(Hyper Markuo Language)
- HTMl 是一种标记语言
- 标记语言是一套标记标签
- HTML 使用标记标签来描述网页

W3C 简介

万维网联盟（英语：World Wide Web Consortium，缩写W3C），又称W3C理事会，是万维网的主要国际标准组织[2]。为半自治非政府组织（quasi-autonomous non-governmental organisation）。

MDN 简介

MDN Web Docs（旧称Mozilla Developer Network、Mozilla Developer Center，简称MDN）是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站[1]。

HTMl 标签

HTML 标记标签通常被称为 HTMl 标签

- HTML 标签是由**尖括号**包围的关键词
- HTML 标签通常是**成对**出现的
- 标签对中的第一个标签是**开始标签**, 第二个标签是**结束标签**
- 开始和结束标签也被称为**开放标签**和**闭合标签**

HTML 文档 = 网页

- HTML 文档**描述网页**
- HTML 文档**包含 HTML 标签** 和纯文本
- HTML 文档也被称为**网页**

例子

Web 浏览器的作用是读取 HTML 文档, 并以网页的形式显示出他们. 浏览器不会显示 HTML 标签, 而是使用标签来解释页面的内容

1
2
3
4
5
6
7
8
<html>
  <body>
    <h1>
      第一个标签
    </h1>
    <p>段落</p>
  </body>
</html>

例子解释

- `<html>` 与 `</html>` 之间的文本描述网页
- `<body>` 与 `</body>` 之间的文本是可见的页面内容
- `<h1>` 与 `<h1>` 之间的文本被显示为标题
- `<p>` 与 `</p>` 之间的文本被显示为段落

vue内置组件

发表于 2020-02-27 更新于 2021-08-09 分类于 Vue
本文字数： 3.7k 阅读时长 ≈ 3 分钟

component

props:
- is: string | ComponentDefinition | ComponentConstructor
- inline-template: boolean

用法:
渲染一个元组件为动态组件. 依 is 的值, 来决定那个组件被渲染

<!-- 动态组件由 vm 实例的属性值 componentId 控制 -->
<component :is='componentId'></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is='$options.components.child'></component>

transition

Props:
- name: string, 用于自动生成 CSS 过渡类名. 例如 name: 'fade' 将自动扩展为 .fade-enter, .fade-enter-active等
- appear: boolean, 是否在初始渲染时使用过渡默认 false
- css: boolean, 是否使用 CSS 过渡类. 默认为 true 如果设置为 false 将只通过组件事件触发注册的 JavaScript 钩子
- type: string, 指定过渡事件类型, 侦听过渡何时结束. 有效值为 transition 和 animation. 默认 Vue 将自动检测出赤足时间长的为过渡事件类型.
- mode: string, 控制离开/进入过渡的时间序列. 有效的模式有 out-in 和 in-out 默认同时进行
- duration: number| { enter: number, leave: number } 指定过渡的持续时间. 默认情况下会等待过渡所在根元素的第一个 transition 或 animation 事件
- enter-class: string
- leave-class: string
- appear-class: string
- enter-to-class: string
- leave-to0class: string
- appear-to0class: string
- enter-active-class: string
- leave-active-class: string
- appear-active-class: string
事件:
- before-enter
- before-leave
- before-appear
- enter
- leave
- appear
- after-enter
- after-leave
- after-appear
- enter-cancelled
- leave-cancelled
- appear-cancelled

用法:

<!-- 简单元素 -->
<transition>
  <div v-if="show">SHOW</div>
</transition>

<!-- 动态组件 -->
<transition name="fade" apear>
  <component :is="view"></component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete"></transition>
</div>

new Vue({
  methods: {
    transitionComponlete(el) {
      // 传入 'el' 这个 DOM 元素作为参数。
    }
  }
}).$mount('#transition-demo')

transition-group

Props:
- tag: string 默认为 span
- move-class: 覆盖移动过渡期间应用的 CSS 类
- 除了 mode, 其他特性和 <transition> 相同
事件:
- 事件和<transition>相同
用法:
<transition-group> 元素作为多个元素/组件的过渡效果. <transition-group> 渲染一个真实的 DOM 元素. 默认渲染 <span> 可以通过 tag 属性配置那个元素应该被渲染

注意, 每个 <transition-group> 的子节点必须有独立的 key. 动画才能正常工作

<transition-group> 支持通过 CSS transform 过渡移动. 当一个子节点被更新, 从屏幕上的位置发生变化. 他会被应用一个移动中的 CSS 类. 如果 CSS transform 属性是可以过渡属性, 当应用移动类时, 将会使用 FLIP 技术使元素流畅的到达动画终点
1
2
3
4
5
<transition-group tag="ul" name="slide">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>

keep-alive

Props:
- include: 字符串或正则表达式, 只有名称匹配的组件会被缓存
- exclude: 字符串或正则表达式, 任何名称匹配的组件都不会被缓存
- max: 数字, 最多可以缓存多少组件实例

用法:
<keep-alive> 包裹动态组件时, 它缓存不活动的组件实例. 而不是销毁他们. 和 <transition>相似.
<keep-alive> 是一个抽象组件: 它自身不会渲染一个 DOM 元素. 也不会出现在组件的父组件链中

当组件在 <keep-alive> 内被切换, 它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

注意，<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

include and exclude
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

max
最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
1
2
3
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>

slot

Props:
- name: string, 用于命名插槽
Usage:
<slot> 元素作为组件模板之中的内容分发插槽. <slot>元素自身将被替换

vue特殊特性

发表于 2020-02-27 更新于 2021-08-09 分类于 Vue
本文字数： 1.2k 阅读时长 ≈ 1 分钟

key

预期: number | string
key 的投入数属性主要用在 Vue 的虚拟 DOM 算法. 在新旧 nodes 对比时辨识 VNode. 如果不使用 key, Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法. 而使用 key 时, 他会基于 key 的变化重新排列元素顺序. 并且会移除 key 不存在的元素

有相同父元素的子元素必须有独特的 key, 重复的 key 会造成渲染错误

最常见的用例是结合 v-for
1
2
3
<ul>
<li v-for="item in items" v-bind:key="item.id">...</li>
</ul>
它也可以用于强制特换元素/组件而不是重复使用它, 当你遇到如下场景时他可能会很有用
- 完整的触发组件的生命周期钩子
- 触发过渡
例如:
1
2
3
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时, <span> 总是会被替换而不是被修改. 因为会触发过渡

ref

预期: string
ref 被用来给元素或子组件注册引用信息. 引用信息将会被注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用. 引用指向的就是 DOM 元素. 如果用在子组件上, 引用就指向组件实例
1
2
3
4
5
6

<p ref="p">hello</p>



<child-component ref="child"></child-component>
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

is

预期: string | Object
用于动态组件且基于 DOM 内模板的限制来工作

示例:

<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>

<!-- 这样做是有必要的，因为 `<my-row>` 放在一个 -->
<!-- `<table>` 内可能无效且被放置到外面 -->
<table>
  <tr is="my-row"></tr>
</table>

vue指令

发表于 2020-02-26 更新于 2021-08-09 分类于 Vue
本文字数： 6.4k 阅读时长 ≈ 6 分钟

v-text

预期: string
详细:
更新元素的 textContent. 如果要更新部分的 textContent, 需要使用插值

示例:

1
2
3

<span v-text="msg"></span>
<!-- 和下面一样 -->
<span>{{msg}}</span>

v-html

预期: string
详细:
更新元素的 innerHTML. 注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
示例
1
<div v-html="html"></div>

v-show

预期: any
用法:
根据表达式之真假值, 切换元素的 display CSS 属性
当条件变化时该指令触发过渡效果

v-if

预期: any
用法:
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

v-else

不需要表达式
限制: 前一个兄弟元素必须有 v-if 或 v-else-if

用法:
为 v-if 或者 v-else-if 添加 else 块

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

类型: any
限制: 前一兄弟元素必须有 v-if 或 v-else-if

用法:
表示 v-if 的 else 块. 可以链式调用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for

预期: Array | Object | number | string | Iterable
用法:
基于源数据多次渲染元素或模板块. 此指令之值. 必须使用特定语法 alias in expression, 为当前遍历的元素提供别名
1
2
3
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键)：
1
2
3
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 key 来提供一个排序提示：
1
2
3
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>

v-on

缩写: @
预期: Function | Inline Statement | Object
参数: event
修饰符:
- .stop 调用 event.stopPropagation()
- .prevent 调用 event.preventDefault()
- .capture 添加时间侦听器时使用 capture 模式
- .self 只当时间是从侦听器绑定的元素本身触发时才触发回调
- .{keyCode | keyAlias} 只当时间是从特定键触发时才触发回调
- .native 监听组件根元素的原声事件
- .once 只触发一次回调
- .left 只当点击鼠标左键时触发
- .right 只当点击鼠标右键时触发
- .middle 只当点击鼠标中键时触发
- .passive 以 { passive: true } 模式添加侦听器
用法:
绑定事件监听器. 事件类型由参数指定. 表达式可以是一个方法的名字或一个内联语句. 如果没有修饰符也可以省略

用在普通元素上时, 只能监听原生 DOM 事件, 用在自定义元素上时, 也可以监听子组件触发的自定义事件

在监听原生 DOM 事件时, 方法以事件为唯一的参数. 如果使用内联语句, 语句可以访问一个 $event 属性. v-on:clicl="handle('ok', $event)“

示例

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->

<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->

<button @[event]="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->

<input @keyup.enter="onEnter" />

<!-- 键修饰符，键代码 -->

<input @keyup.13="onEnter" />

<!-- 点击回调只会触发一次 -->

<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

在子组件上监听自定义事件

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

v-bin

缩写: :
预期: any (with argument) | Object (without argument)
参数:
- .prop 作为一个 DOM property 绑定而不是作为 attribute 绑定
- .camel 将 kebab-case 特性名转换为 camelCase.
- .sync 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器
用法:
动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象

示例:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc" />

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model

预期: 随表单控件类型不同而不同
限制:
- <input>
- <select>
- <textarea>
- components
修饰符:
- .lazy 取代 input 监听 change 事件
- .number 输入字符串转为有效数字
- .trim 输入首尾空格过滤
用法:
在表单控件或者组件上创建双向绑定

v-slot

缩写: #
预期:
可放置在函数参数位置的 JavaScript 表达式. 可选, 即只需要在为插槽传入 prop 的时候使用
参数:
插槽名(默认是default)
限用于:
- <template>
- 组件
用法:
提供具名插槽或

示例:

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

v-pre

不需要表达式
用法:
跳过这个元素和它的子元素编译过程; 可以用来显示原始 Mustache 标签. 跳过大量没有指令的节点会加快编译

示例:

1	<span v-pre>{{ this will not be compiled }}</span>

v-cloak

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

示例

1
2
3

[v-cloak] {
  display: none;
}

1
2
3

<div v-cloak>
  {{ message }}
</div>

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

v-once

不需要表达式

详细:
只渲染元素和组件一次. 随后的重新渲染. 元素/组件及其所有的子节点将被视为静态内容并跳过. 这可以用于优化更新性能

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

vue实例方法生命周期

发表于 2020-02-26 更新于 2021-08-09 分类于 Vue
本文字数： 1.1k 阅读时长 ≈ 1 分钟

vm.$mount([elementOrSeletor])

参数:
- {Element | string} [elementOrSelector]
- {boolean} [hydrating]
返回值: vm - 实例自身
用法:
如果 Vue 实例在实例化时没有收到 el 选项, 则它处于未挂载状态, 没有关联的 DOM 元素.可以使用 vm.$mount() 手动挂载一个未挂载的实例
如果没有提供 elementOrSelector 参数, 模板将被渲染为文档之外的元素, 并且你必须使用原生 DOM API 把它插入文档中
这个方法返回实例自身, 因而可以链式调用其他实例方法

示例:

var MyComponent = Vue.extend({
  template: '<div>Hi</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

vm.$forceUpdate()

示例
迫使 Vue 实例重新渲染, 注意他仅仅影响实例本身和插入插槽的子组件

vm.$nextTick([callback])

参数:
- {Function} [callback]
用法:
将回调延迟到下次 DOM 更新循环之后执行. 在修改数据之后立即使用它, 然后等待 DOM 更新. 它跟全局方法 Vue.nextTick 一样, 不同的是回调的 this 自动绑定到调用它的实例上

示例:

new Vue({
  // ...
  methods: {
    // ...
    example: function() {
      // 修改数据
      this.message = 'changed'
      // DOM 现在还没更新
      this.$nextTick(function() {
        // DOM 现在更新了
        // this 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})

vm.$destroy()

用法:
完全销毁一个实例. 清理他与其他实例的链接. 解绑他的全部指令及事件监听器
触发 beforeDestroy 和 destroyed 的钩子

vue实例方法事件

发表于 2020-02-26 更新于 2021-08-09 分类于 Vue
本文字数： 1.6k 阅读时长 ≈ 1 分钟

vm.$on(event, callback)

参数:
- {string | Array} event
- {Function} callback
用法:
监听当前实例上的自定义事件, 事件可以由 vm.$emit 触发. 回调函数会接受所有传入事件触发函数的额外参数

示例:

vm.$on('test', function(msg) {
  console.log(msg)
})
vm.$emit('test', 'Ginger')
// => Ginger

vm.$once(event, target)

参数:
- {string} event
- {Function} callback
用法:
监听一个自定义事件, 但是只触发一次, 一旦触发之后, 监听器就会被移除

vm.$off(event, callback)

参数:
- {string | Array} event
- {Function} [callback]
用法
移除自定义事件监听器
- 如果没有提供参数, 则移除所有事件监听器
- 如果只提供了事件, 则移除该事件的所有监听器
- 如果同时提供了事件与回调, 则只移除这个回调的监听器

vm.$emit(eventName, […args])

参数:
- {string} eventName
- […args]
  触发当前实例上的事件

示例:
只配合一个事件名使用 $emit

Vue.component('welcome-button', {
  template: `
  <button v-on:click="$emit('welcome')">
    Click me to be welcomed
  </button>
`
})

1
2
3

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function() {
      alert('Hi!')
    }
  }
})

配合额外的参数使用 $emit

Vue.component('magic-eight-ball', {
  data: function() {
    return {
      possibleAdvice: ['Yes', 'No', 'Maybe']
    }
  },
  methods: {
    giveAdvice: function() {
      var randomAdviceIndex = Math.floor(
        Math.random() * this.possibleAdvice.length
      )
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
  <button v-on:click="giveAdvice">
    Click me for advice
  </button>
`
})

1
2
3

<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>

new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function(advice) {
      alert(advice)
    }
  }
})

vue实例方法数据

发表于 2020-02-26 更新于 2021-08-09 分类于 Vue
本文字数： 1.2k 阅读时长 ≈ 1 分钟

vm.$watch(expOrFn, callback, [options])

参数
- {string | Function} expOrFn
- {Function | Object} callback
- {Object} [options]
  - {boolean} deep
  - {boolean} immediate
返回值 {Function} newwatch
用法
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化. 回调永汉得到的参数为新值和旧值. 表达式只接受监督的键路径

示例

// 键路径
vm.$watch('a.b.c', function(newVal, oldVal) {})

// 函数
vm.$watch(
  function() {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function(newVal, oldVal) {
    // 做点什么
  }
)

vm.$watch 返回一个取消观察函数, 用来停止触发回调

1
2
3

var unwatch vm.$watch('a', cb)
// 取消观察
unwatch()

选项: deep
为了发现对象内部值的变化, 可以在选项参数中指定 deep: true 将立即以表达式的当前值触发回调:

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 'a' 的当前值触发回调

注意在带有 immediate选项时, 不能再第一次回调时取消侦听给定的 property

// 这会导致报错
var unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

如果想在会调内部调用一个取消侦听的函数, 应该先检查其函数的可用性

var unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

vm.$set(target, propertyName/index,value)

参数:
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值: 设置的值
用法: 这是全局 Vue.set 的别名

vm.$delete(target, propertyName/index)

参数:
- {Object | Array} target
- {string | number} propertyname/index
用法: 这是全局 Vue.delete 的别名

vue实例属性

发表于 2020-02-25 更新于 2021-08-09 分类于 Vue
本文字数： 1.9k 阅读时长 ≈ 2 分钟

vm.$data

类型: Object
详细:
Vue 实例观察的数据对象. Vue 实例代理了对其 data 对象属性的访问

vm.$props

类型: Object
详细:
当前组件接受到的 props 对象. Vue 实例代理了对其 props 对象属性的访问

vm.$el

类型: Elemnt
只读
详细:
Vue 实例使用的根 DOM 元素

vm.$options

类型: Object
只读

详细:
用于当前 Vue 实例的初始化选项. 需要在选项中包含自定义属性时会有用处

new Vue({
  customOption: 'foo',
  created: function() {
    console.log(this.$options.customOption) // => foo
  }
})

vm.$parent

类型: Vue instance
只读
详细:
父实例

vm.$root

类型: Vue instance
只读
详细:
当前组件树的根 Vue 实例. 如果当前实例没有父实例, 此实例将会是其自己.

vm.$children

类型: Array
只读
详细:
当前实例的直接子组件. 不保证顺序, 也不是响应式的

vm.$slots

类型: { [name: string]: ?Array}
只读
详细:
用来访问被插槽分发的内容. 每个具名插槽有其相应的属性.

示例:

<blog-post>
  <template v-slot:header>
    <h1>About Me</h1>
  </template>

  <p>
    Here's some page content, which will be included in vm.$slots.default,
    because it's not inside a named slot.
  </p>

  <template v-slot:footer>
    <p>Copyright 2016 Evan You</p>
  </template>

  <p>
    If I have some content down here, it will also be included in
    vm.$slots.default.
  </p>
</blog-post>

Vue.component('blog-post',
  render: function(createElement) {
    var header = this.$slots.header
    var  body = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', hdaer)
      createElement('main', body)
      createElement('footer', footer)
    ])
  }
)

vm.$scopedSlots

类型: { [name: string]: props => Array | undefined }
只读
详细:
用来访问作用域插槽. 对于包括默认 slot 在内的每一个插槽. 该对象都包含一个返回相应 VNode 的函数
注意:
作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。

所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。

vm.$refs

类型: Object
只读
详细:
一个对象, 持有注册过 ref 特性的所有 DOM 元素和组件实例

vm.$isServer

类型: boolean
只读
详细:
当前 Vue 实例是否运行于服务器

vm.$attrs

类型: { [key: string]: string}
只读
详细:
包含了父作用域中不作为 prop 被识别的特性绑定(class和style除外). 当一个组件没有声明任何 prop 时, 这里会包含所有父作用域的绑定, 并且可以通过 v-bind="$attrs 传入内部组件

vm.$listeners

类型: { [key: string]: Function | Array }
只读
详细:
包含了父作用域中v-on事件监听器, 他可以通过v-on=$listeners传入内部组件

vue选项其他

发表于 2020-02-24 更新于 2021-08-09 分类于 Vue
本文字数： 1.3k 阅读时长 ≈ 1 分钟

name

类型: string
限制: 只有作为组件选项时起作用
详细:
允许组件模板递归的调用自身, 组件在全局用 Vue.component() 注册时, 全局 ID 自动作为组件的 name
指定 name 选项的另一个好处是便于调试, 有名字的组件有更友好的警告信息

delimiters

类型: Array<string>
默认值: [",]
限制: 这个选项只在完整构建版本中的浏览器内编译时可用
详细:
改变纯文本插入分隔符

示例

new Vue({
  delimiters: `['${''}']`
})

// 分隔符变成了 ES6 模板字符串的风格

functional

类型: boolean
详细:
使组件无状态(没有data)和无示例(没有this上下文). 他们用一个简单的 render 函数返回虚拟节点使他们渲染的代价更小

model

类型: { prop?: string, event?: string}
详细:
允许一个自定义组件在使用v-model时定制 prop 和 event. 默认情况下, 一个组件上的v-model会把value用作 prop 且把input用作 event, 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来打到不同的目的

示例

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  }
  // ...
})

1	<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码相当于:

1 2	<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"> </my-checkbox>

inheritAttrs

类型: boolean
默认值: true
详细:
默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。

comments

类型: boolran
默认值: false
限制: 这个选项只有在完成构建版本中的浏览器内编译时可用
详细:
当设为 true 时, 将会保留且渲染模板中的 HTML 注释

vue选项组合

发表于 2020-02-23 更新于 2021-08-09 分类于 Vue
本文字数： 2k 阅读时长 ≈ 2 分钟

parent

类型: Vue instance
详细:
指定已创建的实例之父实例, 在两者之间建立父子关系. 子实例可以用 this.$parent 访问父实例. 子实例被推入父实例的 $children 数组中

mixins

类型: Array<Object>
详细:
mixins 选项接受一个混入对象的数组, 这些混入对象可以像正常的实例对象一样包含实例选项. 这些选项将会被合并到最终的选项中, 使用的是和 Vue.extend() 一样的选项合并逻辑. 也就是说, 如果你的混入包含一个 created 钩子, 而创建组件本身也有一个, name 两个函数都会被调用
Mixin 钩子按照传入的顺序依次调用, 并在调用组件自身的钩子之前被调用

示例

var mixin = {
  created: function() {
    console.log(1)
  }
}

var vm = new Vue({
  created: function() {
    console.log(2)
  },
  mixins: [mixin]
})
// => 1
// => 2

extends

类型: Object | Function
详细:
允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数), 而无需使用 Vue.extend
这主要是为了便于扩展单文件组件
这和 mixin 类型

示例

var ComA = { ... }

// 在没有调用 `Vue.extend` 时候继承 ComA
var ComB = {
  extends: ComA
  ...
}

provide / inject

类型:
- provide: Object | () => Object
- inject: Array<string> | { [key: string]: string | Symbol | Object}
详细:
这对选项需要一起使用, 以允许一个祖先组件向其所有子孙后台注入一个依赖, 不论组件层次有多深, 并在起上下游关系成立的时间里始终生效.
provide 选项应该是一个对象或返回一个对象的函数, 该对象包含可注入其子孙的属性. 在该对象中你可以使用 ES2015 Symbols, 但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是:
- 一个字符串数组, 或
- 一个对象, 对象的 key 是本地的绑定名, value 是:
  - 在可用的注入内容中搜索用的 key,或
  - 一个对象, 该对象的:
    - from 属性实在可用的注入内容中搜索用的 key
    - default 属性是降级情况下使用的 value

示例

// 父组件提供的 foo
var Provider = {
  provide: {
    foo: 'bar'
  }
  // ...
}

// 子组件注入 foo
var Chil = {
  inject: ['foo'],
  created: function() {
    console.log(this.foo) // => bar
  }
}

利用 Symbols、函数、provide 和对象 inject

const s = Symbol()

const Provider = {
  provide() {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s }
}

使用一个注入的值作为一个属性的默认值

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default() {
        return this.foo
      }
    }
  }
}

使用一个注入的值作为数据入口

// 2.2.1
const Child = {
  inject: ['foo'],
  data() {
    return {
      bar: this.foo
    }
  }
}

// 2.5
const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

如果需要从一个不同名字的属性注入, 则使用 from 来表示其源属性:

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

与 prop 的默认值类型, 你需要对非原始值使用一个工厂方法

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}