doc: update vue2.md. (#5) da18c16d26

This commit is contained in:
jaywcjlove
2022-10-10 16:04:02 +00:00
parent aa31df0a0b
commit 52fbbb0892

View File

@ -380,10 +380,598 @@
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>带有 <code>v-show</code> 的元素始终会被渲染并保留在 DOM 中,只是简单地切换元素的 <code>CSS</code> 属性 <code>display</code></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="vue-2-api"><a aria-hidden="true" tabindex="-1" href="#vue-2-api"><span class="icon icon-link"></span></a>Vue 2 API</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="全局配置"><a aria-hidden="true" tabindex="-1" href="#全局配置"><span class="icon icon-link"></span></a>全局配置</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>silent</code></td><td align="left">取消所有的日志与警告 <a href="https://v2.cn.vuejs.org/v2/api/#silent">#</a></td></tr><tr><td align="left"><code>optionMergeStrategies</code></td><td align="left">自定义合并策略的选项 <a href="https://v2.cn.vuejs.org/v2/api/#optionMergeStrategies">#</a></td></tr><tr><td align="left"><code>devtools</code></td><td align="left">是否允许 <a href="https://github.com/vuejs/vue-devtools">devtools</a> 检查 <a href="https://v2.cn.vuejs.org/v2/api/#devtools">#</a></td></tr><tr><td align="left"><code>errorHandler</code></td><td align="left">未捕获错误的处理函数 <em>(开发模式生效)</em> <a href="https://v2.cn.vuejs.org/v2/api/#errorHandler">#</a></td></tr><tr><td align="left"><code>warnHandler</code></td><td align="left">运行时警告处理函数 <a href="https://v2.cn.vuejs.org/v2/api/#warnHandler">#</a></td></tr><tr><td align="left"><code>ignoredElements</code></td><td align="left">忽略 Vue 之外的 <em>(自定义元素)</em> <a href="https://v2.cn.vuejs.org/v2/api/#ignoredElements">#</a></td></tr><tr><td align="left"><code>keyCodes</code></td><td align="left"><code>v-on</code> 自定义键位别名 <a href="https://v2.cn.vuejs.org/v2/api/#keyCodes">#</a></td></tr><tr><td align="left"><code>performance</code> <em>(2.2.0)</em></td><td align="left">性能追踪 <a href="https://v2.cn.vuejs.org/v2/api/#performance">#</a></td></tr><tr><td align="left"><code>productionTip</code> <em>(2.2.0)</em></td><td align="left">是否生成生产提示 <a href="https://v2.cn.vuejs.org/v2/api/#productionTip">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="全局-api"><a aria-hidden="true" tabindex="-1" href="#全局-api"><span class="icon icon-link"></span></a>全局 API</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>Vue.extend</code></td><td align="left">Vue 构造器,创建一个“子类” <a href="https://v2.cn.vuejs.org/v2/api/#Vue-extend">#</a></td></tr><tr><td align="left"><code>Vue.nextTick</code></td><td align="left">执行延迟回调 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-nextTick">#</a></td></tr><tr><td align="left"><code>Vue.set</code></td><td align="left">向响应式对象中添加一个属性 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-set">#</a></td></tr><tr><td align="left"><code>Vue.delete</code></td><td align="left">删除对象的 property <a href="https://v2.cn.vuejs.org/v2/api/#Vue-delete">#</a></td></tr><tr><td align="left"><code>Vue.directive</code></td><td align="left">注册或获取全局指令 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-directive">#</a></td></tr><tr><td align="left"><code>Vue.filter</code></td><td align="left">注册或获取全局过滤器 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-filter">#</a></td></tr><tr><td align="left"><code>Vue.component</code></td><td align="left">注册或获取全局组件 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-component">#</a></td></tr><tr><td align="left"><code>Vue.use</code></td><td align="left">安装 Vue.js 插件 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-use">#</a></td></tr><tr><td align="left"><code>Vue.mixin</code></td><td align="left">全局注册一个混入 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-mixin">#</a></td></tr><tr><td align="left"><code>Vue.compile</code></td><td align="left">将模板字符串编译成 render 函数 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-compile">#</a></td></tr><tr><td align="left"><code>Vue.observable</code></td><td align="left">让一个对象可响应 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-observable">#</a></td></tr><tr><td align="left"><code>Vue.version</code></td><td align="left">Vue 安装版本号 <a href="https://v2.cn.vuejs.org/v2/api/#Vue-version">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数据"><a aria-hidden="true" tabindex="-1" href="#数据"><span class="icon icon-link"></span></a>数据</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>data</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#data">#</a></td></tr><tr><td align="left"><code>props</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#props">#</a></td></tr><tr><td align="left"><code>propsData</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#propsData">#</a></td></tr><tr><td align="left"><code>computed</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#computed">#</a></td></tr><tr><td align="left"><code>methods</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#methods">#</a></td></tr><tr><td align="left"><code>watch</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#watch">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="dom"><a aria-hidden="true" tabindex="-1" href="#dom"><span class="icon icon-link"></span></a>DOM</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>el</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#el">#</a></td></tr><tr><td align="left"><code>template</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#template">#</a></td></tr><tr><td align="left"><code>render</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#render">#</a></td></tr><tr><td align="left"><code>renderError</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#renderError">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="生命周期钩子"><a aria-hidden="true" tabindex="-1" href="#生命周期钩子"><span class="icon icon-link"></span></a>生命周期钩子</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>beforeCreate</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#beforeCreate">#</a></td></tr><tr><td align="left"><code>created</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#created">#</a></td></tr><tr><td align="left"><code>beforeMount</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#beforeMount">#</a></td></tr><tr><td align="left"><code>mounted</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#mounted">#</a></td></tr><tr><td align="left"><code>beforeUpdate</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#beforeUpdate">#</a></td></tr><tr><td align="left"><code>updated</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#updated">#</a></td></tr><tr><td align="left"><code>activated</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#activated">#</a></td></tr><tr><td align="left"><code>deactivated</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#deactivated">#</a></td></tr><tr><td align="left"><code>beforeDestroy</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#beforeDestroy">#</a></td></tr><tr><td align="left"><code>destroyed</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#destroyed">#</a></td></tr><tr><td align="left"><code>errorCaptured</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#errorCaptured">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="资源"><a aria-hidden="true" tabindex="-1" href="#资源"><span class="icon icon-link"></span></a>资源</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>directives</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#directives">#</a></td></tr><tr><td align="left"><code>filters</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#filters">#</a></td></tr><tr><td align="left"><code>components</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#components">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="组合"><a aria-hidden="true" tabindex="-1" href="#组合"><span class="icon icon-link"></span></a>组合</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>parent</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#parent">#</a></td></tr><tr><td align="left"><code>mixins</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#mixins">#</a></td></tr><tr><td align="left"><code>extends</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#extends">#</a></td></tr><tr><td align="left"><code>provide / inject</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#provide-inject">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="其它"><a aria-hidden="true" tabindex="-1" href="#其它"><span class="icon icon-link"></span></a>其它</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>name</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#name">#</a></td></tr><tr><td align="left"><code>delimiters</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#delimiters">#</a></td></tr><tr><td align="left"><code>functional</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#functional">#</a></td></tr><tr><td align="left"><code>model</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#model">#</a></td></tr><tr><td align="left"><code>inheritAttrs</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#inheritAttrs">#</a></td></tr><tr><td align="left"><code>comments</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#comments">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="实例方法--数据"><a aria-hidden="true" tabindex="-1" href="#实例方法--数据"><span class="icon icon-link"></span></a>实例方法 / 数据</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$watch</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-watch">#</a></td></tr><tr><td align="left"><code>vm.$set</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-set">#</a></td></tr><tr><td align="left"><code>vm.$delete</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-delete">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="实例-property"><a aria-hidden="true" tabindex="-1" href="#实例-property"><span class="icon icon-link"></span></a>实例 property</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$data</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-data">#</a></td></tr><tr><td align="left"><code>vm.$props</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-props">#</a></td></tr><tr><td align="left"><code>vm.$el</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-el">#</a></td></tr><tr><td align="left"><code>vm.$options</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-options">#</a></td></tr><tr><td align="left"><code>vm.$parent</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-parent">#</a></td></tr><tr><td align="left"><code>vm.$root</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-root">#</a></td></tr><tr><td align="left"><code>vm.$children</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-children">#</a></td></tr><tr><td align="left"><code>vm.$slots</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-slots">#</a></td></tr><tr><td align="left"><code>vm.$scopedSlots</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-scopedSlots">#</a></td></tr><tr><td align="left"><code>vm.$refs</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-refs">#</a></td></tr><tr><td align="left"><code>vm.$isServer</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-isServer">#</a></td></tr><tr><td align="left"><code>vm.$attrs</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-attrs">#</a></td></tr><tr><td align="left"><code>vm.$listeners</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-listeners">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="实例方法--事件"><a aria-hidden="true" tabindex="-1" href="#实例方法--事件"><span class="icon icon-link"></span></a>实例方法 / 事件</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$on</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-on">#</a></td></tr><tr><td align="left"><code>vm.$once</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-once">#</a></td></tr><tr><td align="left"><code>vm.$off</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-off">#</a></td></tr><tr><td align="left"><code>vm.$emit</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-emit">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="实例方法--生命周期"><a aria-hidden="true" tabindex="-1" href="#实例方法--生命周期"><span class="icon icon-link"></span></a>实例方法 / 生命周期</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>vm.$mount</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-mount">#</a></td></tr><tr><td align="left"><code>vm.$forceUpdate</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-forceUpdate">#</a></td></tr><tr><td align="left"><code>vm.$nextTick</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-nextTick">#</a></td></tr><tr><td align="left"><code>vm.$destroy</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#vm-destroy">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="指令-1"><a aria-hidden="true" tabindex="-1" href="#指令-1"><span class="icon icon-link"></span></a>指令</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-text</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-text">#</a></td></tr><tr><td align="left"><code>v-html</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-html">#</a></td></tr><tr><td align="left"><code>v-show</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-show">#</a></td></tr><tr><td align="left"><code>v-if</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-if">#</a></td></tr><tr><td align="left"><code>v-else</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-else">#</a></td></tr><tr><td align="left"><code>v-else-if</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-else-if">#</a></td></tr><tr><td align="left"><code>v-for</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-for">#</a></td></tr><tr><td align="left"><code>v-on</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-on">#</a></td></tr><tr><td align="left"><code>v-bind</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-bind">#</a></td></tr><tr><td align="left"><code>v-model</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-model">#</a></td></tr><tr><td align="left"><code>v-slot</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-slot">#</a></td></tr><tr><td align="left"><code>v-pre</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-pre">#</a></td></tr><tr><td align="left"><code>v-cloak</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-cloak">#</a></td></tr><tr><td align="left"><code>v-once</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#v-once">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="特殊-attribute"><a aria-hidden="true" tabindex="-1" href="#特殊-attribute"><span class="icon icon-link"></span></a>特殊 attribute</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>key</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#key">#</a></td></tr><tr><td align="left"><code>ref</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#ref">#</a></td></tr><tr><td align="left"><code>is</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#is">#</a></td></tr><tr><td align="left"><del><code>slot</code></del></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#slot-%E5%BA%9F%E5%BC%83">#</a></td></tr><tr><td align="left"><del><code>slot-scope</code></del></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#slot-scope-%E5%BA%9F%E5%BC%83">#</a></td></tr><tr><td align="left"><del><code>scope</code></del></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#scope-%E7%A7%BB%E9%99%A4">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内置的组件"><a aria-hidden="true" tabindex="-1" href="#内置的组件"><span class="icon icon-link"></span></a>内置的组件</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>component</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#component">#</a></td></tr><tr><td align="left"><code>transition</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#transition">#</a></td></tr><tr><td align="left"><code>transition-group</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#transition-group">#</a></td></tr><tr><td align="left"><code>keep-alive</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#keep-alive">#</a></td></tr><tr><td align="left"><code>slot</code></td><td align="left"><a href="https://v2.cn.vuejs.org/v2/api/#slot">#</a></td></tr></tbody></table>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf">Vue Essentials Cheat-Sheet.pdf</a> <em>(vuemastery.com)</em></li>
<li><a href="https://v2.cn.vuejs.org/">Vue 2 官方文档</a> <em>(vuejs.org)</em></li>
<li><a href="https://marozed.com/vue-cheatsheet#Instance-Methods-Events">Vue 2 实例方法事件</a> <em>(marozed.com)</em></li>
</ul>
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
</html>