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

「JavaScript」Vue.js + Webpack组件化开发入门

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>论现在前端最热门的开发方式,那必然是组件化开发。而在组件化开发里面最热门的框架则是 <a href="https://www.facebook.com/" rel="nofollow noreferrer" target="_blank">Facebook</a> 的 <a href="https://facebook.github.io/react/" rel="nofollow noreferrer" target="_blank">React</a> 。但是 <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a> 的学习成本比较高,如果对于中小型的项目,使用 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 或许是不错的选择。</p> <h2 id="articleHeader0">MVVM</h2> <p><span class="img-wrap"><img data-src="/img/bVyfU1?w=1600&amp;h=850" src="/img/bVyfU1?w=1600&amp;h=850" alt="MVVM" title="MVVM" style="cursor: pointer; display: inline;"></span></p> <p>借用一下 Vue 官网的图片, ViewModel 是连接 View 与 Model 两层的媒介。</p> <p>在 MVC 模式中, Controller 的功能主要是监听 View 层的事件,例如用户点击、用户提交输入等操作,并根据 View 层不同的事件响应不同的操作。可能会从后端(Model)读取/写入数据,也有可能不与后端进行交互。</p> <p>而后,Controller又会根据既定的业务流程,或根据 Model 返回的值来对 View 层进行更新。这样的话我们所有的逻辑基本上都集中在了Controller中。</p> <hr> <p>ViewModel 将自身的数据与 View 层<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="浏览关于“双向绑定”的文章" target="_blank" class="tag_link">双向绑定</a>了起来,当 View 有变动的时候,会反映到 ViewModel 中,并触发相应的处理函数,这些处理函数(不管是单纯的数据处理或者从后端请求数据),会去更新 ViewModel 的数据,而 ViewModel 的数据变动会实时反映到 View 当中。</p> <p>所以,不管是 View 还是 Model 都读写的是 ViewModel 的数据,View 层的逻辑交给了 View 层,而数据处理的逻辑交给了 Model 层。ViewModel 算是在两层之间提供了一个<strong>接口</strong>。</p> <h2 id="articleHeader1">组件化</h2> <p><span class="img-wrap"><img data-src="/img/bVx1rf?w=1406&amp;h=544" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="组件化示意图" title="组件化示意图" style="cursor: pointer;"></span></p> <p>继续借用一张 Vue 官网的图片。在以前我们开发的时候,如果想复用一个部分,例如表格,我们会使用 JS 来生成<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>,并且根据给定的容器、数据、配置信息来生成 HTML 片段,插入容器当中。之后得再引用表格相关的 <a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a>。</p> <p>而 Vue 的组件包括模板(HTML)、逻辑(JS)、样式(CSS)三部分。只要给这个组件相应的数据,这个组件便是一个完备的组件,各种该组件相关的事件处理,数据请求,UI更新都在组件中完成。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>使用一个 Vue 组件也非常方便,除了申明以外,直接在 HTML 中引入自定义标签,标签名为组件的名字,使用标签属性来给组件传递数据。</p> <p>使用 Webpack 以后,Vue 每一个组件可以封装在独立的文件中,包括&lt;template&gt;、&lt;script&gt;、&lt;style&gt;三个标签,描述了模板、逻辑、样式。</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> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="<template> </p> <div class=&quot;example&quot;> <h1>{{ title }}</h1> <h2>{{ c_title }}</h2> </p></div> <p> </template> <script> module.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { props: ['title'], computed: { c_title: <a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a>() { <a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a> <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.title + ' computed.'; } } }; </script> </p> <style> .example { text-align: left; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">class</span>=<span class="hljs-string">"example"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ title }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{{ c_title }}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</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 class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">props</span>: [<span class="hljs-string">'title'</span>], <span class="hljs-attr">computed</span>: { <span class="hljs-attr">c_title</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-keyword">this</span>.title + <span class="hljs-string">' computed.'</span>; } } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.example</span> { <span class="hljs-attribute">text-align</span>: left; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <h2 id="articleHeader2">+Webpack</h2> <p>在 Webpack 中,我们只需要使用 vue-loader 处理所有的 *.vue 文件即可,需要用到组件的时候,直接 require,并在<code>components</code>属性里面注册即可使用。</p> <blockquote> <p>不要忘了在入口函数中初始化 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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var Vue = require(&quot;vue&quot;); var c1 = require(&quot;xxx/c1.vue&quot;); var c2 = require(&quot;xxx/c2.vue&quot;); new Vue({ el: &quot;#app&quot;, components: { &quot;c1&quot;: c1, &quot;c2&quot;: c2 } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> Vue = <span class="hljs-built_in">require</span>(<span class="hljs-string">"vue"</span>); <span class="hljs-keyword">var</span> c1 = <span class="hljs-built_in">require</span>(<span class="hljs-string">"xxx/c1.vue"</span>); <span class="hljs-keyword">var</span> c2 = <span class="hljs-built_in">require</span>(<span class="hljs-string">"xxx/c2.vue"</span>); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> Vue({ el: <span class="hljs-string">"#app"</span>, components: { <span class="hljs-string">"c1"</span>: c1, <span class="hljs-string">"c2"</span>: c2 } });</code></pre> </blockquote> <hr> <p>点击 <a href="http://cn.vuejs.org/guide/index.html" rel="nofollow noreferrer" target="_blank">_<strong>这里</strong>_</a> 开始学习 Vue 吧!</p> <p></code></p>

总结

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

「JavaScript」Vue.js + Webpack组件化开发入门

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

「JavaScript」Vue.js + Webpack组件化开发入门

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

80%的人都看过