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

vue.js组件学习(上)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">组件是vue.js中非常重要的一部分,打个比方,会用组件得人喝着茶就写完的页面,不会用的代码打到手抽筋也未必完的成。</h3> <h2 id="articleHeader1">首先何为组件</h2> <p>组件可以封装重用的代码,扩展<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>元素,更高的说组件是自定义元素。</p> <h2 id="articleHeader2">组件化的html</h2> <h4>写入vue.js的基本结构</h4> <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="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <title>Document</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;> </div> <p> <script src=&quot;./../vue.js&quot;></script><br /> <script> var vm = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:&quot;#app&quot;, }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</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> <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> <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> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ el:<span class="hljs-string">"#app"</span>, }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>然后实例new中加入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=" components:{ child } //注册局部组件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code style="word-break: break-word; white-space: initial;"> components:{ child } <span class="hljs-comment">//注册局部组件</span></code></pre> <p>在id=app中添加&lt;child&gt;&lt;/child&gt;</p> <p>实例化一个child对象,里边添加模板组件template,然后添加内容为</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:&quot; <div class=&quot;child&quot;>children</div> <p>&quot; //这里的模板会替代child" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">template:</span><span class="hljs-string">"&lt;div class="</span>child<span class="hljs-string">"&gt;children&lt;/div&gt;"</span> <span class="hljs-comment">//这里的模板会替代child</span></code></pre> <p>这样我们就可以在后台发现多出来一个class名为child的标签,页面内容为children</p> <h4>可我们想组建出多个该怎么弄呢?</h4> <p>只需要在我们在components组件中加入childSibling</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="components:{ child,childSibling }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">components:</span>{ child,childSibling }</code></pre> <p>然后如同上边一样实例一个childSibling对象那样,然后在id="app"中再添加一个&lt;child-sibling&gt;自定义标签,这样我们就可以得到两个标签了。这里要注意这里的命名转换</p> <h4>创建子组件</h4> <p>首先,我们应实例化一个子组件son</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 son = { template:&quot; <div>这是子元素</div> <p>&quot;<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword">var</span> son = { template:<span class="hljs-string">"&lt;div&gt;这是子元素&lt;/div&gt;"</span> }</code></pre> <p>然后我们要在目标父组件中添加components组件,里边写入这个son,再然后在template中添加&lt;son&gt;&lt;/son&gt;</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:&quot; <div><son></son</div> <p>&quot;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">template:</span><span class="hljs-string">"&lt;div&gt;&lt;son&gt;&lt;/son&lt;/div&gt;"</span></code></pre> <p>这样我们就完成了html的组件化,当然实际应用不可能这么简单,不过都是以此类推的。</p> <h4>从父元素中获取数据</h4> <p>如果我们用常规的方法获取data里数据添加到模板里会报错,这时就用到props,这个属性是用来声明子组件预期的数据,我们可以通过这个方法来得到data里的数据。</p> <h4>声明子组件预期的数据</h4> <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="props:[&quot;预期数据&quot;]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">props:</span>[<span class="hljs-string">"预期数据"</span>]</code></pre> <h4>绑定data数据,假设父元素为&lt;ele&gt;</h4> <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="data:{ 数据:&quot;111&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs haskell"><code><span class="hljs-class"><span class="hljs-keyword">data</span>:{ 数据:"111" }</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="<ele v-bind 预期数据=&quot;数据&quot; ></ele>" 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">ele</span> <span class="hljs-attr">v-bind</span> 预期数据=<span class="hljs-string">"数据"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ele</span>&gt;</span></code></pre> <p>这样我们在组件中添加预期数据就可得到data里的数据内容了</p> <h3 id="articleHeader3">还有很多这样的方法可以参照官网进行操作<a href="https://cn.vuejs.org/v2/guide/components.html" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide...</a><br /> </h3> <p></code></p>

总结

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

vue.js组件学习(上)

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

vue.js组件学习(上)

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

80%的人都看过