<p><code></p> <h1 id="articleHeader0">基础概念理解:(*)</h1> <hr> <h2 id="articleHeader1">1. 什么是<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>?</h2> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>是一套构建用户界面的渐进式框架。</p> <h2 id="articleHeader2">2. 如何理解渐进式</h2> <p>我对渐进式的理解其实就两个字:自由。</p> <p>当我们要用<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>框架时要知道它是强主张的,必须要遵循以下三条规则:</p> <ul> <li> <p>必须使用它的模块机制</p> </li> <li> <p>必须使用它的依赖注入</p> </li> <li> <p>必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)</p> </li> </ul> <p>而<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>那么强,主要因为它是软性侵入。</p> <p>但是<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>就比较自由了你想把你的页面分的更加具体,分成更小的可控单元,那就用组件系统其他可以不用,当然声明式渲染我们还是得用的,应为我们都希望<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>的更新是自动的,而非手动去更新的。</p> <p>这也就是Vue现在这么受欢迎的原因之一吧!</p> <h2 id="articleHeader3">如何理解自底向上的开发模式</h2> <p>我的理解就是比如我们先写一个基础的页面,把基础的东西写好,再逐一去添加功能和效果,由简单到繁琐的这么一个过程。</p> <h2 id="articleHeader4">声明式渲染和命令式渲染</h2> <ul> <li> <p>命令式渲染 : 命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行</p> </li> <li> <p>声明式渲染 : 我们只需要告诉程序我们想要什么效果,其他的交给程序来做。</p> </li> </ul> <p>我们来看个小例子,可能就更加理解声明式和命令式</p> <p><span class="img-wrap"><img data-src="/img/bVYk0X?w=533&amp;h=326" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>输出的结果其实是相同的</p> <p><span class="img-wrap"><img data-src="/img/bVYk1j?w=494&amp;h=368" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="输出结果" title="输出结果" style="cursor: pointer;"></span></p> <h2 id="articleHeader5">谈谈对生命周期的理解</h2> <p>我们在官网会看到这么一张图,但根本就看不懂的人占很大一部分,但对生命周期的理解还是很重要的。<br /><span class="img-wrap"><img data-src="/img/bVWxgs?w=1200&amp;h=3039" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>这张图就可以更好的诠释生命周期了<br /><span class="img-wrap"><img data-src="/img/bVVTEO?w=1200&amp;h=2800" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h1 id="articleHeader6">Vue的Vue命令及简单操作</h1> <h2 id="articleHeader7">简单操作</h2> <p>首先我们要进行一个Vue首先先下载并引入Vue.js,其次准备一个装模板的HTNL标签,所有Vue模板都在这个标签里写。<br /><span class="img-wrap"><img data-src="/img/bVYlXA?w=863&amp;h=409" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>然后是new一个Vue实例,写入基本的Vue结构<span class="img-wrap"><img data-src="/img/bVYlYm?w=804&amp;h=615" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>当然这些只是一小部分,不太完全,这个因项目而异,有时也不必写这么多,用哪个写那个就好。这就是Vue的基本结构,里边具体内容还是要根据项目不同去添加。</p> <h2 id="articleHeader8">Vue 命令简介</h2> <p>v-on:事件 = "事件名称" 或者 @事件 = "事件名称" //绑定事件<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=" <div v-on:click = &quot;change&quot;></div> <p> // 这里是个点击事件,而change是事件名称" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code 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">v-on:click</span> = <span class="hljs-string">"change"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> // 这里是个点击事件,而change是事件名称</code></pre> <p>v-bink:自定义属性 = "属性名称" 或者 :自定义属性 = "属性名称" // 动态绑定属性<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=" <div v-bink:title = &quot;hello&quot;></div> <p> //这里就绑定了一个名叫hello的属性 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bink:title</span> = <span class="hljs-string">"hello"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> //这里就绑定了一个名叫hello的属性 </code></pre> <p>v-if = "判断条件" // if判断<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=" <div v-if = &quot;name === Vue&quot;></div> <p> //判断name是不是等于Vue" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code style="word-break: break-word; white-space: initial;">&lt;div v-<span class="hljs-keyword">if</span> = <span class="hljs-string">"name === Vue"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> <span class="hljs-comment">//判断name是不是等于Vue</span></code></pre> <p>v-for = "(参数1,参数2) in <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>" // 遍历<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a><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=" <div id=&quot;app&quot;> <ul> <li v-for=&quot;(text,index) in list&quot;> //第一个参数是内容,第二个是序号<br /> {{index}}-{{text}} </li> </ul></div> <p> <script src=&quot;./vue.js&quot;></script><br /> <script><br /> var vm = new Vue({<br /> el:&quot;#app&quot;,<br /> data:{<br /> list:[<br /> &quot;A&quot;,&quot;B&quot;,&quot;C&quot;<br /> ]<br /> }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(text,index) in list"</span>&gt;</span> //第一个参数是内容,第二个是序号 {{index}}-{{text}} <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</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">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">"#app"</span>, data:{ list:[ <span class="hljs-string">"A"</span>,<span class="hljs-string">"B"</span>,<span class="hljs-string">"C"</span> ] } })</span></code></pre> <p>当然Vue不止这些命令还有很多这里就不一一说明了,大家可以去官方查看更多<a href="https://cn.vuejs.org/v2/guide/" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide/</a></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25508.html