您的位置:时时app平台注册网站 > web前端 > vue项目如何刷新当前页面【彩世界网址】

vue项目如何刷新当前页面【彩世界网址】

2019-11-03 04:35

功能:允许一个祖辈组件向其具备子子孙孙注入三个依据,任由组件等级次序有多少深度,并在起上上游关系创建的小时里始终身效。

尝试

  • phoneList组件调控器中,删除orderProp的私下认可值,下拉菜单会多二个空白栏("unknown"卡塔尔。
  • 在phone-list.template.html模板增加三个{{$ctrl.orderProp}}的绑定来突显当前的排序依附。
  • 反转排序只供给在排序值前边增多一个-号:
<option value="-age">Oldest</option>

彩世界网址 1

调整和裁减代码时的注意事项

因为依赖注入是通过参数名来贯彻的,所以压缩代码的时候,要专心参数名不能够被审核消减,不然会促成重视注入出错。
对于该难点,大家要求提供二个明确命令禁绝压缩的依据名称列表,具体有七个方法:

  • 在调节器构造函数中制造多个$inject字符串数组,每一个字符串表示一个亟待注入的劳务名。举个例子:
function PhoneListController($http) {...}
//$inject字符串数组
PhoneListController.$inject = ['$http'];
...
.component('phoneList', {..., controller: PhoneListController});
  • 在组件注册调整器的代码中使用内联申明数组,举个例子:
function PhoneListController($http) {...}
...
.component('phoneList', {..., controller: ['$http', PhoneListController]});

那二种方法可任选那一个。假使应用第二种办法,平常会用内联构造函数来注册调控器:

.component('phoneList', {..., controller: ['$http', function PhoneListController($http) {...}]});

近年来始于,我们会在课程中运用内联注明的点子进行处理。

app/phone-list/phone-list.component.js(为PhoneListController增多内联批注卡塔尔:

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: ['$http',   //内联注解
      function PhoneListController($http) {
        var self = this;
        self.orderProp = 'age';

        $http.get('phones/phones.json').then(function(response) {
          self.phones = response.data;
        });
      }
    ]
  });

tableList.vue:

构件模板

