uTools-Manuals/docs/vue/全局-API.html

<h2 id="全局-API"><a href="#全局-API" class="headerlink" title="全局 API" data-scroll="">全局 API</a></h2><h3 id="Vue-extend"><a href="#Vue-extend" class="headerlink" title="Vue.extend( options )" data-scroll="">Vue.extend( options )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object} options</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。</p>
<p><code>data</code> 选项是特例，需要注意 - 在 <code>Vue.extend()</code> 中它必须是函数</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mount-point"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
<pre><code class="hljs js"><span class="hljs-comment">// 创建构造器</span>
<span class="hljs-keyword">var</span> Profile = Vue.extend({
  <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;p&gt;{{firstName}} {{lastName}} aka {{alias}}&lt;/p&gt;'</span>,
  <span class="hljs-attr">data</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Walter'</span>,
      <span class="hljs-attr">lastName</span>: <span class="hljs-string">'White'</span>,
      <span class="hljs-attr">alias</span>: <span class="hljs-string">'Heisenberg'</span>
    }
  }
})
<span class="hljs-comment">// 创建 Profile 实例，并挂载到一个元素上。</span>
<span class="hljs-keyword">new</span> Profile().$mount(<span class="hljs-string">'#mount-point'</span>)</code></pre>
<p>结果如下：</p>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Walter White aka Heisenberg<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
</li>
<li><p><strong>参考</strong>：<a href="guide/components.html">组件</a></p>
</li>
</ul>
<h3 id="Vue-nextTick"><a href="#Vue-nextTick" class="headerlink" title="Vue.nextTick( [callback, context] )" data-scroll="">Vue.nextTick( [callback, context] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Function} [callback]</code></li>
<li><code>{Object} [context]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。</p>
<pre><code class="hljs js"><span class="hljs-comment">// 修改数据</span>
vm.msg = <span class="hljs-string">'Hello'</span>
<span class="hljs-comment">// DOM 还没有更新</span>
Vue.nextTick(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// DOM 更新了</span>
})

<span class="hljs-comment">// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)</span>
Vue.nextTick()
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// DOM 更新了</span>
  })</code></pre>
<blockquote>
<p>2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。</p>
</blockquote>
</li>
<li><p><strong>参考</strong>：<a href="guide/reactivity.html#异步更新队列">异步更新队列</a></p>
</li>
</ul>
<h3 id="Vue-set"><a href="#Vue-set" class="headerlink" title="Vue.set( target, key, value )" data-scroll="">Vue.set( target, key, value )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key</code></li>
<li><code>{any} value</code></li>
</ul>
</li>
<li><p><strong>返回值</strong>：设置的值。</p>
</li>
<li><p><strong>用法</strong>：</p>
<p>向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 <code>this.myObject.newProperty = 'hi'</code>)</p>
<p class="tip">注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。</p>

</li>
</ul>
<h3 id="Vue-delete"><a href="#Vue-delete" class="headerlink" title="Vue.delete( target, key )" data-scroll="">Vue.delete( target, key )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Array} target</code></li>
<li><code>{string | number} key/index</code></li>
</ul>
<blockquote>
<p>仅在 2.2.0+ 版本中支持 Array + index 用法。</p>
</blockquote>
</li>
<li><p><strong>用法</strong>：</p>
<p>删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。</p>
<blockquote>
<p>在 2.2.0+ 中同样支持在数组上工作。</p>
</blockquote>
<p class="tip">目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。</p>
</li>
<li><p><strong>参考</strong>：<a href="guide/reactivity.html">深入响应式原理</a></p>
</li>
</ul>
<h3 id="Vue-directive"><a href="#Vue-directive" class="headerlink" title="Vue.directive( id, [definition] )" data-scroll="">Vue.directive( id, [definition] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} id</code></li>
<li><code>{Function | Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>注册或获取全局指令。</p>
<pre><code class="hljs js"><span class="hljs-comment">// 注册</span>
Vue.directive(<span class="hljs-string">'my-directive'</span>, {
  <span class="hljs-attr">bind</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{},
  <span class="hljs-attr">inserted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{},
  <span class="hljs-attr">update</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{},
  <span class="hljs-attr">componentUpdated</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{},
  <span class="hljs-attr">unbind</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{}
})

<span class="hljs-comment">// 注册 (指令函数)</span>
Vue.directive(<span class="hljs-string">'my-directive'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// 这里将会被 `bind` 和 `update` 调用</span>
})

<span class="hljs-comment">// getter，返回已注册的指令</span>
<span class="hljs-keyword">var</span> myDirective = Vue.directive(<span class="hljs-string">'my-directive'</span>)</code></pre>
</li>
<li><p><strong>参考</strong>：<a href="guide/custom-directive.html">自定义指令</a></p>
</li>
</ul>
<h3 id="Vue-filter"><a href="#Vue-filter" class="headerlink" title="Vue.filter( id, [definition] )" data-scroll="">Vue.filter( id, [definition] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} id</code></li>
<li><code>{Function} [definition]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>注册或获取全局过滤器。</p>
<pre><code class="hljs js"><span class="hljs-comment">// 注册</span>
Vue.filter(<span class="hljs-string">'my-filter'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) </span>{
  <span class="hljs-comment">// 返回处理后的值</span>
})

