mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 23:14:06 +08:00
72 lines
4.9 KiB
HTML
72 lines
4.9 KiB
HTML
<h2 id="选项-DOM"><a href="#选项-DOM" class="headerlink" title="选项 / DOM" data-scroll="">选项 / DOM</a></h2><h3 id="el"><a href="#el" class="headerlink" title="el" data-scroll="">el</a></h3><ul>
|
||
<li><p><strong>类型</strong>：<code>string | Element</code></p>
|
||
</li>
|
||
<li><p><strong>限制</strong>：只在由 <code>new</code> 创建的实例中遵守。</p>
|
||
</li>
|
||
<li><p><strong>详细</strong>：</p>
|
||
<p>提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。</p>
|
||
<p>在实例挂载之后，元素可以用 <code>vm.$el</code> 访问。</p>
|
||
<p>如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 <code>vm.$mount()</code> 手动开启编译。</p>
|
||
<p class="tip"> 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <code><html></code> 或者 <code><body></code> 上。</p>
|
||
|
||
<p class="tip">如果 <code>render</code> 函数和 <code>template</code> 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/instance.html#生命周期图示">生命周期图示</a></li>
|
||
<li><a href="guide/installation.html#运行时-编译器-vs-只包含运行时">运行时 + 编译器 vs. 只包含运行时</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="template"><a href="#template" class="headerlink" title="template" data-scroll="">template</a></h3><ul>
|
||
<li><p><strong>类型</strong>：<code>string</code></p>
|
||
</li>
|
||
<li><p><strong>详细</strong>：</p>
|
||
<p>一个字符串模板作为 Vue 实例的标识使用。模板将会 <strong>替换</strong> 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。</p>
|
||
<p>如果值以 <code>#</code> 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <code><script type="x-template"></code> 包含模板。</p>
|
||
<p class="tip">出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。</p>
|
||
|
||
<p class="tip">如果 Vue 选项中包含渲染函数，该模板将被忽略。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/instance.html#生命周期图示">生命周期图示</a></li>
|
||
<li><a href="guide/components.html#通过插槽分发内容">通过插槽分发内容</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="render"><a href="#render" class="headerlink" title="render" data-scroll="">render</a></h3><ul>
|
||
<li><p><strong>类型</strong>：<code>(createElement: () => VNode) => VNode</code></p>
|
||
</li>
|
||
<li><p><strong>详细</strong>：</p>
|
||
<p>字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 <code>createElement</code> 方法作为第一个参数用来创建 <code>VNode</code>。</p>
|
||
<p>如果组件是一个函数组件，渲染函数还会接收一个额外的 <code>context</code> 参数，为没有实例的函数组件提供上下文信息。</p>
|
||
<p class="tip">Vue 选项中的 <code>render</code> 函数若存在，则 Vue 构造函数不会从 <code>template</code> 选项或通过 <code>el</code> 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/render-function.html">渲染函数</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="renderError"><a href="#renderError" class="headerlink" title="renderError" data-scroll="">renderError</a></h3><blockquote>
|
||
<p>2.2.0 新增</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><p><strong>类型</strong>：<code>(createElement: () => VNode, error: Error) => VNode</code></p>
|
||
</li>
|
||
<li><p><strong>详细</strong>：</p>
|
||
<p><strong>只在开发者环境下工作。</strong></p>
|
||
<p>当 <code>render</code> 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 <code>renderError</code>。这个功能配合 hot-reload 非常实用。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs js"><span class="hljs-keyword">new</span> Vue({
|
||
render (h) {
|
||
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'oops'</span>)
|
||
},
|
||
renderError (h, err) {
|
||
<span class="hljs-keyword">return</span> h(<span class="hljs-string">'pre'</span>, { <span class="hljs-attr">style</span>: { <span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span> }}, err.stack)
|
||
}
|
||
}).$mount(<span class="hljs-string">'#app'</span>)</code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/render-function.html">渲染函数</a></p>
|
||
</li>
|
||
</ul>
|