阅读项目代码笔记

1、import ，export，export default的区别

import：

• import用于在一个模块中加载另一个含有export接口的模块。

export：

• export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。

export default：

• 与export有相同的目的。

export和export default的异同：

• export与export default均可用于导出常量、函数、文件、模块等，并通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入
• 在一个文件或模块中，export、import可以有多个，export default仅有一个
• 通过export方式导出，在导入时要加{ }，export default则不需要

例子：

var name="李四";
export {
    
     name }
//import { name } from "/.a.js" 

//可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

2、vue实例的data属性

第一种写法，vue实例中的data属性是对象：

<script type="text/javascript">
    var app=new Vue({
    
    
        el:'#app',
        data:{
    
    
            isLogin: false
        }
    })
</script>

第二种写法，函数：

<script type="text/javascript">
    var app=new Vue({
    
    
        el:'#app',
        data: function(){
    
    
            return {
    
    
                isLogin: false
            }
        }
    })
</script>

第三种写法，组件中的data属性只能是一个函数方法，并返回一个对象：

<script type="text/javascript">
    var app=new Vue({
    
    
        el:'#app',
        data() {
    
    
            return {
    
    
                isLogin: false
            }
        }
    })
</script>

• 不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

3、Vue-router 的hash模式和history模式

hash：

• 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。（vue的路由默认是hash模式）

history：

• 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
• 在router文件夹下的index.js中加入mode: 'history',即可。

一般场景下，hash 和 history 都可以，除非更在意颜值，可以选择使用history。

4、vue中qs库的使用

// 下载：
    npm i qs 

// 引入：
    import qs from 'qs'

两个方法：

• 将url中的参数转为对象
• 将对象转为url参数形式（对象序列化，用&连接）

import qs from 'qs';
const url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
// 转为对象
console.log(qs.parse(url));

const a = {
    
    name:'hehe',age:10};
// 转为url参数形式
console.log(qs.stringify(a))

5、使用 default-passive-events 解决滚动背景的问题

安装：

npm i default-passive-events -S

main.js中加入：

import 'default-passive-events'

6、VueX（Vue状态管理模式)

安装：

npm i vuex

使用：

• 在根目录下创建store文件夹，里面创建index.js，并初始化

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex) 

//创建VueX对象
const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0 //存放的键值对就是所要管理的状态
  },
  mutations: {
    
    
    increment (state) {
    
    
      state.count++
    }
  }
})

将store挂载到当前项目的Vue实例中：（略有问题！！！！！！！！！！！！！！）

import store from './store'  // 跟简迩项目中写法略有不同，看是否是因为store/index.js的原因，还有export default导出的原因

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

之后在组件中就可以使用this.$store.state.count来访问数据了。

核心概念：

• state：存放状态
• mutations：成员操作
• getters：加工state成员给外界
• actions：异步操作
• modules：模块化状态管理

参考博客：官方文档、VueX

7、vue-resource的使用

安装：

npm i vue-resource

vue-resource所实现的功能和$.ajax相似。

参考博客：vue-resource全攻略

8、vue本地跨域问题

• 打开项目所在的config文件下的index.js文件
  

• 设置 proxyTable模块

  • target：需要跨域的域名；
  • changeOrigin：设置成true（即：允许跨域）；
  • pathRewrite：设置新的路径，这个其实没有必要重新设置；
  • host：设置成localhost；
  • port：设置成自己本地项目的端口号，如8081；
    

• 在main.js中添加：Vue.prototype.HOST = '/api' //设置全局的请求域名，就可以使用全局变量this.HOST了

  • 例如172.0.0.1，然后我们在调用接口的时候，就可以全局使用/api，这时候/api的作用就相当于172.0.0.1，比如接口的地址是172.0.0.1/user/info，我们就可以使用/api/user/info

9、axios封装（拦截器）

• http.js ：axios 配置，拦截器、统一 url
• finalApi.js：api 方法（get、post之类的），里面调用后端提供的接口，供接口方法调用
• 未知：接口方法，里面调用 api 方法，供页面级调用
• utils/axios.js文件的用途？？

参考博客：axios（封装使用、拦截特定请求、判断所有请求加载完毕）

10、组件构造器

组件 Vue.component()

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
    
    
  data: function () {
    
    
    return {
    
    
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {
    
    { count }} times.</button>'
})

//注册组件
new Vue({
    
     el: '#components-demo' })

<div id="components-demo">
  <button-counter></button-counter>
</div>

组件构造器 Vue.extend()

Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例，所以直接使用无法生效，组件构造器相当于Vue.component()方法的第二个参数部分

使用组件构造器的方法：

• 注册

// 创建构造器
var au = Vue.extend({
    
    
  template: "<p><a :href='url'>{
    
    { author }}</a></p>",
  data : function() {
    
    
    return {
    
    
      author : 'Li',
      url : 'http://www.baidu.com'
    }
  }
});

// 创建组件
Vue.component('au',au);

// 注册
new Vue({
    
    
  el:"#author"
})

<div id="author"></div>

• 挂载

// 创建构造器
var au = Vue.extend({
    
    
  template: "<p><a :href='url'>{
    
    { author }}</a></p>",
  data : function() {
    
    
    return {
    
    
      author : 'Li',
      url : 'http://www.baidu.com'
    }
  }
});
// 创建au实例并挂载到一个元素上
new au().$mount('#author');

<div id="author"></div>