Vue 数据怎么获取使用外部的数据

Vue 数据怎么获取使用外部的数据,第1张

通常情况下,在构建 JavaScript 应用程序时,您希望从远程源或从API获取数据。我最近研究了一些公开的API,发现可以使用这些数据源完成很多很酷的东西。

更多来自作者的提示

快速提示:如何在JavaScript中排序对象数组

使用Vuejs,可以逐步地构建围绕其中一个服务的应用程序,并在几分钟内就可以开始向用户提供内容服务。

我将演示如何构建一个简单的新闻应用程序,它可以显示当天的热门新闻文章,并允许用户按照他们的兴趣类别进行过滤,从纽约时报API获取数据。您可以在这里找到本教程的完整代码。

下面是最终应用的外观:

要学习本教程,您将需要一些非常基本的Vuejs的知识。 您可以在这里找到一个很棒的“入门指南”。 我还将使用ES6语法,您可以到这里进一步学习:

项目结构

为了保持简单,我们只使用2个文件:

/appjs /indexhtml

appjs将包含我们应用程序的所有逻辑,indexhtml 文件将包含我们应用程序的主视图。

我们先在 indexhtml 中写一些基本的标记:

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>The greatest news app ever</title>   </head>   <body>     <div id="app">       <h3>VueNews</h3>      </div>   </body> </html>

然后,在indexhtml的底部导入 Vuejs和appjs,就在</body>标签之前:

<script src="/vue"></script> <script src="appjs"></script>

可选的,我们还可以导入Foundation,以利用一些预先创建的样式,来使我们的视图看起来更好一点。

<link rel="stylesheet" ajax/libs/foundation/631/css/foundationmincss">

创建一个简单的 Vue App

首先,我们将在div#app 元素上创建一个新的 Vue 实例,并使用一些测试数据来模拟新闻API的响应:

// /appjs const vm = new Vue({   el: '#app',   data: {     results: [       {title: "the very first post", abstract: "lorem ipsum some test dimpsum"},       {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},       {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},       {title: "four the last time", abstract: "lorem ipsum some test dimsum"}     ]   } });

我们通过el选项告诉 Vue 要挂载的目标元素,并通过data选项指定我们的应用程序用到的数据。

要在我们的应用程序视图中显示这些模拟数据,我们可以在#app元素中写入下面的标记:

<!-- /indexhtml --> <div class="columns medium-3" v-for="result in results">   <div>     <div>       {{ resulttitle }}     </div>     <div>       <p>{{ resultabstract }}</p>     </div>   </div> </div>

v-for 指令用于渲染我们的 results 列表。 我们使用双花括号来显示每一项的内容。

您可以在 Vue 模板语法 这里阅读更多内容

我们现在已经完成了基本的布局工作:

从 API 获取数据

要使用 纽约时报API,您需要获得一个API密钥。所以如果你还没有,注册并获取一个热点事件API的API密钥。

创建ajax请求和处理响应

Axios是一个基于 Promise 的>

以前,vue-resource 通常用于Vue项目,但现在已经退休了。

1、使用axios进行>

一、关于babel-polyfill

1、说明:This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool This polyfill is automatically loaded when using babel-node(模拟ES2015以上的环境,主要用于对ES6新语法不支持的浏览器);

2、安装: npm install --save babel-polyfill;

3、配置: moduleexports = { entry: ["babel-polyfill", "/src/mainjs"] };

4、mainjs中配置: import 'babel-polyfill' //放在最顶部,确保全面加载。

二、关于es6-promise

1、说明:若在项目中使用了ES6 promise对象,它在Chrome、Safari浏览器下可以正常运行,但在360兼容模式、IE内核中不支持;

2、安装: npm install es6-promise;

3、配置:在mainjs中加入 require('es6-promise')polyfill() ,用于在node或浏览器中支持ES6 与CommonJS。

三、步骤详细图

1、index引入这句话或者这三句话

2、执行 npm install --save babel-polyfill;

执行完上面语句packagejson里面就有了这个依赖(检查2部是否执行完成的一个结果)

3、最上面引入,确保加载进去。

4、修改entery里面的内容改成下图那样

四、问题如图:

当把这些攻略都做了一遍后,发现打包完的360的急速模式可以了(本地运行还是不可以),但是!!!ie浏览器,360兼容模式,不管打包还是没打包,都不能显示,完全没有加载进去数据,如下图

并且还报错以下未定的错

(1)、

查询后发现,是因为IE没有这个方法,不支持sessionStorage,解决的方法是:IE本地调试用cookie,或者用webstrom打开项目,但我确实用的webstorm打开的项目,还是不可以,后来找到解决方法, 要把es6转es5

然后, npm run dev ,居然可以了适配了。

一、vue20的双向绑定是怎么实现的

2、observer,compile,watcher

(1)observe是一个数据监听器,核心方法是ObjectdefineProperty

(3)compile是一个指令解析器,对需要监听的节点和属性进行扫描和解析。