<span class="hljs-comment">// getter，返回已注册的过滤器</span>
<span class="hljs-keyword">var</span> myFilter = Vue.filter(<span class="hljs-string">'my-filter'</span>)</code></pre>
</li>
<li><p><strong>参考</strong>：<a href="guide/filters.html">过滤器</a></p>
</li>
</ul>
<h3 id="Vue-component"><a href="#Vue-component" class="headerlink" title="Vue.component( id, [definition] )" data-scroll="">Vue.component( id, [definition] )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} id</code></li>
<li><code>{Function | Object} [definition]</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>注册或获取全局组件。注册还会自动使用给定的<code>id</code>设置组件的名称</p>
<pre><code class="hljs js"><span class="hljs-comment">// 注册组件，传入一个扩展过的构造器</span>
Vue.component(<span class="hljs-string">'my-component'</span>, Vue.extend({ <span class="hljs-comment">/* ... */</span> }))

<span class="hljs-comment">// 注册组件，传入一个选项对象 (自动调用 Vue.extend)</span>
Vue.component(<span class="hljs-string">'my-component'</span>, { <span class="hljs-comment">/* ... */</span> })

<span class="hljs-comment">// 获取注册的组件 (始终返回构造器)</span>
<span class="hljs-keyword">var</span> MyComponent = Vue.component(<span class="hljs-string">'my-component'</span>)</code></pre>
</li>
<li><p><strong>参考</strong>：<a href="guide/components.html">组件</a></p>
</li>
</ul>
<h3 id="Vue-use"><a href="#Vue-use" class="headerlink" title="Vue.use( plugin )" data-scroll="">Vue.use( plugin )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object | Function} plugin</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>安装 Vue.js 插件。如果插件是一个对象，必须提供 <code>install</code> 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。</p>
<p>该方法需要在调用 <code>new Vue()</code> 之前被调用。</p>
<p>当 install 方法被同一个插件多次调用，插件将只会被安装一次。</p>
</li>
<li><p><strong>参考</strong>：<a href="guide/plugins.html">插件</a></p>
</li>
</ul>
<h3 id="Vue-mixin"><a href="#Vue-mixin" class="headerlink" title="Vue.mixin( mixin )" data-scroll="">Vue.mixin( mixin )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object} mixin</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。<strong>不推荐在应用代码中使用</strong>。</p>
</li>
<li><p><strong>参考</strong>：<a href="guide/mixins.html#全局混入">全局混入</a></p>
</li>
</ul>
<h3 id="Vue-compile"><a href="#Vue-compile" class="headerlink" title="Vue.compile( template )" data-scroll="">Vue.compile( template )</a></h3><ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{string} template</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>在 render 函数中编译模板字符串。<strong>只在独立构建时有效</strong></p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> res = Vue.compile(<span class="hljs-string">'&lt;div&gt;&lt;span&gt;{{ msg }}&lt;/span&gt;&lt;/div&gt;'</span>)

<span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">msg</span>: <span class="hljs-string">'hello'</span>
  },
  <span class="hljs-attr">render</span>: res.render,
  <span class="hljs-attr">staticRenderFns</span>: res.staticRenderFns
})</code></pre>
</li>
<li><p><strong>参考</strong>：<a href="guide/render-function.html">渲染函数</a></p>
</li>
</ul>
<h3 id="Vue-observable"><a href="#Vue-observable" class="headerlink" title="Vue.observable( object )" data-scroll="">Vue.observable( object )</a></h3><blockquote>
<p>2.6.0 新增</p>
</blockquote>
<ul>
<li><p><strong>参数</strong>：</p>
<ul>
<li><code>{Object} object</code></li>
</ul>
</li>
<li><p><strong>用法</strong>：</p>
<p>让一个对象可响应。Vue 内部会用它来处理 <code>data</code> 函数返回的对象。</p>
<p>返回的对象可以直接用于<a href="guide/render-function.html">渲染函数</a>和<a href="guide/computed.html">计算属性</a>内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：</p>
<pre><code class="hljs js"><span class="hljs-keyword">const</span> state = Vue.observable({ <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> })

<span class="hljs-keyword">const</span> Demo = {
  render(h) {
    <span class="hljs-keyword">return</span> h(<span class="hljs-string">'button'</span>, {
      <span class="hljs-attr">on</span>: { <span class="hljs-attr">click</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { state.count++ }}
    }, <span class="hljs-string">`count is: <span class="hljs-subst">${state.count}</span>`</span>)
  }
}</code></pre>
<p class="tip">在 Vue 2.x 中，被传入的对象会直接被 <code>Vue.observable</code> 改变，所以如<a href="guide/instance.html#数据与方法">这里展示的</a>，它和被返回的对象是同一个对象。在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行修改仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 <code>Vue.observable</code> 返回的对象，而不是传入源对象。</p>
</li>
<li><p><strong>参考</strong>：<a href="guide/reactivity.html">深入响应式原理</a></p>
</li>
</ul>
<h3 id="Vue-version"><a href="#Vue-version" class="headerlink" title="Vue.version" data-scroll="">Vue.version</a></h3><ul>
<li><p><strong>细节</strong>：提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用，你可以根据不同的版本号采取不同的策略。</p>
</li>
<li><p><strong>用法</strong>：</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> version = <span class="hljs-built_in">Number</span>(Vue.version.split(<span class="hljs-string">'.'</span>)[<span class="hljs-number">0</span>])

<span class="hljs-keyword">if</span> (version === <span class="hljs-number">2</span>) {
  <span class="hljs-comment">// Vue v2.x.x</span>
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (version === <span class="hljs-number">1</span>) {
  <span class="hljs-comment">// Vue v1.x.x</span>
} <span class="hljs-keyword">else</span> {
  <span class="hljs-comment">// Unsupported versions of Vue</span>
}</code></pre>
</li>
</ul>