发表于 | 分类于

2、进入项目根目录，安装
执行语句：cnpm install --save-dev node-sass

3、仍然是项目根目录，安装
执行语句： npm install --save-dev gulp-sass

发表于 | 分类于

服务01

  • $scope
    • $watch
    • $apply
  • $rootScope
  • $timeout
  • $interval
  • $filter

服务 $http

  • method
  • url
  • success
  • error

jsonp实例

1
2
3
4
5
6
7
8
9
10
11
$http({
		method:'JSONP',
		url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+val+'&json=1&p=3&sid=1449_21422_18240_17942_21099_18560_17001_21454_21409_21554_20928&req=2&csor=1&cb=JSON_CALLBACK'
		// url:'demo.js'
	}).
	success(function(data, status) {
    		$scope.data=data.s;
  		}).
  		error(function(data, status) {
  			console.log(data)
  });

$location

  • absUrl()
  • path(): //xx
  • replace():不产生历史管理
  • hash() // 03-demo.html#/#a
  • search() // 参数 search({key:val})
    • 03-demo.html#/?key=val
  • url()
  • host()
  • port()
  • protocol()

$anchorScroll 锚点跳转服务

需要配合 hash

缓存 $cacheFactory

var cache=$cacheFactory(‘myCache’)

  • info() //{id:xx,size:0}
  • put() // cache.put(‘name’,’hi’)
  • get()
  • remove()
  • 配置capacity // 缓存长度 $cacheFactory(‘idNanme’,{capacity:2})

$log 打印信息

  • log()
  • info()
  • warn()
  • error()

$interpolate

$q

发表于 | 分类于

版本1

main.js

1
2
import axios from 'axios'
Vue.prototype.$http = axios

其他地方使用的话 如同使用 vue-resource 一样

1
2
3
4
5
this.$http.get(URL).then(response => {
    // success callback
}, response => {
    // error callback
})

版本2 解决跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#创建一个axios实例

import Qs from 'qs'

var axios_instance = axios.create({
#config里面有这个transformRquest，这个选项会在发送参数前进行处理。
#这时候我们通过Qs.stringify转换为表单查询参数
    transformRequest: [function (data) {
        data = Qs.stringify(data);
        return data;
    }],
    withCredentials:true,
#设置Content-Type
    headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
Vue.use(VueAxios, axios_instance)

作者：痞子达
链接：https://www.jianshu.com/p/b22d03dfe006
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
import Qs from 'qs'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  transformRequest: [function(data) {
    data = Qs.stringify(data)
    return data
  }],
  withCredentials: process.env.WithCredentials // 开发环境下跨域为true，生产环境为false（默认）
  // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  // timeout: 15000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data
    // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
    if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.dispatch('FedLogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

发表于 | 分类于 
1
ng-class="{box-red:true}"

这样加了-会报错，在box-add 外面加个引号就可以了

1
ng-class="{'box-red':true}"

发表于 | 分类于

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

发表于 | 分类于

这里我们只需要安装两个东西

1
2
npm install -g node-gyp
npm install --global --production windows-build-tools

注意第二个需要admin权限，cmd命令需要run as admin。同时第二个的安装时间会比较久。

链接1
链接2

发表于 | 分类于

Sass 的嵌套分为三种：

  • 选择器嵌套
  • 属性嵌套
  • 伪类嵌套

1.选择器嵌套

1
2
3
4
5
6
7
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

1
2
3
4
5
6
7
nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中，就可以使用选择器的嵌套来实现：

1
2
3
4
5
6
7
8
9
nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

2.嵌套-属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：

1
2
3
4
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写：

1
2
3
4
5
6
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3.嵌套-伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧：

1
2
3
4
5
6
7
8
9
10
11
.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译出来的 CSS：

1
2
3
4
5
6
7
8
clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免选择器嵌套：

  • 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
  • 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

发表于 | 分类于

1. sync

从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
如下代码

1
<comp :foo.sync="bar"></comp>

会被扩展为：

1
<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

1
this.$emit('update:foo', newValue)

2. v-model

1
<input v-model="searchText">

等同于如下：

1
2
3
4
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>