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

vue1.x 基础使用(一)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>最近项目进度慢下来了,花点时间总结一下。文章会从vue1.x 到2.x的一些说明以及使用,也会文章中的代码共享出来。详细请关注后续。</p> <h5>简介:感慨是会用到一些第三方的模块下载工具,不过不要担心,都是一步步来的,偏前端先是用到了 bower 把vue.js 下载下来,引用的方法也和以前一样,直接引用 路径。后面陆续会换到其他的一些工具,如gulp,wekpack等。也会介绍一些常用的工具。如 bable 下一代的<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script 语法编译器,vue的路由,vue的交互。</h5> <h1 id="articleHeader0">1.bower 前端包管理器</h1> <h5>原因:现在前端也日新月异,一些第三方包,插件,模块,包也在不断更新,相互依赖的包也是很多,如项目需要用到bootstrap,而bootstrap又依赖jquery,以往方法是下载bootstrap后,又下载jquery才能用,而用bower 下载只需要下载bootstrap 它会把相关依赖的包也下载下来,到时候只需要做相关的引入就行了。</h5> <h5>安装 bower</h5> <p>bower 也是通过npm安装</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="npm install -g bower" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> -g bower</code></pre> <p>查看bower帮助</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="bower -h" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">bower</span> -h</code></pre> <p>建立 bower json文件</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="bower init" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">bower <span class="hljs-keyword">init</span></code></pre> <p>安装 第三方的包如 bootstrap</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="bower install bootstrap" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">bower <span class="hljs-keyword">install</span> bootstrap</code></pre> <p>效果如下:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000010732392" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image.png" title="image.png" style="cursor: pointer;"></span></p> <p>下载好的第三方包都是在 bower_components 这个文件夹下面</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000010732393" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image.png" title="image.png" style="cursor: pointer;"></span></p> <p>一般文件都会在 dist 这个文件夹下</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000010732394" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image.png" title="image.png" style="cursor: pointer;"></span></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> <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>=" <script src=&quot;../bower_components/jquery/dist/jquery.js&quot;></script> <script src=&quot;../bower_components/bootstrap/dist/js/bootstrap.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> &lt;script src=<span class="hljs-string">"../bower_components/jquery/dist/jquery.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;script src=<span class="hljs-string">"../bower_components/bootstrap/dist/js/bootstrap.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <p>如果你想把配置写在json里面,在下载第三方包时候加 --save <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="bower install bootstrap --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;">bower install bootstrap --save</code></pre> <p>这样</p> <h1 id="articleHeader1">2.vue 基础使用</h1> <p>html部分:</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="<span>{{msg}}</span> <!--引入vue.js--> <script src=&quot;../bower_components/vue/dist/vue.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-comment">&lt;!--引入vue.js--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../bower_components/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> <p>javascript 部分:</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 vm = new Vue({ el:'body',// data(){ msg:'hello' } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> vm = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <span class="hljs-type"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a></span>({ el:<span class="hljs-symbol">'bod</span>y',<span class="hljs-comment">//</span> data(){ msg:<span class="hljs-symbol">'hell</span>o' } })</code></pre> <h3 id="articleHeader2">array 部分</h3> <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=" <span>{{arr}}</span> data(){ ... arr:['can','tom'], ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> &lt;span&gt;{{arr}}&lt;<span class="hljs-regexp">/span&gt; data(){ ... arr:['can','tom'], ... }</span></code></pre> <h3 id="articleHeader3">json 部分</h3> <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="{{ jsonObj | json }} data(){ ... jsonObj:{'name':'can','age':25}, ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">{{ jsonObj | json }} data(){ ... jsonObj:{<span class="hljs-string">'<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>'</span>:<span class="hljs-string">'can'</span>,<span class="hljs-string">'age'</span>:<span class="hljs-number">25</span>}, ... }</code></pre> <h3 id="articleHeader4">v-<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a> 部分</h3> <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=" <span>for 循环使用</span> </p> <ul> <li v-for=&quot;phome in phoneList &quot;>{{phome}}</li> </ul> <p> <span>or</span> </p> <ul> <li v-for=&quot;value in phoneList &quot;>{{value}} 下标为 {{$index}}</li> </ul> <p> data(){ phoneList:['iPhome 6','iPhome 7','iPhome 8'], }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>for 循环使用<span class="hljs-tag">&lt;/<span class="hljs-name">span</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">"phome in phoneList "</span>&gt;</span>{{phome}}<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">span</span>&gt;</span>or<span class="hljs-tag">&lt;/<span class="hljs-name">span</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">"value in phoneList "</span>&gt;</span>{{value}} 下标为 {{$index}}<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> data(){ phoneList:['iPhome 6','iPhome 7','iPhome 8'], }</code></pre> <h3 id="articleHeader5">基础部分的</h3> <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="<script> var vm = new Vue({ el:'#box', data:{ msg:'vue', msg1:1, msg2:<a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a>, arr:['can','tom'], jsonObj:{'name':'can','age':25}, phoneList:['iPhome 6','iPhome 7','iPhome 8'], fruits:[ {'name':'apple','price':3.5}, {'name':'banana','price':1.9}, {'name':'orange','price':2.5}, {'name':'grape','price':3.2} ] } }); </script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;script&gt; <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>:<span class="hljs-string">'#box'</span>, <span class="hljs-attr">data</span>:{ <span class="hljs-attr">msg</span>:<span class="hljs-string">'vue'</span>, <span class="hljs-attr">msg1</span>:<span class="hljs-number">1</span>, <span class="hljs-attr">msg2</span>:<span class="hljs-literal">false</span>, <span class="hljs-attr">arr</span>:[<span class="hljs-string">'can'</span>,<span class="hljs-string">'tom'</span>], <span class="hljs-attr">jsonObj</span>:{<span class="hljs-string">'name'</span>:<span class="hljs-string">'can'</span>,<span class="hljs-string">'age'</span>:<span class="hljs-number">25</span>}, <span class="hljs-attr">phoneList</span>:[<span class="hljs-string">'iPhome 6'</span>,<span class="hljs-string">'iPhome 7'</span>,<span class="hljs-string">'iPhome 8'</span>], <span class="hljs-attr">fruits</span>:[ {<span class="hljs-string">'name'</span>:<span class="hljs-string">'apple'</span>,<span class="hljs-string">'price'</span>:<span class="hljs-number">3.5</span>}, {<span class="hljs-string">'name'</span>:<span class="hljs-string">'banana'</span>,<span class="hljs-string">'price'</span>:<span class="hljs-number">1.9</span>}, {<span class="hljs-string">'name'</span>:<span class="hljs-string">'orange'</span>,<span class="hljs-string">'price'</span>:<span class="hljs-number">2.5</span>}, {<span class="hljs-string">'name'</span>:<span class="hljs-string">'grape'</span>,<span class="hljs-string">'price'</span>:<span class="hljs-number">3.2</span>} ] } }); <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> </code></pre> <p><a href="https://github.com/lkycan/vue1x" rel="nofollow noreferrer" target="_blank">基础代码链接</a></p> <h2 id="articleHeader6">3.事件</h2> <h3 id="articleHeader7">click 事件</h3> <p>html:</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=" <span>以前的事件</span> <button onclick=&quot;btnclick()&quot; >button</button> </p> <hr> <span>vue的事件</span> </p> <p> @写法(简写,推荐使用)</p> <p> <button @click=&quot;vclick()&quot;>v-button</button>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="HTML"> <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">button</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/onclick" title="浏览关于“onclick”的文章" target="_blank" class="tag_link">onclick</a></span>=<span class="hljs-string">"btnclick()"</span> &gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>vue的事件<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span> @写法(简写,推荐使用)<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"vclick()"</span>&gt;</span>v-button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre> <p>javascript:</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=" // 以前的按钮事件 function btnclick(){ alert('我是点击事件'); } // 用vue 的方式 var vm = new Vue({ el:'body', methods: { vclick(){ alert('vue click'); } } }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"> <span class="hljs-comment">// 以前的按钮事件</span> <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-title">btnclick</span>(<span class="hljs-params"></span>)</span>{ <a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(<span class="hljs-string">'我是点击事件'</span>); } <span class="hljs-comment">// 用vue 的方式</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">'body'</span>, <span class="hljs-attr">methods</span>: { vclick(){ alert(<span class="hljs-string">'vue click'</span>); } } }) </code></pre> <h2 id="articleHeader8">4.基础的综合例子</h2> <p>效果如下:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000010732395" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image.png" title="image.png" style="cursor: pointer;"></span></p> <p>查看时候:<br /><span class="img-wrap"><img data-src="/img/remote/1460000010732396" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image.png" title="image.png" style="cursor: pointer;"></span></p> <p>删除时候:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000010732397" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="image.png" title="image.png" style="cursor: pointer;"></span></p> <p>详细代码看 <a href="https://github.com/lkycan/vue1x/blob/master/01/tabelshow.html" rel="nofollow noreferrer" target="_blank">tabelshow.html</a></p> <p>这篇大概写了一下和很普通的例子,后续会继续分享,请继续关注。</p> <p></code></p>

总结

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

vue1.x 基础使用(一)

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

vue1.x 基础使用(一)

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

80%的人都看过