脚本宝典收集整理的这篇文章主要介绍了

单文件组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">简介</h1> <p>以前文件的组织是以<em>.<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>、</em>.js以及<em>.css/less/scss这些文件进行垂直分割的,而<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>中我们以组件为单位构造,因此,最好的方式是把这些不同的类型的文件与组件相关的部分,围绕组件组合成一个文件即</em>.vue文件,我称其为水平分割。另外,在<code>&lt;template&gt;</code>中写模板也比原来的字符串形式的模板方便的多。<br />在webpack里面要加载*.vue文件,需要下面两个包</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$npm install vue-loader vue-template-compiler" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell" style="word-break: break-word; white-space: initial;"><span class="hljs-meta">$</span><span class="bash">npm install vue-loader vue-template-compiler</span></code></pre> <p>webpack添加Loader配置</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ test: /.vue$/, use: [ 'vue-loader' ] } ...... resolve: { extensions: ['.js', '.vue'], alias: { 'Vue': 'vue/dist/vue.js' } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">{ <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.vue$/</span>, <span class="hljs-attr">use</span>: [ <span class="hljs-string">'vue-loader'</span> ] } ...... resolve: { <span class="hljs-attr">extensions</span>: [<span class="hljs-string">'.js'</span>, <span class="hljs-string">'.vue'</span>], <span class="hljs-attr">alias</span>: { <span class="hljs-string">'<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>'</span>: <span class="hljs-string">'vue/dist/vue.js'</span> } }</code></pre> <p>webpack的<code>resolve</code>选项,用来配置解析<code>import</code>、<code>require</code>中的路径的细节,<code>extensions</code>就是在某文件没写扩展名时,默认的寻找扩展名。如<code>import App from './App'</code>中,没有<code>App.js</code>就找<code>App.vue</code>。<code>alias</code>是给路径起个别名,方便一点,如<code>import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> from 'Vue'</code>即表示<code>import Vue from 'vue/dist/vue.js'</code></p> <p>然后就可以编写代码了</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!--App.vue--><br /> <template></p> <div id=&quot;app&quot;> <h1 class=&quot;text-color&quot;>{{heading}}</h1> </p></div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data(){ return {heading:'My Todo App!'} } } </script></p> <style> .text-color { color:#009A61 } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;!--App.vue--&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-color"</span>&gt;</span>{{heading}}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span> &lt;script&gt; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data(){ <span class="hljs-keyword">return</span> {<span class="hljs-attr">heading</span>:<span class="hljs-string">'My Todo App!'</span>} } } &lt;<span class="hljs-regexp">/script&gt; &lt;style&gt; .text-color { color:#009A61 } &lt;/</span>style&gt;</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//index.js import Vue from 'Vue' import App from './App' new Vue({ el: '#app-1', template: '<App></span>',<br /> components: { App },<br /> //render: h => h(App)<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//index.js</span> <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'Vue'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app-1'</span>, <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>, <span class="hljs-attr">components</span>: { App }, <span class="hljs-comment">//render: h =&gt; h(App)</span> })</code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!--index.html--><br /> <body></p> <div id=&quot;app-1&quot;></div> <p></body> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="markup"><span class="hljs-comment">&lt;!--index.html--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> </code></pre> <p>文件<code>App.vue</code>即所谓的单文件组件,我们看到了模板、样式和JS是如何水平分割的。<br />还有要注意的是,页面原始的<code>&lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> id="app-1"&gt;&lt;/<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>&gt;</code>将会被组件替换掉。<br />模板写在如下内容中:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="markup"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></code></pre> <p>JS写在如下内容中:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { //options } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="markup"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-comment">//options</span> } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>css写在如下内容中:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <style> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code class="markup"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>我们在index.js中引用这个App.vue文件组件,这里让它作为实例<code>#app-1</code>的子组件引入,也可以使用渲染函数使用它。</p> <h1 id="articleHeader1">一个例子</h1> <p>这里是官网上一个单文件多层组件的示例。<a href="https://gitee.com/YannieCheung/vue-junior-breaking/blob/master/5%E3%80%81%E5%B8%83%E5%B1%80/workspace/src/single/App2.vue" rel="nofollow noreferrer" target="_blank">App2.vue</a><br />在子组件<a href="https://gitee.com/YannieCheung/vue-junior-breaking/blob/master/5%E3%80%81%E5%B8%83%E5%B1%80/workspace/src/single/components/BaseInputText.vue" rel="nofollow noreferrer" target="_blank">BaseInputText.vue</a>中,有如下代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> <input type=&quot;text&quot; class=&quot;input&quot; :value=&quot;value&quot; v-on=&quot;eventDict&quot;><br /> </template><br /> <script> export default { props: { value: { type: String, default: &quot;&quot; } }, computed: { eventDict() { var self = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>; //如果下层组件还有自定义事件触发,那么都保存在$listeners中,这里没有下层组件 return Object.assign({}, <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$listeners, { input: function(event) { self.$emit(&quot;input&quot;, event.target.value); } }); } } }; </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input"</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">v-on</span>=<span class="hljs-string">"eventDict"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span> &lt;script&gt; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">props</span>: { <span class="hljs-attr">value</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>, <span class="hljs-attr">default</span>: <span class="hljs-string">""</span> } }, <span class="hljs-attr">computed</span>: { eventDict() { <span class="hljs-keyword">var</span> self = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>; <span class="hljs-comment">//如果下层组件还有自定义事件触发,那么都保存在$listeners中,这里没有下层组件</span> <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.assign({}, <span class="hljs-keyword">this</span>.$listeners, { <span class="hljs-attr">input</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{ self.$emit(<span class="hljs-string">"input"</span>, event.target.value); } }); } } }; <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <p>这里在无参的<code>v-on</code>中绑定了一个事件对象,该对象中除了有必须的<code>input</code>事件,并与<code>this.$listeners</code>合并,<code>this.$listeners</code>包含了该子组件的所有下层组件(如果有的话)中的自定义事件。</p> <p>就像示例中所做的那样,属性和方法都集中在上层的组件中,这里是<a href="https://gitee.com/YannieCheung/vue-junior-breaking/blob/master/5%E3%80%81%E5%B8%83%E5%B1%80/workspace/src/single/components/TodoList.vue" rel="nofollow noreferrer" target="_blank">TodoList.vue</a>组件,通过<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>s下发数据到子组件。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

单文件组件

全部内容,希望文章能够帮你解决

单文件组件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过