vue实例

//自定义按键修饰符别名-只有在输入框中按下F5，才会触发prompt()方法
<input @keydown.a="prompt">
//Vue.directive 全局指令-input框，自动获取，元素焦点；
<input type="text" v-focus>
//计算属性- reverse 先在data中去找，找不到再去computed中找；
<div>{{reverse}}</div> 
//过滤器 格式化日期
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>

<script type="text/javascript" src="img/vue.js"></script>
<script type="text/javascript">

Vue.config.keyCodes.a = 116;
Vue.directive('focus', {
  	inserted: function (el) {    		
    	el.focus(); //获取元素的焦点
 	}
})
Vue.filter(‘过滤器名称’, function(val){
	return 过滤器业务逻辑，val:过滤器加到哪里，就得到哪里的数据；     
})
Vue.component(组件名称, {
   data:function(){ 
       return{ 
   		cont：0 
       }
   }
   template:`模板字符串 反引号 ES6语法` 
})
var ComponentA = {
   data:function(){},  
   template: '<div>A {{msg}}</div>'
};
var vm = new Vue({
    el: '#app',
    data: {

    },
    directives: { //自定义局部指令
       focus: {
      	 inserted: function(el) {
        	el.focus();
      	 }
   	  }
	},
	filters:{ //局部注册 filters；
		format: function(val,arg){
			//format过滤器名字
		} 
	},
    methods: {
        handle: function() {
        
        }
    },
    computed: {
   	   reverse: function(){ 
      	 return //计算属性，基于data中的数据，进行缓存      
   	  }
	},
	watch: { //侦听器
       firstName: function(val) {
          监听的名字，和 data中的数据保持一致；
          当值改变时，会自动触发 watch；val监听到的，最新值；
       }
	},
	components: {
      'component-a': ComponentA,
      '组件名称'：组件内容
    }
});
</script>

2. Promise

接口调用方式: 原生ajax；基于 jQuery 的ajax；fetch；axios；

var p = new Promise(function(resolve, reject){
   // 这里用于实现异步任务；resolve reject这两个参数，都是方法，可以调用； 
   setTimeout(function(){
        var flag = false;
        if(flag) { 
          resolve('hello'); // 成功时调用 resolve()
        }else{
          reject('出错了'); // 失败时调用 reject()
        }
   }, 100);
});    
//用then方法指定 resolved状态和 reject状态的回调函数   
p.then(function(data){
  //从resolve得到，成功时的处理结果
},function(info){
  //从reject得到，失败时的处理结果
});

接口调用-fetch API
Fetch 基于Promise实现；fetch 就是 ajax + Promise；默认是get请求，返回一个 Promise实例对象；

fetch('http://localhost:3000/fdata').then(function(data){
 //text()属于fetchAPI的一部分，它返回一个Promise实例对象，
 //return把它返回，通过下一个 then得到具体的数据
  return data.text(); //二进制
}).then(function(data){
  console.log(data); //这里得到的，才是最终数据
}).catch(function(info){
  console.log(info);
})

接口调用-axios

axios.get('http://localhost:3000/adata')
   .then(function(ret){   
      console.log(ret.data) //.data是固定写法，属于axios API的一部分，用于获取后台数据；
      console.log(ret) //返回的是一个对象，data是其中的 一个属性；
})

接口调用-async/await

async function queryData() {
   var ret = await axios.get('http:localhost:3000/adata');
   console.log(ret.data) //hello axios
} 
queryData()