<!-- dpr = 1--> <meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
<!-- dpr = 2--> <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"> 
<!-- dpr = 3--> <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">

export default {
    name: 'functional-button',
    functional: true,
    render(createElement, context) {
        return createElement('button', 'click me')
    }
}

<template>
    <FunctionalButton>
        click me
    </FunctionButton>
</template>

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

<input v-focus>

watch:{
    firstName:function(val){
        clearTimeout(this.firstTimeout);
        this.firstTimeout = setTimeout(()=>{
            this.fullName = val + '"" + this.lastName
        },500)
    }
}

只能用watch，无法使用computed

//main.js
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		INCREMENT(state){
			state.count++
		}
	},
	actions:{
		increment(commit){
		      setTimeout(() => {
		         commit('INCREMENT')
		    }, 1000)
		}
	},
	getters:{
		doubleCount(state){
			return state.count+2
		}
	}
})

//App.vue
<template>
	<div id="app">
		{{count}}
		<br />
		{{$store.getters.doubleCount}
		<button @click="$store.commit('INCREMENT')">count++</button>
		<button @click="$store.dispatch('increment')">count++</button>
	</div>
</template>

...
computed:{
	count(){
		return this.$store.state.count
	}
}
...

import Vue from 'vue'
const Store = function Store (options={}){
	const {state={},mutations={}} = options;
	this._vm = new Vue({          // 将state放在Vue的data下，就变成了响应式的数据
		data:{
			$$state: state
		}
	})
	this._mutations = mutations
}
Store.prototype.commit = function(type,payload){
	if(this._mutations[type]){
		this._mutations[type](this.state,payload)
	}
}
Object.defineProperties(Store.prototype,{      // 将state的get重写，每次get值的时其实是访问_vm实例下state 的值
	state:{
		get:function(){
			return this._vm._data.$$state
		}
	}
})

computed: mapState({
	products: state => state.products
})
// 等价于
computed: {
	products(){
		return this.$store.state.products
	}
}

methods:mapAction('cart',{
	'addProductToCart'
})
// 等价于
methods;{
	addProductToCart(product){
		this.$store.dispatch('cart/addProductToCart',product)
	}
}

var xhr = new XMLHttpRequest(); //获取xhr对象

//get请求
xhr.open("GET","test1.txt",true);
xhr.send();

var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari...
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
    try {
      xhr = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e) {}
  }
}
if (xhr) {
  xhr.onreadystatechange = onReadyStateChange;
  xhr.open('POST', '/api', true);
  // 设置 Content-Type 为 application/x-www-form-urlencoded
  // 以表单的形式传递数据
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('username=admin&password=root');
}


// onreadystatechange 方法
function onReadyStateChange() {
  // 该函数会被调用四次
  if (xhr.readyState === 4 &&xhr.status === 200) {
    console.log('执行成功');
  } else {
    console.log('执行出错');
  }
}

$.ajax({   //标准写法
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});
$.get(url,function(){}); //get请求
$.post(url,body,function(){}); //post请求
$.getJSON(url,function(){});  //get请求从服务器加载Json编码

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

//安装
npm install fetch-jsonp --save-dev

//使用
fetchJsonp(url, {
  timeout: 3000,
  jsonpCallback: 'callback'
}).then(function(response) {
  console.log(response.json());
}).catch(function(e) {
  console.log(e)
});

fetch(url,{
  credentials: 'include' //include表示cookie既可同域，也可跨域，‘same-origin’表示只可同域
});

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})

// get请求
axios.get(url)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// post请求
axios.post（‘/user’, {
    name: 'Jerry',
    lastName: 'Liang'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// ajax
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       $.ajax({
            url: '',
            data: '',
            success: function (data) {
                $.ajax({
                    // 如此一层嵌套一层
                })
            }
        }) 
    }
})

//axios
axios.get(url)
.then(res => {
    return axios.get(url,{
         {name:result.name}
    });
}).then(res => {
    //如此一层层嵌套
});

//ajax 通过计数器实现（虽然Jquery支持$.when的方式，但此处不做案例）
var num = 0;
function all(){
    num++;
    if(n>=3)console.log('三个请求全部完成')；
}
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       console.log("ajax请求1 完成");
       all();
    }
})
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       console.log("ajax请求2 完成");
       all();
    }
})
$.ajax({
    url: '',
    data: '',
    success: function (data) {
       console.log("ajax请求3 完成");
       all();
    }
})

//axios
function getInfo() {
  return axios.get(url);
}
function getUser() {
  return axios.get(url);
}
axios.all([getInfo(), getUser()])
  .then(axios.spread(function (info, user) {
    // 两个请求现在都执行完成
  }));