在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下
安装vue.js
因为方便打包和环境依赖,所以建意npm init -y
第一个示例:
{{msg==='hello'?1:0}}
Document
_
数据响应式变化:给对象加属性的三个方法。自动监听,调用自己的get set 方法
_
let vm = new Vue({
el :'#app',
data:{
a:{school:2} // 1,声明时写
}
});
vm.$set(vm.a,'school',8) // 2.写在这儿
对于要设很多属性的话,可以替换原对象,
vm.a = {school:'zfpx',age:8,address:'xxx'} //3 重写方法
对于数组响应的话,数组元素改变监听不到,常规方法比如
vm.arr\[0\] = 100
vm.arr.length = -=2
这些变化响化不到数据,只能用变异方法,比如:pop push shift unshift sort reserve splice 能改变数组的方法才行
vm.arr.reverse();
vm.arr = vm.arr.map(item = >item\*=3);
简易的todo 例子:
双向绑定实现表单和列表交互,,这儿不作过多解释,把代码复制一下就能看到效果,在一参看,很简单
Document
第一个AXIOS例子,因为回调函数的this 指向winows 所以用简头函数强制指向主体。
需要说明的二点,1,手工写的json 文件,需要用JSON.stringify() 方法调一下格式,2 忘了,等会补上,为了 节省篇章,代码收缩一下,
Document
axios 的原理是利用promise-ajax:
promise是解决回调问题 传统的ajax方法回调太多代码不好看 例:
解决问题 一:
缓时二秒后给一个变量赋值 a = ‘zzz’,另外的函数打印:通常代码如下
let a = '';
funcion buy(){
setTimeout()=>{
let a = "zzzz";
},2000};
buy();
function cookie(){
//如何在这儿打印 a 的值 ,,技穷了吧!
}
cookie();
!解决这些问题js 只能用回调,,以下方法解决
let a = '';
function buy(callback){
setTimeout(()=>{
a = 'yss';
callback(a);
},2000);
}
buy(function cookie(val){
console.log(val);
})
以上方法代码不够直观,所以我们开始用要讲的promise 解决这个回调问题。。promise js 自带的,new promise 就能用
promise 的三个状态 成功,失败,等待
//resolve 成功态
//reject 失败态
let p = new Promise((resolve,reject)=>{
let a = ‘魔茹’;
# resolve(a); 成功和失败可以自定义,成功也可以调用reject方法
reject(a)
},2000)
#p.then((data)=>{console.log(data)},()=>{});
#换个调取方法
p.then((data)=>{console.log(data)},(err)=>{console.log('err')});
女朋友买包实例:
Document
浏览器调试运行查看结果
promise-ajax 手工封装ajax示列:
Document
传统事件外理表单例子:
Document
计算属性外理表单例子:
Document
vue.js动画处理部份
事件处理部份