<p><code></p> <p>刚开始学vue的时候没有使用脚手架,现在用脚手架写法有点不同,今天遇到的问题是使用<strong>豆瓣api</strong>异步加载数据的时候,会一直在命令行上报错,基本上错误都是<strong>xxx 未定义</strong>。</p> <h2 id="articleHeader0">例子</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div v-if=&quot;moviesData&quot;> <p> <!-- 正在上映的电影-北京 --></p> <h1>{{ moviesData.title }}</h1> </div> <p></template></p> <p><script> import jsonp from 'jsonp' // 一个jsonp插件 npm install jsonp --save</p> <p>export default { data(){ return { moviesData: null // 如果不事先给一个默认值的data,就会报 xxx is not define } },</p> <p> // 生命周期函数 created(){</p> <p> // 发送请求 jsonp('https://api.douban.com/v2/movie/in_theaters', null, (err, data)=>{ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.moviesData = data; }); } } </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"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"moviesData"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 正在上映的电影-北京 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{{ moviesData.title }}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</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> jsonp <span class="hljs-keyword">from</span> <span class="hljs-string">'jsonp'</span> <span class="hljs-comment">// 一个jsonp插件 npm install jsonp --save</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">default</span> { data(){ <span class="hljs-keyword">return</span> { <span class="hljs-attr">moviesData</span>: <span class="hljs-literal">null</span> <span class="hljs-comment">// 如果不事先给一个默认值的data,就会报 xxx is not define</span> } }, <span class="hljs-comment">// 生命周期函数</span> created(){ <span class="hljs-comment">// 发送请求</span> jsonp(<span class="hljs-string">'https://api.douban.com/v2/movie/in_theaters'</span>, <span class="hljs-literal">null</span>, (err, data)=&gt;{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.moviesData = data; }); } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>在发送异步请求的时候要注意两个点:</p> <ol> <li>数据的初始值,我这里是给<code>null</code>作为初始值。</li> <li>判断数据是否存在,在html中,我用<code>v-if</code>判断<code>moviesData</code>是否存在,可以确保只有在数据存在的时候才会渲染。</li> </ol> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25812.html