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

来一场Vue的学习之旅

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>中的组件</h2> <ol> <li> <code>Vue.component</code>用于注册全局组件</li> <li>传递父组件的数据到子模版</li> </ol> <p>上面这两句话很常见......嗯,下面就从vue组件开始一场vue的学习之旅吧。</p> <h2 id="articleHeader1">组件的声明与注册</h2> <p><strong>创建Vue组件很简单,只需要声明一个组件对象字面量,然后安装到vue实例上(局部安装或者全局安装)。</strong><br />将组件声明为对象字面量的形式,必有属性是<code>template</code>,还要渲染数据<code>data</code>吧,或者还需要父组件传递数据的接口<code>props</code>,然后一个比较完备的组件就声明好了。</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>=" // 组件声明(为对象) <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> myComponent = { template: '</p> <div><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a> is a component</div> <p>', data: function() { return { message: 'this is within the component' } }, props: ['name'] } // 简要分析一下:组件是对象,内部属性使用data定义,可接受父组件传过来的值,使用props声明。 // 全局注册 // 需要在Vue实例化之前进行 // 声明完再安装 Vue.component('hello', myComponent); // 局部注册 new Vue({ el: '#app', components: { 'hello': myComponent } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"> <span class="hljs-comment">// 组件声明(为对象)</span> <span class="hljs-keyword">var</span> myComponent = { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;this is a component&lt;/div&gt;'</span>, <span class="hljs-attr">data</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-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { <span class="hljs-attr">message</span>: <span class="hljs-string">'this is with<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a> the component'</span> } }, <span class="hljs-attr">props</span>: [<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-comment">// 简要分析一下:组件是对象,内部属性使用data定义,可接受父组件传过来的值,使用props声明。</span> <span class="hljs-comment">// 全局注册</span> <span class="hljs-comment">// 需要在Vue实例化之前进行</span> <span class="hljs-comment">// 声明完再安装</span> Vue.component(<span class="hljs-string">'hello'</span>, myComponent); <span class="hljs-comment">// 局部注册</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({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">components</span>: { <span class="hljs-string">'hello'</span>: myComponent } })</code></pre> <p>组件的prop可设置验证,即规定prop的类型,只有满足类型说明的才能正常接受数据。这个时候,props使用对象进行声明,而不再使用<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var myComponent = { template: ' <div>this is a component</div> <p>', data: function() { return { message: 'this is within the component' } }, props: { name: String } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"><span class="hljs-keyword">var</span> myComponent = { <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;this is a component&lt;/div&gt;'</span>, <span class="hljs-attr">data</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-attr">message</span>: <span class="hljs-string">'this is within the component'</span> } }, <span class="hljs-attr">props</span>: { <span class="hljs-attr">name</span>: <span class="hljs-built_in"><a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a></span> } }</code></pre> <p>感慨:我觉得我抓不住点,朦朦胧胧地,总感觉还差一点什么。子组件和父组件,应该就是子类和父类的区别。子类在创建的时候,需要传入一组参数实现specialization。</p> <p>总结:</p> <ul> <li>创建子组件,相当于创建子类,需要传入参数对象(该参数对象就是组件声明,这里记作<code>parameters</code>)</li> <li> <p>父组件向子组件可以直接传入字符串,或者通过属性传入,如下所示:</p> <ul> <li> <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="<hello name=&quot;luuuuu&quot;></hello> // 'luuuuu' 是字符串 <hello :name=&quot;toChild&quot;></hello> // toChild 是变量" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="HTML"><span class="hljs-tag">&lt;<span class="hljs-name">hello</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"luuuuu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">hello</span>&gt;</span> // 'luuuuu' 是字符串 <span class="hljs-tag">&lt;<span class="hljs-name">hello</span> <span class="hljs-attr">:name</span>=<span class="hljs-string">"toChild"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">hello</span>&gt;</span> // toChild 是变量</code></pre> </li> </ul> </li> </ul> <h2 id="articleHeader2">Vue单组件文件</h2> <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=" import Second from './second.vue' export default { data () { return { msg: &quot;Second Component&quot;, toChild: &quot;xiaoluu&quot; }; }, components: { Second } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="JavaScript"> <span class="hljs-keyword">import</span> Second <span class="hljs-keyword">from</span> <span class="hljs-string">'./second.vue'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">"Second Component"</span>, <span class="hljs-attr">toChild</span>: <span class="hljs-string">"xiaoluu"</span> }; }, <span class="hljs-attr">components</span>: { Second } }</code></pre> <ul> <li>每一个组件,<code>export default</code>出来的是组件的配置对象,也就是上面提到的<code>parameters</code> </li> <li>webpack中使用<code>vue-loader</code>加载<code>.vue</code>组件文件</li> </ul> <h2 id="articleHeader3">import 和 export 语法说明</h2> <p>vue组件中用到了<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>的语法,包括<code>import</code>和<code>export</code>,模块的引入和输出需要它们声明。<br />模块是局部的,有作用域限制。通常,由模块向外暴露<code>function</code>, <code>object</code> 还有 <code>primitive values</code>等,继而被其他模块引入调用。<br />模块中,使用<code>export</code>暴露,使用<code>import</code>引入。<br /><code>export default </code>表示只暴露出一个接口,可以是初始值,可以是函数,可以是类,可以是对象,等等等。vue components单组件模块中暴露的是一个对象(组件声明的参数对象,用来描述component的对象字面量)。</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="// export // export有两种方式:定义后立即调用;先定义后调用(模块名称需要使用 { } 包裹) export { myFunction } export { myObject } export default {} export const myObject = {} export function () {} // import import defaultModule from './base' import {boo, foo} from './base' import {boo as haa} from './base'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">// export</span> <span class="hljs-comment">// export有两种方式:定义后立即调用;先定义后调用(模块名称需要使用 { } 包裹)</span> <span class="hljs-keyword">export</span> { myFunction } <span class="hljs-keyword">export</span> { my<a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a> } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {} <span class="hljs-keyword">export</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> myObject = {} <span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{} <span class="hljs-comment">// import</span> <span class="hljs-keyword">import</span> defaultModule <span class="hljs-keyword">from</span> <span class="hljs-string">'./base'</span> <span class="hljs-keyword">import</span> {boo, foo} <span class="hljs-keyword">from</span> <span class="hljs-string">'./base'</span> <span class="hljs-keyword">import</span> {boo <span class="hljs-keyword">as</span> haa} <span class="hljs-keyword">from</span> <span class="hljs-string">'./base'</span></code></pre> <p><strong>import, export和require, module.exports, exports的区别</strong></p> <p>相信,这两组语法很多人都遇到过,而且也会被其所困扰,功能是一样的,但是比较奇怪的是,有时候就是不能替换使用,为什么呀?<br /><strong>import 和 export</strong> 是es6模块语法,而 <strong>require 和 module.exports, exports</strong> 是Commonjs的模块规范。<br />如果想了解更多关于这两者的区别和使用方法,可以参考这篇文章:<a href="http://www.cnblogs.com/Nutrient-rich/p/7047877.html" rel="nofollow noreferrer" target="_blank">module.exports,exports,export和export default,import与require区别与联系</a>。简要提点(绝大部分摘自上述博文):</p> <blockquote> <ul> <li>在<code>module.exports</code>中,<code>module</code>指当前模块,其为对象,有属性<code>exports</code>,模块输出,都是挂载到<code>module.exports</code>上输出的;使用<code>require</code>加载模块,实际上是加载该模块的<code>module.exports</code>属性。</li> <li>其实<code>exports</code>变量是指向<code>module.exports</code>,加载模块实际是加载该模块的<code>module.exports</code>。</li> <li>于是我们可以直接在 <code>exports</code> 对象上添加方法,表示对外输出的接口,如同在<code>module.exports</code>上添加一样。注意,不能直接将<code>exports</code>变量指向一个值,因为这样等于切断了<code>exports</code>与<code>module.exports</code>的联系。(类似于<code>function</code>的<code><a href="http://www.js-code.com/tag/prototype" title="浏览关于“prototype”的文章" target="_blank" class="tag_link">prototype</a></code>属性)</li> </ul> </blockquote> <p>另外,你可能还会疑惑什么时候用<code>import</code>,什么时候用<code>require</code>,因为看起来功能都是一样的。应该是这样的:前端组件和模块中,使用<code>import</code>和<code>export</code>语法,其余情况(<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>开发)使用commonjs语法。(vue组件中使用import语法,但是webpack等其他配置中使用的是commonjs语法)</p> <h2 id="articleHeader4">Vue脚手架配置文件说明</h2> <p>咔咔地就到了vue脚手架这里~ 对脚手架里面的配置文件还是需要了解一下的~<br />参考这里的配置说明博客:<a href="http://blog.csdn.net/lamiant/article/details/54924117" rel="nofollow noreferrer" target="_blank">vue2.0脚手架的webpack 配置文件分析</a><br />以下内容是我的读后感:</p> <ul> <li>项目生产环境和开发环境的配置思路,和我之前做的项目有所不同。它并没有用到外部的set NODE_ENV = development 指令,还是将开发环境和生产环境的入口分开,开发环境引入开发环境的配置,生产环境则引入生产环境的配置。</li> <li>开发环境下,使用了一些中间件,本地启动一个服务器,通过热启动配置等,实现快速开发。</li> <li>webpack被我们挂载到了express服务上。</li> <li>webpack插件之html-webpack-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>:<a href="https://segmentfault.com/a/1190000007294861#articleHeader2">html-webpack-plugin用法全解</a>。这个插件会在webpack目标文件夹下产生一个html文件(根据你提供的模版,插入所有生成的内容,以及外部资源链接等)。这就有点像我每次gulp构建dist目录时,总要把index.html复制一份到dist文件夹下,保持dist和src目录的分离(注意,不是index.html的完全复制哦,如果需要完全复制,可以使用<code>copy-webpack-plugin</code>插件)。</li> <li>webpack重要的三个概念是:打包(核心概念),资源加载器loader(将非js资源转换成js,便于打包),插件(一些好玩的附件)。</li> <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: 652px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 652px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="652" height="163" 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:652px;height:163px;"></iframe></ins></ins></ins></div> <li>生产环境下的webpack的配置,需要涉及到前端的静态资源自动化处理,比如js,css的压缩(<code>webpack.optimize.Ugl<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>yJsPlugin</code>, <code>optimize-css-assets-webpack-plugin</code>),静态资源版本控制(我猜的~~),服务器gzip压缩(<code>compression-webpack-plugin</code>)等。</li> </ul> <h2 id="articleHeader5">Vue坑——刚才一不小心遇到的</h2> <ul> <li> <p>webpack和vue components结合使用,图片的引入和路径问题。</p> <ul> <li>图片的地址是相对于服务器的根目录,所以要在开发的时候启动服务器,否则会报错</li> </ul> </li> </ul> <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="#<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> <img :src=&quot;'./' + imgUrls.demo01&quot; alt=&quot;demo&quot;> // 本地可正常打开 <img :src=&quot;imgUrls.demo01&quot; alt=&quot;demo&quot;> // 配置服务器后正常打开 #JS import demo01 from './1.jpg' export default { data () { return { imgUrls:{ demo01 } }; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>#HTML &lt;img :src=<span class="hljs-string">"'./' + imgUrls.demo01"</span> alt=<span class="hljs-string">"demo"</span>&gt; <span class="hljs-comment">// 本地可正常打开</span> &lt;img :src=<span class="hljs-string">"imgUrls.demo01"</span> alt=<span class="hljs-string">"demo"</span>&gt; <span class="hljs-comment">// 配置服务器后正常打开</span> #JS <span class="hljs-keyword">import</span> demo01 <span class="hljs-keyword">from</span> <span class="hljs-string">'./1.jpg'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { imgUrls:{ demo01 } }; } }</code></pre> <ul> <li>通过vue-cli初始化vue项目时,安装依赖包时出了问题,提示有权限问题,但是我明明使用了管理员权限。后来我改用git bash shell就没有再报错。<a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a>s下,cmd和git bash来回切换的节奏。</li> <li>vue中使用自定义事件一定要小心啊,$on注册监听器后,组件销毁时需要使用$off移除事件监听器,不然就会产生意外bug。</li> </ul> <p></code></p>

总结

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

来一场Vue的学习之旅

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

来一场Vue的学习之旅

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

80%的人都看过