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

初学vue.js记录

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h2 id="articleHeader0">前言</h2> <p>本人刚开始学习vue.js几天,做了一些练习之后,鉴于每隔一段时间就把学习过的内容总结一番,故此写下此文章。<br />初学<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js应该学习哪些知识</p> <p>1、 vue2.0</p> <p>主要学习基础知识。首先是引入vue.js,可以在网页中直接引入cdn的链接,或者在本地搭建环境,使用脚手架工具帮你快速搭建项目,具体环境搭建过程可参考官方文档。然后是基础语法,如何渲染数据,熟悉它的各种指令,条件渲染或者循环渲染数据等。可大致了解一下生命周期与钩子函数,可以暂时跳过。接下来要学习如何写函数,计算属性。最后要会创建组件与引用组件,到此,你算是入门了。给两链接:<br /><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js2.0官方文档:<a href="https://cn.vuejs.org/v2/guide/" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide/</a><br />几个小练习:<a href="https://www.cnblogs.com/wuhaojie/p/6249585.html" rel="nofollow noreferrer" target="_blank">https://www.cnblogs.com/wuhao...</a></p> <p>2、 vue-router</p> <p>在项目开发中,经常会用到路由,所以学会如何构建路由是必须的。<br />vue-router官方文档:<a href="https://router.vuejs.org/zh-cn/essentials/getting-started.html" rel="nofollow noreferrer" target="_blank">https://router.vuejs.org/zh-c...</a></p> <p>3、vuex</p> <p>这是一个vue中的状态管理仓库,我们可以借助它来存储一些数据。因为它能被全局访问,所以能借助它来实现不同组件之间的通信。</p> <p>4、ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a></p> <p>如果你学习过jquery,它与jquery里的ajax类似,是发送请求,交互数据的工具。<br />github学习地址:<a href="https://github.com/axios/axios" rel="nofollow noreferrer" target="_blank">https://github.com/axios/axios</a></p> <h2 id="articleHeader1">正文</h2> <p>基础知识就不一一介绍了~~</p> <p><strong>生命周期</strong><br />vue.js为vue实例划分了从创建到结束各种不同的阶段,把这些阶段称为生命周期,同时在不同的过程中也会运行一些叫做<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="生命周期钩子" target="_blank">生命周期钩子</a>的函数,我们能通过这些函数,在不同阶段添加相应的代码。<br />总共可分为8个阶段:</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="beforeCreate(创建前), created(创建后), beforeMount(载入前), mounted(载入后), beforeUpdate(更新前), updated(更新后), beforeDestroy(销毁前), destroyed(销毁后)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs erlang"><code>beforeCreate(创建前), created(创建后), <span class="hljs-function"><span class="hljs-title">beforeMount</span><span class="hljs-params">(载入前)</span>, <span class="hljs-title">mounted</span>(载入后), <span class="hljs-title">beforeUpdate</span>(更新前), <span class="hljs-title">updated</span>(更新后), <span class="hljs-title">beforeDestroy</span>(销毁前), <span class="hljs-title">destroyed</span>(销毁后)</span></code></pre> <p>使用举例:<br />beforecreate : 举个栗子:可以在这加个loading事件 <br />created :在这结束loading,还做一些初始化,实现函数自执行 <br />mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情<br />beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容</p> <p><strong>计算属性</strong><br />在对某些值进行一系列逻辑算法时,虽然能直接在模板内书写,但是模板中的逻辑代码太多会让模板过重并且难以维护,所以在此时应当使用计算属性。<br />计算属性默认只有getter,但我们还能加上setter,通过getter获取一些值来进行一系列的计算来返回值,而setter可以设置值,作用到data里面的数据。</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><strong>条件渲染</strong><br />在之前的编程中,要想隐藏一个元素有4种方式:display:none,visibility:hidden,opacity:0,position:absolute;left:50000px;top:50000px,而在vue.js里面是使用条件渲染v-if,v-show。v-show就是控制元素的display样式来显示隐藏,元素总是会被渲染的,而v-if是控制渲染与否,这就是他们的区别。</p> <p><strong>列表渲染</strong><br />之前看了一点点angularjs和小程序,发现它们都有类似的列表渲染方式。这种方式与js里面的for in循环很像,为列表的每一项取个名字用来表示每一项,然后通过这个名字来访问每一项数据。如果会for in循环那么很容易接受,只不过每一项写在{{}}里。</p> <p><strong>事件处理与修饰符</strong><br />事件通过v-on指令来绑定,在js中事件为on+事件名,所以v-on是很好记忆的。而vue还提供了非常简便的方法来帮助事件处理,如阻止冒泡,只需要在v-on+事件名后使用.stop就行,而不用像原生js写一大行。修饰符还可以串联使用。在vue中有很多修饰符可帮助我们减少代码量。</p> <p><strong>组件</strong><br />组件其实就是提取一段代码,让它在单独的文件中,当要使用的时候引入就行。当某段代码大量重复的时候它可起了大作用。组件分为局部组件与全局组件。局部组件是在某个页面需要的时候在这个页面引入,而全局组件是在main.js入口文件中注册,其它页面不用单独引入,可以直接使用。<br />局部组件引入方法:<br />1、简单的组件可以直接在对应实例里面加入components项,使用键值对的形式写代码。</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="<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default {<br /> name: 'App',<br /> components:{<br /> 'child':{<br /> template:'<span>{{msg}},我叫{{name}},今年{{age}}岁了,{{sex}}</span>',<br /> props:['msg','name','age','sex'],<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-selector-tag">default</span> { <span class="hljs-attribute">name</span>: <span class="hljs-string">'App'</span>, components:{ <span class="hljs-string">'child'</span>:{ template:<span class="hljs-string">'&lt;span&gt;{{msg}},我叫{{name}},今年{{age}}岁了,{{sex}}&lt;/span&gt;'</span>, props:[<span class="hljs-string">'msg'</span>,<span class="hljs-string">'name'</span>,<span class="hljs-string">'age'</span>,<span class="hljs-string">'sex'</span>], }</code></pre> <p>}<br />2、复杂点的结构不方便直接用引号写,这时可单独写一个页面并导出,在使用的页面引入,并且取别名,在用键值对写到components里。</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></p> <div> 我是单独vue文件里创建的组件 </div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ name:'child', } </script></p> <p>然后在要使用的页面引入,并注册:<br /> import child from './components/child'<br /> <script> export default{ name:'dad', components:{ 'my-clild':child } } </script>" 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>&gt;</span> 我是单独vue文件里创建的组件 <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-keyword">export</span> <span class="hljs-keyword">default</span>{ <span class="hljs-attr">name</span>:<span class="hljs-string">'child'</span>, } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 然后在要使用的页面引入,并注册: import child from './components/child' <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-attr">name</span>:<span class="hljs-string">'dad'</span>, <span class="hljs-attr">components</span>:{ <span class="hljs-string">'my-clild'</span>:child } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>全局组件:<br />与局部组件引入类似,还可以给主实例取名<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>,然后通过Vue.components的方式添加。</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="Vue.component('my-child',child) new Vue({ el: '#app', router, components: { App }, })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>Vue.component(<span class="hljs-string">'my-child'</span>,child) <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, components: { App }, })</code></pre> <p><strong>使用props在组件之间传值</strong><br />子组件有时需要动态地显示一些数据而不是直接写静态的。这时可通过props来获取父组件传递的值并写入模板,父组件可通过在子组件写入属性的方式传递数据。<br />不过上面的都是父组件向子组件传值,但是子组件如何和父组件通信?这时就需要用到自定义事件了,子组件可通过$emit来主动让自己触发一个事件,父组件监听这些自定义事件的名称就可以实现通信。</p> <p><strong>插槽</strong><br />有时候子组件内容可能还需要父组件添加,这时候插槽slot就派上用场了。在子组件内定义插槽可以接收父组件写在元素之间的内容。当没有插槽的时候这些内容完全没作用,但是有预留插槽时,内容会被嵌入子组件插槽的位置。插槽还可以有多个,这时候需要给插槽一个name属性,父组件的内容需要有slot属性,这样多个内容能插入到相应的位置。</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_5_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_5_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_5" name="aswift_5" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p><strong>过渡</strong><br />在元素进行显示隐藏等切换时,vue为这些动作定义了6个状态:<br />1、v-enter 2、v-enter-active 3、v-enter-to 4、v-leave 5、v-leave-active 6、v-leave-to<br />需要显示过渡动画的元素用transition元素包裹,并且取个name属性。在样式里,使用name值替换上面的v,具体效果就是<a href="http://www.js-code.com/tag/css3" title="css3" target="_blank">css3</a>的过渡效果等。</p> <p><strong>过滤器</strong><br />在把实例里data的数据渲染进模板时还可以对数据进行过滤,形式如{{msg | 过滤方法名}},在需要渲染的数据后面跟上管道符,并跟上要使用的过滤方法的名称,一个简单的过滤功能就ok了。过滤器还可以使用多个,只需要重复管道符与方法名即可。</p> <p><strong>vuex的简单使用</strong><br />1、在目录下引入vuex模块:cnpm install vuex -S<br />2、在main.js中引入:import Vuex from 'vuex'</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=" import store from './vuex/store' new Vue({ el: '#app', store })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./vuex/store'</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, store })</code></pre> <p>3、构建核心仓库 store.js<br />Vuex 应用的状态 state 都应当存放在 store.js 里面,Vue 组件可以从 store.js 里面获取状态,可以把 store 通俗的理解为一个全局变量的仓库。<br />但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新。<br />在 src 目录下创建一个 vuex 目录,将 store.js 放到 vuex 目录下:</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=" import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 定义状态 state: { author: 'Wise Wrong' } }) export default store " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <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> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> Vue.use(Vuex) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> store = <span class="hljs-keyword">new</span> Vuex.Store({ <span class="hljs-comment">// 定义状态</span> state: { author: <span class="hljs-string">'Wise Wrong'</span> } }) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> store </code></pre> <p>4、在组件中映射状态</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="computed: { author () { return this.$store.state.author } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>computed: { author () { <span class="hljs-keyword">return</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$store.state.author } }</code></pre> <p>5、修改状态<br />虽然直接赋值也能修改但是最好还是使用官方推荐的mutations或者actions:<br /><span class="img-wrap"><img data-src="/img/bV6iww?w=407&amp;h=402" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>首先在 store.js 中定义一个方法 newAuthor,其中第一个参数 state 就是 $store.state,第二个参数 msg 需要另外传入。<br />然后修改 header.vue 中的 setAuthor 方法<br /><span class="img-wrap"><img data-src="/img/bV6iwK?w=502&amp;h=137" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>这里使用 $store.commit 提交 newAuthor,并将 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.inputTxt 传给 msg,从而修改 author。</p> <p>这样显式地提交(commit) mutations,可以让我们更好的跟踪每一个状态的变化。<br />而actions类似,区别在于actions可以异步执行。</p> <p><strong>心得体会</strong><br />整个vue有很多的功能,我也正在摸索中,此篇就写到这吧~对于新手而言,阅读官方文档是提升的好方法,在看过之后最好还是多多练习示例,才能迅速贯通,再之后呢就多可以去网上看看诸位大神的博客啊,论坛啥的,希望能对新入门的小伙伴有所帮助~!</p> <p>友情提示:在我第一次看vue的时候啥也不懂,安装环境的时候每次都要把网上的安装教程重复一遍,到后来我才发现,因为前面几个步骤的工具都装在全局的,所以只需要装一次就行,之后只需要初始化vue项目即可。。。希望后来的朋友少走弯路!</p>

总结

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

初学vue.js记录

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

初学vue.js记录

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

80%的人都看过