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

Vue 教程第一篇——基础概念

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">认识 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></h1> <p>关于 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 的描述有不少,不外乎都会拿来与 <a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a> 和 <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> 对比,同样头顶 MVVM 双向数据驱动设计模式光环的 <a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a> 自然被对比的最多,但到目前为止,<a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a> 在热度上已明显不及 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>,性能已成为最大的诟病。</p> <p>在我看来,Vue 和 Angular 的对比有种早些年 Java 和 ASP.NET 的对比,对于开发者而言,ASP.NET 官方本身已实现好了大量的框架和功能,使用起来非常的方便快捷,同时也提供了无限的可扩展性,对比起 Java 而言,后者在本身框架和功能上都不及 ASP.NET,但同样都拥有无限的可扩展性,相比之下,本来 ASP.NET 很有一统天下的可能,但现实终归现实,ASP.NET 本身的框架和功能实现并没有换来多少称赞,反在性能和安全性方面被诟病。回看 Vue 和 Angular 的阵营,我也总有这么一种感觉。</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>所以,在这个开源的年代,我认为一个框架功能不需要有多么强大,再强大再完善的功能都抵不上“适合”两字,反而轻量级且有无限可扩展性会成为所有开发者的追求。</p> <p>关于 Vue、<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> 和 Angular,其实都是在原生 JS 基础上,对面向对象不一样的实现方式而已,所以要想使用这三者中的任意一种,首先要有一定的 JS 基础和对面向对象有一定的认识。</p> <p>在代码层面,Vue 只是一个构造函数,整个 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=" <script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</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=" <div id=&quot;app&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"> <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">div</span>&gt;</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=" var vm = new Vue({ el: '#app'// Vue 实例元素 data: { //数据 } ... })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span><span class="hljs-comment">// Vue 实例元素</span> data: { <span class="hljs-comment">//数据</span> } ... })</code></pre> <h1 id="articleHeader1">认识数据驱动模式</h1> <p>开始接触前端编程的基本上都是先学习 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 节点操作,<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 在这一领域上一度成为了标准,所以在前端编程的领域中,<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 几乎是每个开发者的标配。随着前后端分离的成熟,产品或项目都趋于分布式部署,开发者已不满足于操作 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 节点, 设计模式便慢慢的被前端化。</p> <p>数据驱动的设计模式在思维逻辑上与 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</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=" <div id=&quot;div1&quot;></div> <div id=&quot;app&quot;> <span>{{message}}</span> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"div1"</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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{message}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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=" //DOM 节点操作 document.getElementById('div1').innerText = '节点被动改变' //Vue 数据驱动: 当 message 发生改变的时候,span 会相应的发生改变,而不需要手动去改变 span。 var vm = new Vue({ el: '#app', data: { message: '我是通过映射显示的文本' } }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-comment">//DOM 节点操作</span> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'div1'</span>).innerText = <span class="hljs-string">'节点被动改变'</span> <span class="hljs-comment">//Vue 数据驱动: 当 message 发生改变的时候,span 会相应的发生改变,而不需要手动去改变 span。</span> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">data</span>: { <span class="hljs-attr">message</span>: <span class="hljs-string">'我是通过映射显示的文本'</span> } }) </code></pre> <h1 id="articleHeader2">认识 MVVM 模式</h1> <p>M:Model,称之为数据模型,在前端以对象的形式表现。</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=" var data = {message: '我就是一个数据模型'}" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;"> <span class="hljs-keyword">var</span> data = {<span class="hljs-attr">message</span>: <span class="hljs-string">'我就是一个数据模型'</span>}</code></pre> <p>V:View,视图,也就是 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</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=" <div id=&quot;app&quot;> <span>我是视图</span> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>我是视图<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>VM:ViewModel,就是连接数据和视图的桥梁,当 Model 发生改变的时候,ViewModel 便将数据映射到视图。</p> <p>那么数据驱动模式和 MVVM 模式有什么关系,换句话说,MVVM 是数据驱动模式的一种实现,Vue 是 MVVM 的一种实现。</p> <p></code></p>

总结

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

Vue 教程第一篇——基础概念

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

Vue 教程第一篇——基础概念

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

80%的人都看过