3、此模式的优点:不需要显式调用,可以直接通知变化,更新视图;劫持了属性setter,不需要额外的diff *** 作

4、ObjectdefineProperty缺点

(1)不能监听数组

(2)不能监听整个对象,只能监听属性

(3)不能监听属性的增删,只能监听变化

5、30版本使用Proxy

(1)可以监听数组

(2)可直接监听整个对象,不用层层递归属性

(3)get和set时候直接有参数,不需要单独存储变量

(4)new Proxy()会返回一个新对象,不会污染源对象。

二、数据不更新的问题

1、更新的原理:在数据读取时收集依赖,在赋值时通知依赖更新。

2、object有defineProperty方法,通过getter,setter只监听了属性的读取和赋值,但是新增属性和删除属性没有检测,所以专门提供了$set和$delete来实现

3、array,没有defineProperty方法,没有setter,通过get和新建数组方法拦截器修改原生方法push,pop,shift,unshift,splice,sort,reserve来实现监听,而通过修改数组下标 *** 作数组的不会被检测,所以专门提供了$set和$delete来实现

4、$set(target, key, value)和$delete(target, propertyName/index)方法原理

(1)判断target是否是undefined,null,或者原始类型,或者vue实例,或者vue实例的跟数据对象

(2)target为数组,则还是通过调用splice *** 作索引更新数据

(3)target为对象,且为响应式,则调用defineReactive *** 作数据

(4)更新完数据后通知依赖更新

三、computed和watch和methods

1、computed

(1)设计初衷:为了使模板中的逻辑运算更简单

(2)适用于数据被重复使用或者计算复杂费时的场景;依赖其他数据的场景

(3)读取缓存,依赖不变,则不需重新计算。(根据dirty标志判断)

2、watch是对数据的监听回调

3、computed和watch的区别

相同点:都会观察页面的数据变化

不同点:(1)computed是读取缓存,watch每次都要重新执行;

(2)watch更适合数据变化时的异步 *** 作和开销较大的 *** 作。

4、computed和methods的区别

computed依赖缓存,可以定义getter和setter,但是methods不行

四、vue-router的模式区别

1、abstract:非浏览器环境下使用

2、hash:

(1)默认。监听hashchange实现。

(2)有点,兼容性好,ie8支持

(3)缺点:看起来奇怪

3、history:

(1)h5新增的。允许开发者直接修改前端路由而不重新触发请求页面

(2)实现原理:监听popstate事件。能监听到用户点击浏览器的前进后退事件或者手动调用go,back,forward事件;不能监听到pushState和replaceState事件。

(3)为了避免浏览器刷新出现的404页面,需要在服务端配置兼容。

(4)如果浏览器不支持,会降级到hash模式

通过vueuse插件机制和vuemixin将store在beforeCreate和destroyed生命周期进行混入。

五、vuex解决了什么问题

1、vuex解决了vue项目中的数据状态管理问题

2、是组件通信的一种方式。

3、原理:创建了单一的状态树,包含state,mutation,action,getter,module。

4、view(dispatch)action(commit)mutation(mutate)state(render)view

5、通过vue的data和computed,让state变成响应式,

6、通过vueuse插件机制和vuemixin将store在beforeCreate生命周期进行混入。

六、nextTick是怎么是实现的

1、作用:将回调延迟到下次DOM更新循环之后执行

2、原因:VUE在更新DOM时是异步的,vue检测到数据变化后,不会立即更新DOM,而是会开启一个事件队列,并缓冲同一时间循环中的所有数据变更,在下一次tick中,执行更新DOM。

3、js的运行机制:js是单线程的,基于事件循环,有宏任务和微任务。

4、内部原理:

(1)能力检测:Promisethen(微), MutationObserve(微),setImmediate(微),setTimeout(宏)

(2)将回调函数推入回调队列,锁上易步锁,执行回调。

七、keep-alive内置组件和LRU算法(队列)

1、自身不会渲染成DOM,没有常规的 标签,是个函数组件,被他包裹的组件,切换时会被缓存在内存中,而不是销毁。

(1)可以有条件的缓存:include(匹配到的缓存),exclude(匹配到的不缓存),max(最多可以缓存多少组件实例)

2、原理:内部维护了thiscache(缓存的组件对象)和thiskeys(thiscache中的key),运用LRU策略。

(1)命中了缓存的组件要调整组件key的顺序。

(2)缓存的组件数量如果超过thismax时,要删除第一个缓存组件。

(3)LRU(Least recently used,最近最少使用):根据数据的 历史 访问记录来进行淘汰数据。“如果数据最近被访问过,那么将来被访问的几率也更高。”

3、生命周期钩子:activated和deactivated,被keep-alive包括的组件激活和停用时调用。先停用组件的deactivated,再激活组件的activated

以上就是关于Vue 数据怎么获取使用外部的数据全部的内容,包括:Vue 数据怎么获取使用外部的数据、vue获取后端多层数据、vue 项目在ie浏览器的兼容问题等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9674119.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存