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

[使用 Weex 和 Vue 开发原生应用] 3 使用 Vue 框架的特性

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<blockquote> <p>系列文章的目录在 ? <a href="https://segmentfault.com/a/1190000008342533">这里</a></p> </blockquote> <p>除了<a href="http://weex.apache.org/cn/references/vue/difference-with-web.html" rel="nofollow noreferrer" target="_blank"> Vue.js 在 Weex 和 Web 中的差异</a>以外,<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js 自身的各种特性都是可以正常使用的。所以,这篇文章其实和 Weex 并没多大关系,我就给大家简单罗列几个在 <a href="https://github.com/weexteam/weex-hackernews" rel="nofollow noreferrer" target="_blank">weex-hackernews</a> 项目里用到的特性(这几个特性越来越高阶):</p> <h2 id="articleHeader0">混合(mixin)</h2> <blockquote> <p><a href="https://cn.vuejs.org/v2/guide/mixins.html" rel="nofollow noreferrer" target="_blank">Vue mixin 文档</a></p> </blockquote> <p>mixin 是一种复用代码的技巧,可以将多个组件共同的逻辑抽象成 mixin,官方文档中写的很详细。它会将 mixin 中定义的方法合并到组件上,如果包含生命周期函数,则先调用 mixin 中的方法再执行组件自身的;如果属性有冲突,组件自身的方法会覆盖掉 mixin 中定义的。</p> <h3 id="articleHeader1">定义 mixin</h3> <p>在 weex-hackernews 中的 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/mixins/index.js" rel="nofollow noreferrer" target="_blank">src/mixin/index.js</a> 里定义了一个简单的 mixin:</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="export default { methods: { jump (to) { if (this.$router) { this.$router.push(to) } } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><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">default</span> { <span class="hljs-attr">methods</span>: { jump (to) { <span class="hljs-keyword">if</span> (<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$router) { <span class="hljs-keyword">this</span>.$router.push(to) } } } }</code></pre> <p>它只包含了一个方法,就是 <code>jump</code> ,它通过调用路由的 <code>push</code> 方法来实现页面跳转。</p> <h3 id="articleHeader2">注册 mixin</h3> <p>然后,在 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/entry.js" rel="nofollow noreferrer" target="_blank">src/entry.js</a> 中全局注册了这个 <code>mixin</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import mixins from './mixins' // register global mixins. Vue.mixin(mixins)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> mixins <span class="hljs-keyword">from</span> <span class="hljs-string">'./mixins'</span> <span class="hljs-comment">// register global mixins.</span> Vue.mixin(mixins)</code></pre> <blockquote> <p>在实际应用中应该谨慎地注册全局 mixin,如果不是全局通用的操作,建议还是只给用到的组件添加 mixin。</p> </blockquote> <h3 id="articleHeader3">使用 mixin</h3> <p>如此一来,所有组件都能调用到 <code>jump</code> 方法,例如 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/components/app-header.vue#L3-L5" rel="nofollow noreferrer" target="_blank">app-header.vue</a> 这个组件,它自身没有 <code>&lt;script&gt;</code> 标签,但是能够在模板中给点击事件绑定 <code>jump</code> 函数。在 weex-hackernews 里,点击左上角的 logo 可以返回首页。</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 class=&quot;logo&quot; @click=&quot;jump('/')&quot;> <image class=&quot;image&quot; src=&quot;https://news.ycombinator.com/favicon.ico&quot;></image> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><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">class</span>=<span class="hljs-string">"logo"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"jump('/')"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"image"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://news.ycombinator.com/favicon.ico"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">image</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <blockquote> <p>一般来说大家都倾向认为组合要优于继承,在 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 里使用 mixin 实现“组合”,比用 <code>ParentComponent.extend({})</code> 模拟继承要好一些。而且在 <code>.vue</code> 文件里,要想继承其他组件也挺麻烦的。从另外一个角度上来讲,如果真的是有一些逻辑能抽离出来,也优先考虑写成独立的模块,<code><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a></code> 可用的接口,要用的时候直接 <code>import</code> 进来即可。依赖框架本身的特性越少,代码就越容易复用。</p> </blockquote> <h2 id="articleHeader4">过滤器(filter)</h2> <blockquote> <p><a href="https://cn.vuejs.org/v2/guide/syntax.html#" rel="nofollow noreferrer" target="_blank">Vue filter 文档</a></p> </blockquote> <p>在使用 <code>v-bind</code> 指令的时候,支持使用过滤器 (filter) 对绑定的值再进行处理;接收变量中的原始值作为参数,返回处理后的值,支持将多个过滤器串联在一起使用,类似 shell 命令中“管道”的写法。</p> <h3 id="articleHeader5">注册过滤器</h3> <p>过滤器的使用方法和 <code>mixin</code> 类似,现在 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/filters/index.js" rel="nofollow noreferrer" target="_blank">src/filter/index.js</a> 中写好要注册的方法,在 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/entry.js#L13-L16" rel="nofollow noreferrer" target="_blank">src/entry.js</a> 中全局注册了这些 <code>filters</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import * as filters from './filters' // register global utility filters. Object.keys(filters).forEach(key => {<br /> Vue.filter(key, filters[key])<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><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> * <span class="hljs-keyword">as</span> filters <span class="hljs-keyword">from</span> <span class="hljs-string">'./filters'</span> <span class="hljs-comment">// register global utility filters.</span> <span class="hljs-built_in">Object</span>.keys(filters).forEach(<span class="hljs-function"><span class="hljs-params">key</span> =&gt;</span> { Vue.filter(key, filters[key]) })</code></pre> <h3 id="articleHeader6">使用过滤器</h3> <p>在 weex-hackernews 的 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/components/story.vue#L6" rel="nofollow noreferrer" target="_blank">story.vue</a> 文件中第六行用到了 <code>host</code> 过滤器,用来获取 url 中的网站地址。</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="<text class=&quot;small-text&quot; v-if=&quot;story.url&quot;>({{ story.url | host }})</text>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-text"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"story.url"</span>&gt;</span>({{ story.url | host }})<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span></code></pre> <p>在<a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/components/story.vue#L13" rel="nofollow noreferrer" target="_blank">第十三行</a>用到了 <code>timeAgo</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<text class=&quot;small-text text-cell&quot;> | {{ story.time | timeAgo }} ago</text>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-text text-cell"</span>&gt;</span> | {{ story.time | timeAgo }} ago<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span></code></pre> <p>在 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/filters/index.js#L16-L25" rel="nofollow noreferrer" target="_blank">src/filter/index.js</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function host (url) { if (!url) return '' <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> host = url.replace(/^https?:///, '').replace(//.*$/, '')<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> parts = host.split('.').<a href="http://www.js-code.com/tag/slice" title="slice" target="_blank">slice</a>(-3)<br /> if (parts[0] === 'www') parts.shift()<br /> return parts.join('.')<br /> }</p> <p>function timeAgo (time) {<br /> <a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> between = Date.now() / 1000 - Number(time)<br /> if (between < 3600) { return pluralize(~~(between / 60), ' minute') } else if (between < 86400) { return pluralize(~~(between / 3600), ' hour') } else { return pluralize(~~(between / 86400), ' day') } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">host</span> (<span class="hljs-params">url</span>) </span>{ <span class="hljs-keyword">if</span> (!url) <span class="hljs-keyword">return</span> <span class="hljs-string">''</span> <span class="hljs-keyword">const</span> host = url.replace(<span class="hljs-regexp">/^https?:///</span>, <span class="hljs-string">''</span>).replace(<span class="hljs-regexp">//.*$/</span>, <span class="hljs-string">''</span>) <span class="hljs-keyword">const</span> parts = host.split(<span class="hljs-string">'.'</span>).<a href="http://www.js-code.com/tag/slice" title="浏览关于“slice”的文章" target="_blank" class="tag_link">slice</a>(<span class="hljs-number">-3</span>) <span class="hljs-keyword">if</span> (parts[<span class="hljs-number">0</span>] === <span class="hljs-string">'www'</span>) parts.shift() <span class="hljs-keyword">return</span> parts.join(<span class="hljs-string">'.'</span>) } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">timeAgo</span> (<span class="hljs-params">time</span>) </span>{ <span class="hljs-keyword">const</span> between = <span class="hljs-built_in">Date</span>.now() / <span class="hljs-number">1000</span> - <span class="hljs-built_in">Number</span>(time) <span class="hljs-keyword">if</span> (between &lt; <span class="hljs-number">3600</span>) { <span class="hljs-keyword">return</span> pluralize(~~(between / <span class="hljs-number">60</span>), <span class="hljs-string">' minute'</span>) } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (between &lt; <span class="hljs-number">86400</span>) { <span class="hljs-keyword">return</span> pluralize(~~(between / <span class="hljs-number">3600</span>), <span class="hljs-string">' hour'</span>) } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> pluralize(~~(between / <span class="hljs-number">86400</span>), <span class="hljs-string">' day'</span>) } }</code></pre> <p>效果如下:</p> <p><span class="img-wrap"><img data-src="/img/bVJxWB?w=407&amp;h=288" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="filter" title="filter" style="cursor: pointer;"></span></p> <p>除此之外</p> <ul> <li> <p>在 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/components/comment.vue#L16" rel="nofollow noreferrer" target="_blank">comment.vue</a> 里用到了 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/filters/index.js#L34-L55" rel="nofollow noreferrer" target="_blank">unescape</a> 过滤器。</p> </li> <li> <p>在 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/views/ArticleView.vue#L3" rel="nofollow noreferrer" target="_blank">ArticleView.vue</a> 里用到了 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/filters/index.js#L9-L14" rel="nofollow noreferrer" target="_blank">https</a> 过滤器。</p> </li> </ul> <h2 id="articleHeader7">内容槽(<code>&lt;solt&gt;</code>)</h2> <blockquote> <p><a href="https://cn.vuejs.org/v2/guide/components.html#" rel="nofollow noreferrer" target="_blank">Vue slots 文档</a></p> </blockquote> <p>槽是 Vue.js 中用来实现“内容分发”的功能的,可以理解为内容的占位符。参考 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/components/external-link.vue#L3" rel="nofollow noreferrer" target="_blank">external-link.vue</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div @click=&quot;open&quot;> <slot></slot> </div> <p></template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"open"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</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">template</span>&gt;</span></code></pre> <p>在 <a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/components/story.vue#L4-L7" rel="nofollow noreferrer" target="_blank">story.vue</a> 里使用时,<code>&lt;external-link&gt;</code> 标签中的内容将会替换到 <code>&lt;slot&gt;</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<external-link :url=&quot;story.url&quot; class=&quot;story-link&quot;><br /> <text class=&quot;story-title&quot;>{{story.title}}</text><br /> <text class=&quot;small-text&quot; v-if=&quot;story.url&quot;>({{ story.url | host }})</text><br /> </external-link>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">external-link</span> <span class="hljs-attr">:url</span>=<span class="hljs-string">"story.url"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"story-link"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"story-title"</span>&gt;</span>{{story.title}}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small-text"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"story.url"</span>&gt;</span>({{ story.url | host }})<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">external-link</span>&gt;</span></code></pre> <h2 id="articleHeader8">递归组件</h2> <blockquote> <p><a href="https://cn.vuejs.org/v2/guide/components.html#" rel="nofollow noreferrer" target="_blank">Vue 递归组件的文档</a></p> </blockquote> <p>Vue 可以实现递归组件,可以在自己的模板中调用自己,只需要你写上 <code>name</code>属性就可以了。</p> <p>支持写递归组件,听起来好像是框架在故意炫技,为什么会有这种奇葩功能?因为的确有这种奇葩需求…… 例如 Hacker News 里的评论,是可以无限展开的。</p> <p><span class="img-wrap"><img data-src="/img/bVJxWG?w=1180&amp;h=848" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>其实每条评论都有一个唯一 <code>id</code> 的,每条评论下边的回复的 <code>id</code> 都存在 <code>kids</code> 属性上;存的只是 <code>id</code> 不是真实的评论数据。从网络获取到某条评论之后,还有根据 <code>kids</code> <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>中的 <code>id</code> 获取评论下的所有回复,然后获取回复下的所有评论,然后获取评论下的所有回复…… 这很明显是个递归过程。即使评论的数据用树形结构去存,你不知道树的深度,还是得用递归的方式把所有评论渲染出来。</p> <blockquote> <p>【评论】和【回复】是一个意思,为了好表达才用的俩词,汉语就是比英语词多……</p> </blockquote> <p>下面问题来了,如何渲染这种递归的评论?用正常的组件好像很难实现这种效果,我没想到很合适的写法,有兴趣可以试着想一下。</p> <h3 id="articleHeader9">简单的递归组件</h3> <p>让组件支持递归很简单,只要加上 <code>name</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!-- comment.vue --><br /> <template></p> <div> <text>tips:</text><br /> <comment></comment> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'comment' } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- comment.vue --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</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">text</span>&gt;</span>tips:<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">comment</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">comment</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">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">'comment'</span> } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>上边就是一个最简单的递归组件的例子,写了 <code>name</code> 属性而且在模板中用了自己。但是它死循环了,没有结束条件,最终会报一个 "max stack size exceeded" 的错。</p> <h3 id="articleHeader10">真实的递归组件</h3> <p>在 weex-hackernews 里,<a href="https://github.com/weexteam/weex-hackernews/blob/v1.0/src/components/comment.vue#L18" rel="nofollow noreferrer" target="_blank">comment.vue</a> 就是一个递归组件。它用于渲染一条评论,在内部有使用它自己渲染自己的评论。效果如下:</p> <p><span class="img-wrap"><img data-src="/img/bVJxWI?w=750&amp;h=1334" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>下边是 <code>&lt;comment&gt;</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div v-if=&quot;comment&quot;> <text>{{comment.text}}</text><br /> <comment v-for=&quot;id in comment.kids&quot; :id=&quot;id&quot;></comment> </div> <p></template></p> <p><script> import store from '../store'</p> <p> export default { name: 'comment', props: ['id'],</p> <p> computed: { comment () { return store.state.items[<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.id] } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"comment"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>{{comment.text}}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">comment</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"id in comment.kids"</span> <span class="hljs-attr">:id</span>=<span class="hljs-string">"id"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">comment</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">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'../store'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'comment'</span>, <span class="hljs-attr">props</span>: [<span class="hljs-string">'id'</span>], <span class="hljs-attr">computed</span>: { comment () { <span class="hljs-keyword">return</span> store.state.items[<span class="hljs-keyword">this</span>.id] } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>在 <code>&lt;comment&gt;</code> 组件中,<code>comment</code> 属性的数据是根据当前的 <code>id</code> 属性从 store 中取出来的,然后根据 <code>comment.kids</code> 循环创建多个 <code>&lt;comment&gt;</code> 标签,并且把 <code>id</code> 属性传下去。子 <code>&lt;comment&gt;</code> 标签根据传递过来的 <code>id</code> 属性从 store 中获取 <code>comment</code> 数据渲染自身,然后根据 <code>comment.kids</code> 循环创建多个 <code>&lt;comment&gt;</code> 标签,并且把 <code>id</code> 属性传下去。…… 依次递归。</p> <p>再具体的细节,就建议直接看 <a href="https://github.com/weexteam/weex-hackernews/blob/master/src/components/comment.vue" rel="nofollow noreferrer" target="_blank">comment.vue</a> 的代码了。至于 store 是如何获取数据的,关注后续讲 Vuex 的文章。</p> <h2 id="articleHeader11">小结</h2> <p><strong>通篇讲的是 Vue 2.0 的特性,与 Weex 没有半毛钱关系,我想说明的是,这些特性在 Weex 里都是完全可用的。</strong> </p> <p>Vue 2.0 的特性比较多,能力很强大,这里只讲了很小一部分;只要思路清晰,各种奇葩效果也能优雅的实现。在 Vue 2.0 的所有特性中,只要不是强依赖与 Web 本身的特性,都可以在 Weex 里用。如果你对 Web 平台有足够的了解,在写代码的时候就能时刻清楚哪些特性是 Web / <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 强相关的,哪些是跨平台通用的,这对你写跨端(Weex)或者跨栈(node.js)的程序很有帮助。</p>

总结

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

[使用 Weex 和 Vue 开发原生应用] 3 使用 Vue 框架的特性

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

[使用 Weex 和 Vue 开发原生应用] 3 使用 Vue 框架的特性

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

80%的人都看过