app/phone-list/phone-list.template.html:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      <p>
        Search:
        <input ng-model="$ctrl.query">
      </p>

      <!--新增选择框,绑定$ctrl.orderProp-->
      <p>
        Sort by:        
        <select ng-model="$ctrl.orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </p>

    </div>
    <div class="col-md-10">
      <!--Body content-->
      <!--新增orderBy,以$ctrl.orderProp为依据-->
      <ul class="phones">
        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">                
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>
  • 追加<select>成分,并绑定到 $ctrl.orderProp(数据模型卡塔 尔(英语:State of Qatar),客商能够从七个选项中打开精选。而orderBy又以$ctrl.orderProp为依据,那样选定的选项就可以形成排序依赖。
    这种双向数据绑定,能够让数据变动及时反映到视图中,且无需钦点DOM操作。
  • orderBy连接了filter,过滤后的数量才会输入orderBy举办排序。orderBy的劳作规律是,复制输入的数组、实行排序、输出。

彩世界网址 2

组件调整器

行使$http向web服务器发送HTTP央求,并从文件app/phones/phones.json 中拿到手提式有线电话机数码。$http是Angular的松开服务(built-in Services卡塔 尔(阿拉伯语:قطر‎之大器晚成,内置服务用于拍卖大范围操作,Angular会在前后相继需求时自动注入这么些劳动。
劳动由Angular的信任性注入子系统一管理理。信赖注入能让你的web app达成越来越好的构造(如独立的显得结构、数据结构和调节器卡塔 尔(英语:State of Qatar)和组件松耦合(组件不用本人实现依靠关系,而是通过注重注入子系统来促成卡塔 尔(阿拉伯语:قطر‎,那样app也会更便于测验。
app/phone-list/phone-list.component.js:

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
//向控制器函数注入$http
    controller: function PhoneListController($http) {
      var self = this;
      self.orderProp = 'age';
//$http获取json文件中的数据
      $http.get('phones/phones.json').then(function(response) {
        self.phones = response.data;
      });
    }
  });
  • $http发起GET需要,服务器响应央浼,再次回到json文件中的手提式有线电话机数码
  • $http服务重临一个promise对象,该指标有then()函数,我们在then()函数中校期服用务器重临的数量放入调控器。
    小心:Angular会自动物检疫查评定和分析json数据。
  • 出于回调函数中的this不会指向调整器,供给援引变量self来指向调控器实例。

利用Angular的某些服务,只须求将该服务名称放入调控器构造函数的参数中,举个例子:

function PhoneListController($http) {...}

Angular的信赖注入会在调控器开始化时提供劳动,并机关管理相应的层系重视关系(平时三个劳务还借助于任何服务卡塔尔。
静心:参数的名字很关键(不能够随随意便改善卡塔 尔(英语:State of Qatar),重视注入会用那几个名字查找服务功效并举行注入。

  1. 收获列表方法

7 XH福睿斯和依赖注入


贰个实打实的应用程序不会只有三条数据,也不会直接写到前端代码中。所以那风度翩翩节,我们会利用AngularJS的放置服务$http从服务器中拿到越来越多的数目,并行使依赖注入(dependency injection卡塔尔为phonelist组件调整器提供服务。

 

测试

组件的单元测验,用于申明暗中认可排序
app/phone-list/phone-list.component.spec.js:

describe('phoneList', function() {

  // 测试前需加载`phoneList` 模块
  beforeEach(module('phoneList'));

  // 测试控制器
  describe('PhoneListController', function() {
    var ctrl;

    beforeEach(inject(function($componentController) {
      ctrl = $componentController('phoneList');
    }));

    it('should create a `phones` model with 3 phones', function() {
      expect(ctrl.phones.length).toBe(3);
    });

    it('should set a default value for the `orderProp` model', function() {
      expect(ctrl.orderProp).toBe('age');
    });

  });

});

测验成功,则命令行输出:

Chrome 22.0: Executed 2 of 2 SUCCESS (0.021 secs / 0.001 secs)

端到端测验:用于注明下拉菜单改动时的排序
e2e-tests/scenarios.js:

describe('PhoneCat Application', function() {

  describe('phoneList', function() {

    ...

    it('should be possible to control phone order via the drop-down menu', function() {
      var queryField = element(by.model('$ctrl.query'));
      var orderSelect = element(by.model('$ctrl.orderProp'));
      var nameOption = orderSelect.element(by.css('option[value="name"]'));
      var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));

      function getNames() {
        return phoneNameColumn.map(function(elem) {
          return elem.getText();
        });
      }

      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
//测试默认状态下的排序
      expect(getNames()).toEqual([
        'Motorola XOOMu2122 with Wi-Fi',
        'MOTOROLA XOOMu2122'
      ]);
//选择按“name”排序
      nameOption.click();
//测试排序
      expect(getNames()).toEqual([
        'MOTOROLA XOOMu2122',
        'Motorola XOOMu2122 with Wi-Fi'
      ]);
    });

    ...

运维测量检验,在命令行中输入:

npm run protractor

  1. 用vue-router重新路由到如今页面,页面是不开展刷新的

导言


近年在学AngularJS的实例教程PhoneCat Tutorial App,发掘网络的国语教程都相比悠久,与拉脱维亚语版对应不上,而且贫乏组件和文书重构两节。所以决定本身打理三个华语简明教程。

此篇为6-7节。
上一篇:AngularJS Phonecat(步骤0-步骤5)

评释reload方法,调节router-view的显得或遮掩,进而决定页面包车型地铁重新加载

$前缀命名准则

Angula的放到服务service、功能域scope和一些其它的API都有几个$前缀。该前缀用于Angular提供的服务,所以大家自定义服务和数据模型的时候最佳别用$前缀,避防产生命名冲突。此外,$$前缀用于个人属性,无法访问或退换。

 

6 下拉选取框--双向绑定


大家要加进三个下拉筛选框,用于选取排序必要,让手提式有线电话机列表按须求排序。
为了达成机关排序,大家要在数据模型中增加排序的基于,并与迭代器联系起来。

1.场景

数据

app/phones/phones.json用于保存手机数码,保存格式为json,文件中的风流浪漫组手提式有线电话机数据如下所示:

[
  {
    "age": 13,
    "id": "motorola-defy-with-motoblur",
    "name": "Motorola DEFYu2122 with MOTOBLURu2122",
    "snippet": "Are you ready for everything life throws your way?"
    ...
  },
  ...
]

inject:三个字符串数组,或几个指标,对象的 key 是本土的绑定名

构件调节器

app/phone-list/phone-list.component.js:

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController() {
      this.phones = [
        {
          name: 'Nexus S',
          snippet: 'Fast just got faster with Nexus S.',
          age: 1            //新增了age属性
        }, {
          name: 'Motorola XOOM™ with Wi-Fi',
          snippet: 'The Next, Next Generation tablet.',
          age: 2
        }, {
          name: 'MOTOROLA XOOM™',
          snippet: 'The Next, Next Generation tablet.',
          age: 3
        }
      ];

      this.orderProp = 'age';       //默认以“age”为排序依据
    }
  });
  • 改良数据模型:每一个phone对象都新扩大了age属性,用于按手机生产时间排序。
  • 设置默许以“age”为排序依附。假诺不安装暗许值,即手机列表不博览会开排序,直到顾客从下拉菜单中选用选项。
  • 双向绑定:页面加载后,我们拜会到“Newest”被选中,那是因为调节器设置了暗中同意排序依据“age”,达成了数据模型-->UI的绑定。如若大家在下拉菜单中甄选“Alphabetically”,数据模型也会更新,进而手提式有线电话机列表重新开展排序,那就是UI-->数据模型的绑定。
    小结起来正是,改造数据模型会变动视图,改革视图也会转移数据模型。

在页面注入App.vue组件提供(provide卡塔 尔(英语:State of Qatar)的 reload 信任,在逻辑完毕以后(删除或增添...卡塔尔,直接this.reload()调用,就能够刷新当前页面。

测试

运用信赖注入使得调整器有了信任关系,所以构建调整器的单元测量试验变复杂了。能够动用new运算符在构造函数中提供$http的模拟完成,然则以往毫不那么艰难。
Angular提供了用于单元测量检验的模仿$http服务,大家得以向来调用服务中的$httpBackend方法实现服务器的模拟响应。

app/phone-list/phone-list.component.spec.js:

describe('phoneList', function() {

  beforeEach(module('phoneList'));

  describe('controller', function() {
    var $httpBackend, ctrl;

    // 这里的依赖注入会忽略头部和尾部的下划线(如 _$httpBackend_).
    // 这样变量就可以用和服务同样的名字,而不会有命名冲突
    beforeEach(inject(function($componentController, _$httpBackend_) {
      $httpBackend = _$httpBackend_;
      //模拟发送http请求
      $httpBackend.expectGET('phones/phones.json')
                  //模拟响应
                  .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

      ctrl = $componentController('phoneList');
    }));

    ...

  });

});

在乎:因为须求加载Jasmine和angular-mocks.js到测验景况,所以我们有五个帮扶方法module和inject用于访问和安排注入器。

  • 应用inject()向Jasmin的beforeEach()函数注入$componentController和 $httpBackend服务的实例,用于创设每种测量检验。那样保证各类测量试验有一同的起源,又分别独立。
  • 调用$componentController(),并传播参数'phoneList'(组件的名字卡塔 尔(英语:State of Qatar)。

代码应用$http获取手提式有线电话机列表到调节器中,所以在成立调节器(PhoneListController卡塔 尔(阿拉伯语:قطر‎前,我们要报告测量试验程序预期的输入恳求:

  • 向beforEach()函数注入$httpBackend的央浼服务,它会效仿临盆意况中的XH讴歌RDX和JSONP诉求。那样我们在编排测量试验时,就不要管理原生API和与它们相关的全局状态(服务器响应结果卡塔尔。那样也幸免了异步诉求(XH讴歌ZDX和JSONP是异步诉求卡塔 尔(阿拉伯语:قطر‎,能够加速单元测量检验。
  • $httpBackend.expectGET()方法能够一成不改变预期的HTTP诉求和响应。注意:在调用$httpBackend.flush()之后,才会回来响应。

接着,大家来证实在摄取响应在此之前,调控器中是或不是有phones属性:

it('should create a `phones` property with 2 phones fetched with `$http`', function() {
//收到响应前,phones未定义
  expect(ctrl.phones).toBeUndefined();
//收到响应后,phones变成一个对象数组
  $httpBackend.flush();
  expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
});
  • $httpBackend.flush()激活浏览器央浼类别,那会让$http服务再次回到预期的响应。

末了,们声明暗中认可的orderProp值是还是不是设置科学:

it('should set a default value for the `orderProp` property', function() {
  expect(ctrl.orderProp).toBe('age');
});

命令行应该出口:

Chrome 49.0: Executed 2 of 2 SUCCESS (0.133 secs / 0.097 secs)

 

尝试

  • 在phone-list.template.html尾巴部分,参预代码:
<pre>{{$ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp | json}}</pre>

能够看出json格式的无绳话机列表。

  • 在调控器PhoneListController的$http回调函数中输入:
self.phones = response.data.slice(0, 5);

能够预管理HTTP响应,将回到的无绳话机序号限定为0-5。

下一篇:AngularJS Phonecat (步骤8-步骤9)

彩世界网址 3

提示:provide 和 inject 绑定并非可响应的。那是特意为之的。倘让你传入了三个可监听的靶子,那么其指标的特性依然可响应的。

彩世界网址 4

provide / inject 组合

App.vue:

3.解决办法

4.provide / inject 用法

以上算是开拓进程中的多个坑,用了黄金时代段时间,明天再读代码的时候,感到被坑的很要紧。

3.那样重复调用获取数据,就可以风流洒脱并达成页面数据更新(不会重新刷新页面卡塔尔国,同一时间确定保证有分页时,能够停留在当前页(刷新前假若是第二页,刷新后照旧在其次页卡塔 尔(英语:State of Qatar),

==========================================

即其余查询条件保证不改变,体验效果好

彩世界网址 5

 

2.会合包车型客车主题素材

彩世界网址 6

 

2.重复获取数据

深入驾驭数据驱动

2.施用window.reload(),或然router.go(0)刷新时,整个浏览器进行了重复加载,闪烁,体验不佳

在拍卖列表时,常常有删除一条数据仍旧新添多少未来必要再行刷新当前页面包车型地铁必要。

provide:选项应该是三个目的或回到三个指标的函数。该对象包括可注入其后裔的性格。

本文由时时app平台注册网站发布于web前端,转载请注明出处:vue项目如何刷新当前页面【彩世界网址】

关键词: