Vue入门到精通

VUE

一. 走近VUE

1.1 概述

• Vue和Angular、React的都是前端框架
• 特点：
  • 单页面框架
  • 基于模块化组件化的开发模式
  • 简单 灵活 高效 国内的中小企业里面用的非常多
• Vue 结构图示：
• 

1.2 Vue的开发环境（在windows命令行里做）

• 方法一：

  1. 必须安装 node.js

  2. 搭建vue的开发环境，安装vue的脚手架工具，官方命令行工具

     • npm install -global vue-cli / cnpm install --global vue-cli (此命令只需要执行一次)

  3. 创建项目

     • vue init webpack vue [示例代码： vue init webpack vuedemo01 -> vue-router :Yes code: NO tests: Yes]
     • cd vue-demo01
     • cnpm install / npm install
     • npm run dev

  4. 注意： cnpm:淘宝镜像，下载包的速度更快一些；

• 方法二： 另一种创建项目的方式：（推荐）

  • vue init webpack-simple vuedemo02
  • cd vuedemo02
  • cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略，如果报错了 cd到项目里面运行
  • npm run dev

如果node_modules不在（被删除等），可以通过cd到这个项目目录中进入命令行cmd 然后输入命令：cnpm install 可以将package.json中的包生成一个node_modules的包；
运行项目： npm run dev

1.3 项目模块名称介绍

• node_modules: 项目的依赖
• src/assets: 项目开发时所有的资源【静态资源文件】
• src/App.vue: 根组件： 相当于一个小的页面（html，css，js组成的一个小页面，可以被引用重复使用，比如导航栏可以很多地方都用）
• src/main.js: 实例化一个vue,挂载已经定义的组件【全局的入口文件】
• .babelrc: 配置文件【不用管】
• .editorconfig: 编辑器配置文件【不用管】
• .gitignore: 忽略的配置文件【不用管】
• index.html: html的入口文件 【不要改】
• package.json: 管理项目的配置文件，管理版本等信息
• READMO.md: 读我，一些帮助文档
• webpack.config.js:能让我们vue的文件打包成浏览器能解析的文件

除了src里面的，其他的都最好不要动
vue的模板里面，所有的内容要被一个根节点包含起来
export default ： 表示把这个组件暴露出去
data(){}: 业务逻辑里面定义的数据

1.4 常用标签绑定：

• 多重嵌套循环可以查看代码

• v-bind:src=“url” ->简写： :src=“url” 可以做一个动态绑定

• v-html: 绑定html 可以让浏览器解析html并且不显示标签

• v-text: 可以绑定文字，且不会页面闪烁；

• v-bind:class 动态显示

  • 前面代码：

    <div v-bind:class="{'red':flag}">
    我是一个div
    </div>
    

  • 前面另一种代码： true显示红色，false显示蓝色

    <div v-bind:class="{'red':flag,'blue':!flag}"
    我是另一个div
    </div>
    

  • 循环，第一个红色显示,第二个蓝色显示

    <li v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}"
    {{key}}---{{item}}
    </li>
    

  • 后面data数据区里：
    • flag: true;

• v-bind:style:动态绑定数据长短等数据

  • 前面代码(这里是动态拼接，数字+px就是完整的像素长度)：

    <div class="box" v-bind:style="{width:boxWdith+'px'}"
    

  • 后面data 数据区部分代码：

    boxWdith:300
    

• v-for ：遍历

  • 使用索引的情况下遍历代码：

    <li v-for="(item,key) in list">
    {{key}}---{{item}}
    </li>
    

对象用{} 数组用[] 可以对象嵌套数组，数组里嵌套对象

1.5 双向数据绑定

• 概述：

  • 双向数据绑定MVVM vue就是一个MVVM的框架
  • M model
  • V view
  • MVVM: model改变会影响视图，view视图改变反过来影响model
  • 双向数据绑定必须在表单里使用

• 结构：

  • data:业务逻辑里面定义的数据
  • methods:放方法的地方
  • 代码示例：

    export default{
    data(){
    return{
    //这里面定义变量
    }
    },
    methods:{
    getMsg(){
    //这里getMsg是一个方法
    }
    }
    }
    

• ref获取dom节点

  • 概述：
    我是一个box
    这里的ref给这个div标签命名为ref,后端可直接以此名字进行操作；
  • 前面代码：

    <div ref="box"> 我是一个box</div>
    <button v-on:click="getInputValue()"> 获取第二个表单里面的数据</button>
    

  • 后端代码

    methods{
    getInputValue(){
    //获取ref定义的dom节点
    this.$refs.box.style.background="red";
    }
    }
    

this.$refs一定要记着，必须要加$

1.6 执行方法的第一种写法 【事件】

• v-on: click=“run()” 使用v-on进行监听方法

• 简写形式： @click=“run()” 意义一样

• 前面代码：

   <button data-aid='123' @click="eventFn($event)">事件对象</button>
  

• 后面代码：

  eventFn(e){
  console.log(e);
  // e.srcElement  获取dom节点，可以引用此对此节点进行操作
  e.srcElement.style.background='red';
  console.log(e.srcElement.dataset.aid);	//获取自定义属性的值
  	}
  

• 数组的增加：this.list.push(this.xxx);

• 数组的删除：this.list.splice(key,1);

• 可选框：

• @keydown 键盘按下后执行事件

• todoList 这个必须要会，用在购物车，热搜等地方

在执行方法里面调用data数据的话，需要 this.数据名 进行调用

二. 组件

2.1 概述

• 组件：

  • 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素；
  • 所有的Vue最贱同时也都是Vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子；
  • 在Vue中，所有的功能都是由组价组成的。
  • 组件由模板，业务逻辑，css等组成

• 组件的作用：

  • 可以把公共的功能单独抽离出来做一个组件，可以引用调用；

• 根组件：

  • 页面是由组件组成，而App.Vue是根组价，我们一般不操作，而其他的组件都是挂载这个根组件下面；后面有路由后可以动态的挂载组件；

• 可以创建一个单独文件夹（components）,单独存放所有组件

  • 由模板等组成，模板下应该有一个根节点，所有内容被根节点包含起来，且里面是放的Html代码

• 引入：

  • 在App.vue 内的

2.2 生命周期函数

• 组件挂载以及组件更新销毁的时候触发的一系列的方法 这些方法就叫做生命周期函数
• 方法代码示例：

  beforeCreate(){
  console.log('实例刚刚被创建1')；
  },
  creaeted(){
  console.log('实例已经创建完成2');
  },
  beforeMount(){
  console.log('模板编译之前3');
  },
  mounted(){
  //请求数据，操作dom，放在这个里面 mounted
  console.log('模板编译完成4');
  },
  beforeUpdate(){
  console.log('数据更新之前');
  },
  updated(){
  console.log('数据更新完毕');
  },
  beforeDestroy(){
  //页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期
  console.log('实例销毁之前')；
  }，
  destroyed(){
  console.log('实例销毁完成');
  }
  }
  

在生命周期函数中我们使用较多的是：1. mounted 2. 页面销毁之前(用户未保存数据，我们在用户离开的时候进行保存)

2.3 请求数据

• 请求数据的模块：

  • vue-resource 官方提供的vue 的一个插件
  • axios
  • fetch-jsonp

• vue-resource:

  • 安装： 先进入项目的文件里面 （如：c:\vue\vuedemo > ）

    • 输入命令(这里输入命令必须以–save结尾，才能保存到package.json):
      ‘cnpm install vue-resource --save’

  • 引入和使用，在main.js中引入这个插件,在main.js输入：

    import VueResource from 'vue-resource'
    Vue.use(VueResource);
    

  • 请求数据源： [请求集合并遍历知识的代码]

    • 在具体的组件中加载：

      <button @click="getData()">请求数据</button>
      <ul>
      <li v-for="item in list">
      {{item.title}}
      </li>
      </ul>
      

    • 在后面VM中输入：

      methods:{
      //请求数据
      var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
      this.$http.get(api).then(function(response){
      console.log(response)
      //注意list 的指向
      this.list=response.body.result;			//将返回的结果给list
      }),function(err){
      console.log(err);
      })
      }，
      mouten(){
      //生命周期函数，一加载就触发
      this.getData();
      }
      

2.4 请求数据步骤

• 需要安装vue-resource模块，注意加上 --save
  npm install vue-resource --save / cnpm install vue-resource --save

• main.js引入vue-resource
  import VueResource from 'vue-resource'

• Vue.use(VueResource);

• 在组件里面直接使用
  this.$http.get(地址).then(function(){})

三. Axios

3.1 概述

• 它不仅可以在vue，也可以在node.js等中使用；

3.2 安装

• 安装： cnpm install axios --save
• 哪里用哪里引用： import Axios from ‘axios’; //它跟vue-resources不一样它不需要use这个操作
• 使用：
  • 在methods中使用：

    //这里模拟跟上面的请求一样，是将请求的值给list；
    methods:{
    getData(){
    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    Axios.get(api).then((response)=>{
    console.log(response);
    this.list=response.data.result;
    }).catch((error)=>{
    console.log(error);
    })
    }
    

在进行使用的使用首先应该先运行一下 npm run dev

还有一个 : fetch-jsonp 也是先打包等操作；
建议使用官方的： vue-resource
组件中给html内容的应该被

包围起来

四. 父子组件

4.1 父子组件传值

• 概述：

  • A组件中引入B组件，那么A组件就是B的父组件，B是A的子组件；

• 用途：

  • 不同的地方显示不同的数据
  • 动态改变组件的值，比如购物车；

• 代码示例：

  • A（子组件）：Header.vue

     <template>
     <div>
     <h2>我是头部组件--{{title}}---{{homemsg}}</h2>
    <!-- <button @click='run()'>执行父组件的方法</button> -->
     <!--如果要在方法内传值，记住外部双引号，内部单引号-->
     <button @click="run('123')">执行父组件的方法</button>
    <button @click="getParent()">获取父组件的数据和方法</button>
     </div>
     </template>
    <script>
    export default{
    data(){
    return{
    	<!--这里要返回一个对象，必须使用return-->
    	msg:'msg'    
    }
    },
    methods:{
    	<!--这里调用父组件的方法，以及数据-->
    	getParent(){
    	//alert(this.home.title)
    	this.home.run();
    	}
    },
    props:{
    <!--对安全性进行检查-->
    'title':String,
    "homemsg":String
    ['title','homemsg','run','home']
    
    }
    }
    

  • B（父组件）: Home.vue

     <templte>
     <!--所有的内容要被根节点包含起来-->
     <div id="home">
     <!-- 这里将整个home的实例传过去了，这就表示在子组件中可以获取父组件的所有方法与数据-->
     <v-header :title="title" :homemsg='msg' :run="run" :home="this"></v-header>
     首页组件
     </div>
     </template>
     <script>
     <!--引入子组件-->
     import Header from './Header.vue';
     export default{
     data(){
     return{
     msg:'我是一个home组件',
     title:'首页111'
     },
     components:{
     'v-header':Header
     },
     methods:{
     run(data){
     alert('我是Home组件的run方法'+data)；
     }
     }
     }
     }
    

• 总结： 父组件给给子组件传值：

  1. 父组件调用子组件的时候，绑定动态属性
     
  2. 在子组件里面通过props接收父组件传过来的数据
  3. 直接在子组件里面使用（直接将实例传入）

方法传值的时候，外部双引号，内部单引号；
父子组件传值的时候，如果一个数据父子都有值，那么调用的时候还是会调用父组件的值，但是我们不建议这样调用
验证合法性一般在大公司才有用到，具体可以查看文档： https://cn.vuejs.org/v2/guide/components.html#Prop-验证

4.2 父子组件传值—主动获取值的方法

• 父组件主动获取子组件的数据和方法：
  1. 调用子组件的时候定义一个ref：
     <v-header ref="header"></v-header>
  2. 在父组件里面通过
     this.$refs.header.属性
this.$refs.header.方法

这种方式跟前面的命名绑定属性方法类似，通过起一个名字，再通过this.$refs直接调用这个实例对象的属性或方法；这种方法不需要传入传出，更贴合面向对象更简单；

• 子组件主动获取父组件的数据和方法
  1. this.$parent.数据
  2. this.$parent.方法

4.3 非父子组件传值

• 概述：

  • 有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的Vue实例作为事件总线；
  • 在复杂的情况下我们应该考虑使用专门的状态管理模式。

• 如何传值：

  1. 新建一个js文件， 然后引入vue 实例化vue 最后暴露这个实例
  2. 在要广播的地方引入刚才定义的实例
  3. 通过VueEmit.$emit(‘名称’,‘数据’)
  4. 在接收数据的地方通过$on接收广播的数据

     VueEmit.$on('名称',function(){
     })
     

• 大致操作：

  • 新建一个VueEvent.js

    import Vue from 'vue';
    var VueEvent=new VUe();
    export default VueEvent;
    

  • 在Home.vue组件中：

    <button @click="emitNews()">给News组件广播数据</button>
    
    
    <script>
    //引入vue实例
    import VueEvent from '../model/VueEvent.js';
    export default{
    data(){
    return{
    	msg:'我是一个Home组件'
    }
    },
    methods:{
    emitNews(){
    VueEvent.$emit('to-news',this.msg)
    }
    }
    }
    

  • 在News.vue中 //在钩子函数中监听到事件’to-news’

     mounted(){
     VueEvent.$on('to-news',function(data){
     console.log(data);
     }) 
     }
    

在广播数据中，首先要实例化一个空的Vue，然后暴露这个实例
在广播中，一个发出的方法必须调用$emit,一个接收必须在钩子函数(mounted)中使用$on监听事件即可做出响应
所有的组件都是App.vue的子组件，所以创建新的组件的时候不要忘了在App.vue中引入

五. 组件路由 vue-router | 动态挂载组件（每一个组件就是一个页面）

5.1 组件路由的安装和入门程序

• 概述：

  • Vue Router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
    • 嵌套的路由/视图表
    • 模块化的、基于组件的路由配置
    • 路由参数、查询、通配符
    • 基于Vue.js过渡系统的视图过渡效果
    • 细粒度的导航控制
    • 带有自动激活的CSS class的链接
    • HTML5 历史模式或hash模式，在IE9中自动降级
    • 自定义的滚动条行为
  • 它可以根据不同的地址去加载不同的组件，并显示不同的页面，每个组件就像一个页面一样

• 步骤：

  1. 安装 （在项目的位置上进入命令提示符然后输入下方命令）
     npm install vue-router --save 或：
     cnpm install vue-router --save

  2. 引入并Vue.use(VueRouter) (main.js)
     import VueRouter from ‘vue-router’
     Vue.use(VueRouter)

  3. 配置路由 都在main.js

     1. 创建组件 引入组件
     2. 定义路由（建议复制，以免出错）

        const routes=[
        	{path: '/foo', component:Foo},
        	{path: '/bar', component:Bar},
        	{path:'*',redirect:'/home'}		//默认跳转路由
        ]
        

     3. 实例化VueRouter

        const router=new VueRouter({
        routes	//(缩写)相当于 routes: routes
        })
        

     4. 挂载
        new Vue({
        el: ‘#app’,
        router,
        render: h=> h(App)
        })
     5. 根组件的模板里面放上这句话： App.vue的
        标签内要加这个
        <router-view></router-view>

• 代码示例：

  • 前提： 已经有了两个组件：home,news 且相关配置已经配置完成
  • 代码：

    <template>
    <div id="app">
    <router link to="/home">首页</router-link>
    <router link to="/news">新闻</router-link>
    <hr>
    <router-view></router-view>
    </div>
    </template>
    

5.2 传值方式一: 动态路由

• 在2步骤中：配置路由中添加

  • 普通配置：

    const routes=[
    {path: '/content/:aid',component: Content}	//动态路由
    ]
    

  • 获取动态路由传值：

    mounted(){
    	console.log(this.$route.params);		//获取动态路由传值并打印
    }
    

  • 遍历中绑定固定路由代码示例： [这个遍历后的每个点击，路由地址都是以123，显然是不合实际的]

    <ul>
    	<li v-for="(item,key) in list">
    		<router-link to="/content/123">{{key}}---{{item}}</router-link>
    	</li>
    </ul>
    

  • 改造后动态绑定路由（与索引绑定）： 【绑定动态数据要使用 : 来进行绑定】

    <ul>
    	<li v-for="(item,key) in list">
    		<router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
    	</li>
    </ul>
    

• 小结：

  1. 不同路由传值： 动态路由

     routes:[
     	//动态路径参数，以冒号开头
     	{path:'/user/:id',component:User}
     ]
     

  2. 在对应的页面

     this.$route.params 		//获取动态路由的值
     

5.3 传值方式二： Get传值

• 步骤：
  1. 先创建一个Vue（一个详情页面），从原来的遍历路由跳转到此详情页面
  2. 在另外一个Vue中遍历data(){}内的list集合，然后并给跳转链接和路由地址，代码示例：

     - <template>
     - <!--所有的内容都要被根节点包含起来-->
     - <div id="home">
     - 我是首页组件
     - <ul>
     - <li v-for="(item,key) in list">
     - <router-link to="/pcontent?aid=123">{{key}}--{{item}}</router-link>
     - <li>
     - </ul>
     - </div>
     - </template>
     - <script>
     - export default{
     - data(){
     - return{
     - msg:'我是一个home组件',
     - list:['商品1111'，'商品222','商品3333']
     - }}}
     - </script>
     - <style lang="scss" scoped>
     - </style>
     

这里的遍历是固定的地址，我们可以改为索引值设为动态id
~~~java

• 
  
• 
  {{key}}–{{item}}
  
• 
  

~~~
3. 在main.js中引入路由（部分代码）：
~~~java
//引入路由
import Content from ‘./conponents/Content.vue’;
//配置路由,正常配置不需要传入什么值
const routes={
{path:’/pcontent’,component:Pcontent}
}
4. 在Pcontent.vue(商品详细页组件)中配置钩子函数监听并接收
~~~java
mounted(){
//获取get传值
console.log(this.$route.query);
}
~~~

5.4 适口

• 展示手机端的页面，在index.html中药要添加如下代码：[在

  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  

• CSS

  • 公共的css要放入assets/css/目录下
  • 在main.js中引入css： //注意：创建项目的时候必须用scss,不然引用不了（css文件以scss后缀）

    import './assets/css/basic.scss';
    

使用em或者rem能随着屏幕的放大变小相应的切换，它是一个相对的值，而px是一个绝对的值；在使用中最好是使用rem，同时要注意：
所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

• 屏幕适配大小的显示数据：

  #content{
  	padding:1rem;
  	line-height:2;
  	img{
  		max-width:100%;
  	}
  }
  

5.5 路由编程导航以及hash模式

• 编程式导航：

  • 前面使用路由的标签：类似标签来进行页面的跳转
  • 也可以使用编程式导航,它是用javascript来进行跳转：
    • 验证登录是否成功 【进行判断跳转到相应的页面】

• 跳转示例代码：

  //注意，官方文档写错了
  this.$router.push({path:'news'})		//跳转指定的组件,这个组件会被显示
  this.$router.push({path:'/content/495'});		//跳转到content并传入495
  //另一种跳转方式    [这里是命名路由跳转]
  // {path:'/news',component:News,name:'news'},
  // router.push({name:'news',params:{userId:123}})
  this.$router.push({name:'news'})
  

• History模式：

  • 操作：

    1. 在实例化VueRouter 中进行添加，代码如下：

       const router=new VueRouter({
       	mode: 'history',		//hash模式改为history模式
       	routes				// 缩写：相当于routes:routes
       })
       
       

  • 注意：

    • 改之前地址：localhost:8080/#/content
    • 改之后： localhost:8080/content

只是相当于把# 号去掉了，看起来更美观且也会更自由，两种都可以，使用hash模式而放弃history则是更好的选择，他减少了服务器压力，且配置较为简单

5.6 嵌套路由

• 概述：

  • 在实际的应用界面中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件；
  • 借助vue-router,使用嵌套路由配置，就可以很简单地表达这种关系；

• 操作：

  1. 配置路由
  2. 父路由里面配置配置子路由显示的地方：

     <router-view></router-view>
     

• 详细操作：

  • 首先得有一个父组件，父组件内要引入两个子组件。需要在main.js中进行引入；
  • 当点击父组件的时候，显示两个子组件，
    • 和

      //左边显示功能组件，右边显示内容
  • 这两个子组件应该以router-link进行跳转。当点击的时候，右边应该显示内容（右边显示可以使用标签）

    <router-link :to="'/XXX?id='+XXX"></router-link>
    

首先父组件的左边是功能按钮，它通过router-link进行跳转，而配置的子组件则通过标签显示在功能按钮的右边；当点击一个功能按钮的时候，则自动跳转到这个功能按钮所给予的地址；

• 部分代码：
  • main.js:

  //1. 创建组件：
  import User form './components/User.vue';
  	//下面的两个是它的子组件
  	import UserAdd from './components/User/UserAdd.vue';
  	import User from './components/User/UserAdd.vue';	
  	
  // 2. 配置路由   注意：名字
  const routes=[
  	{
  	path:'/user',
  	component:User,
  	children:[
  		//这里配置了父组件User的两个子组件
  		{path:'useradd',component:UserAdd},
  		{path:'userlist',component:Userlist},
  	]
  	}
  ]	
  

  • User.vue 左侧按钮，右侧显示子组件

  - <div id="user">
  - <div class="user">
  - <div class="left">
  - <ul>
  - <li>
  - <router-link to="/user/useradd">增加用户</router-link>
  - </li>
  - <li>
  - <router-link to="/user/userlist"> 用户列表</router-link>
  - </li>
  - </ul>
  - </div>
  - <div class="right">
  - <router-view></router-view>
  - </div>
  - </div>
  
  

所有的组件都是以.vue结尾，且分为三个部分：,

六. MintUi

6.1 基于Vue的ui框架

• 概述： 饿了么公司基于Vue开的Vue的ui组件库
  • Element Ui 基于vue pc端的UI框架
  • MintUi 基于Vue 移动端的ui框架

6.2 mintUI的使用

1. 找官网
2. 安装： npm install mint-ui -S //-S表示 --save
3. 引入：mint Ui 的css 和插件

   import Mint from 'mint-ui';
   Vue.use(Mint);
   import 'mint-ui/lib/style.css'
   

4. 直接使用

官方文档有些demo是运行不起来的，我们可以通过在github上下载mint-ui下载示例文件；
mint-ui-master/example/pages
如果是全局引入了，那么局部的列子上的引入可以不引入（如果没有引入，则例子上的引入需要引入）
引入公共的scss 注意： 创建项目的时候，必须使用scss，这样就可以直接使用
在mintUi组件上执行事件的写法： @click.native=“方法()”

6.3 下拉分页加载更多

• 在使用此下拉的时候，需要注意到下拉列表可能会多次请求的情况，如果下拉的很快，而请求是异步的，有可能会触发两次一样的请求，就会获取到重复的数据；
• 所以我们在请求的时候一定要利用好请求数据的开关，当请求数据的时候先关闭开关，等请求完成之后再开启开关，类似于上厕所，等一个人出来之后再把厕所的门打开；
• 判断最后一页是否有数据：
  • 在末尾也应该进行判断，如果数据小于每次请求的条数的时候，那就说明这是最后的一批数据了，后面就应该不再读取，把短路器设置关闭；如果大于则开启；

  - requestData(){
  - this.loading=true;		<!--请求数据的开关-->
  - var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
  - this.$http.get(api).then((response)=>{
  - this.list=this.list.concat(response.body.result);
  - ++this.page;		//每次请求完成page++
  - if(response.body.result.length<20){
  - this.loading=true;			//终止请求
  - }else{
  - this.loading=false;
  - }
  - },(err)=>{
  - console.log(err);
  - }) 
  - }
  

七. Element UI的使用

7.1 安装说明：

1. 找官网： http://element.eleme.io/#/zh-CN/component/quickstart
2. 安装： cnpm i element-ui -S //-S 表示 --save
3. 引入element UI 的css 和插件 [main.js]

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   

4. 看文档直接使用
5. 配置file_loader 在webpack.config.js中的相关目录下
   {
   test:/.(eot|svg|ttf|woff|woff2)(?\S*)?$/,
   loader:‘file-loader’
   }

7.2 按需引用

• 概述： 使用的单独引用和全局引用；熟练的话可以使用按需引用，达到减少体积的作用，一定上也会提高运行速度；
• 方法一：
  1. cnpm install babel-plugin-component -D
  2. 找到 .babelrc 配置文件

     把
     	{
     		"presets":[
     			["env",{"modules":false}],
     			"stage-3"
     		]
     	}
     
     改为
     	{
     		"presets":[["env",{"modules":false}]],
     		"plugins":[
     			[
     				"component",
     				{
     					"libraryName":"element-ui",
     					"styleLibraryName": "theme-chalk"
     				}
     			]
     		]
     	}
     

  3. 引入相应的组件： main.js

     import {Button,Select} from 'element-ui';
     Vue.use(Button)
     Vue.use(Select)
     

• 方法二：
  1. 引入main.js

     import {Button,Select} from 'element-ui';
     Vue.use(Button)
     Vue.use(Select)
     

  2. 引入对应的css：
     import 'element-ui/lib/theme-chalk/index.css';
  3. 如果报错,配置file_loader 在webpack.config.js中的相关目录下

     	{
     		test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
     		loader:'file-loader'
     	}
     

暴露： export
引入: import

八. VueX

8.1 概述：

• Vuex是一个专为Vue.js应用程序开发的状态管理模式；

  • 解决了组件之间同一状态的共享问题（解决不同组件的数据共享）
  • 组件里面数据的持久化

• 小项目中能不用Vuex就不用Vuex，它主要用于大项目中；

  • （使用Vuex能实现的，也可以通过：Localstrage和SessionStorage实现）

8.2 操作：

• 创建Vuex/store.js
• 步骤：
  1. 前期准备：
     1. src目录下新建一个vuex的文件夹
     2. vuex文件夹里面新建一个store.js
     3. 安装：
        cnpm install vuex --save
  2. 在store.js下： //定义数据和方法，方法是用来改变里面的数据，然后进行暴露

     - //引入vue
     - import Vue from 'vue'
     - import Vuex from 'vuex'
     - //1. state在vuex中用于存储数据
     - var state={
     - count:1
     - }
     - //2. mutations里面放的是方法，方法主要用于改变state里面的数据
     - var mutations={
     - incCount(){
     - ++state.count;
     - }
     - }
     - //vuex   实例化  Vuex.store
     - coust store=new Vuex.Store({
     - state,
     - mutations:mutations
     - })
     - // 将store暴露出去
     - export default store;
     

  3. 使用： 在需要使用的组件下面：
     1. 引入：
        import store from '../vuex/store.js';
     2. 注册：

        export default{
        	store,
        	methods:{
        	}
        }
        

     3. 使用：
        {{this.$store.state.count}} [显示值]
     4. 触发：
        this.$store.commit(‘incCount’);
        // 这里通过调用这个方法，执行数量增加的方法，然后上面的显示就可以直接显示了；

非兄弟组件，事件广播也无法进行数据的交互，必须使用这个进行交互
Vuex就相当于创建了一个公共的仓库，所有人可以对这个仓库里面的值进行赋值，这就完成了数据的共享操作；