在珠峰参加培训好年了，笔记原是记在本子上，现在也经不需要看了，搬家不想带上书和本了，所以把笔记整理下，存在博客中，也顺便复习一下
安装vue.js
因为方便打包和环境依赖，所以建意npm init -y
第一个示例：
<script src ="./node_modules/vue/dist/vue.js" ></script>
<div id="app">
{{msg==='hello'?1:0}}
</div>
</head>
<body>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
});
双向绑定及原理：又向绑定只需要在一个可以输入的控件中加入v-model = ""，如
<input type = "text v-model = "msg">
__________________________________________
let vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
});
<!--Object.defineProperty--!>
老版本给对象属性定义方法是 var obj.a = "name" 而新版本的defineProperty 则可以在别人获取和得到属性时，触发事件，还有很多配置选项，这是老版本做不到的
新版本定义方法：
Object.defineProperry(obj.'nmae',{
configurable:True, // 是否能删除
writeble.true|false , //是否能写操作
enumerable:false, 是否能枚举
// defingProperty,上有二个重要的方法,get(),set() 在设置和 得到属性自动触发
get(){
*******************
}
set(){
**********************
}
value:1
age:2
})
_________________________________________________________________________________
比如在
get(){
return 1
}
那么在获取对象性时总是会返回1，在赋值时有一个坑，就是set(var){
obj.name = "xxx"
}
在赋值时又调用赋值，形成无限循环 ，通常不能在里面给自己赋值，用第三方变解决。。返回和设置时都操作第三方变量，
从而解决自己调用自己的无限循环。。
let obj = {}
let temp = {}
object.defineProperty(obj,"name",{get(){
get(){
return temp["name"]
}
set(val){
temp["name"]=val;
})
给绑定一个输入框的例子：仅是原理，工作中用不到
..........................................................
<input type="text" id="input"></input>
.........................................................
let obj = {},
let temp = {},
Object.defineProperty(obj,'name',{
get(){
return temp['name']
}
set(val){ // 给obj 赋值时触发
temp["name" = val]
input.value = obj.name
}
});
input.value = obj.name; //页面加载时，用调用get 方法
input.addEventListener('input',function(){
obj.name = this.value;
})
基础指令。。。。。。。。。。。。。。。。。。。。。。
v-text == {{}} //v-text 界面不闪烁
v-html == <p>xxxx</p>
v-model == "" 双向绑定
v-once 只绑一次
v-for
————————————————————————————————————————————————————————————————————————————
<div id = "app">
<ul>
<li v-for = "f in fruits">{{f.name}}</li>
//如果要得到index，循环时取二个值，要回括号
//<li v-for = "(f,index) in fruits"{{f.name}} {{index+1}}></li>
</ul>
</div>
<script scr = "......./vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
fruits:[{name:'xxx'},{name:'yyy'},{name:'ggg'}]
}
})
</script
————————————————————————————————————————————————————————————————————————————
基础todo功能 表单回车后下列菜单自动增加
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-model="val" @keyup = "add">
<ul>
<li v-for = "(a,index) in arr">{{a}}<button@click = "remove（index）">删除</button></li>
</ul>
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script>
let vm;
vm = new Vue({
el: '#app',
methods: {
add(e){
if(e.keyCode === 13)this.arr.unshift(this.val);this.val = '';
}
},
data: {
arr: [],
val: '',
}
});
</script>
</html>
数据响应式变化：给对象加属性的三个方法。自动监听，调用自己的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 例子：
双向绑定实现表单和列表交互，，这儿不作过多解释，把代码复制一下就能看到效果，在一参看，很简单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-model="val" @keyup.crtl.enter = "add">
<ul>
<li v-for = "(a,index) in arr">{{a}} <button @click = "remove(index)">删除</button></li>
</ul>
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script>
let vm;
vm = new Vue({
el: '#app',
methods: {
add(e){
this.arr.unshift(this.val);
this.val = "";
},
remove(i){this.arr = this.arr.filter((item,index)=>index!==i)}
},
data: {
arr: [],
val: '',
}
});
</script>
</html>
第一个AXIOS例子，因为回调函数的this 指向winows 所以用简头函数强制指向主体。
需要说明的二点，1，手工写的json 文件，需要用JSON.stringify() 方法调一下格式，2 忘了，等会补上，为了 节省篇章，代码收缩一下，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script src = "./node_modules/axios/dist/axios.js"></script>
<script>
let vm;
vm = new Vue({
el: '#app',
created(){
axios.get('./lz.json').then(res=>{
this.products = res.data;
},err=>{
console.log(err);
});
},
data: {
products:[]
}
});
</script>
</html>
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')});
女朋友买包实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
</div>
</body>
<!--<script src ="./node_modules/vue/dist/vue.js" ></script>-->
<!--<script src = "./node_modules/axios/dist/axios.js"></script>-->
<script>
function buyPack() {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(Math.random()>0.5){
resolve('买')
}else{
reject('不买')
}
},Math.random()*10000)
});
}
buyPack().then(function(data){
console.log(data);
},function(data){
console.log(data);
});
</script>
</html>
promise-ajax 手工封装ajax示列：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "app">
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script src = "./node_modules/axios/dist/axios.js"></script>
<script>
function ajax({url = "",type='get',dataType = "json"}) {
return new Promise((resolve,reject)=>{
let xhr = new XMLHttpRequest();
xhr.open(type,url,true);
xhr.responseType =dataType;
xhr.onload = function(){
resolve(xhr.response)
console.log("........................")
};
xhr.onerror = function (err) {
reject(err)
};
xhr.send();
});
}
let vm = new Vue({
el:'#app',
created(){
ajax({url:'./lz.json'}).then((res)=>{
console.log(res)
},(err)=>{
})
},
data:{
products:[]
}
})
</script>
</html>
传统事件外理表单例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <title>Document</title> </head> <body> <div id = "app"> <div class="container"> <div class="row"> <table class="table table-hover table-bordered"> <caption class = "h2 text-warning text-center">珠峰购物车</caption> <tr> <th>全选<input type="checkbox"></th> <td>商品</td> <td>单价</td> <td>数量</td> <td>小记</td> <td>操作</td> </tr> <tr v-for ="(product,index) in products"> <td><input type="checkbox" v-model="product.isSelected" @change="checkOne"></td> <td><img :src = "product.productCover" :title="product.productCover"> {{product.productName}}</td> <td>{{product.productPrice}}</td> <td><input type="number" v-model.number = "product.productCount"></td> <td>{{product.productCount*product.productPrice | toFixed(2)}}</td> <td><button class="btn btn-danger" @click = "remove(product)">删除</button></td> </tr> <tr> <td colspan="6"> 总价格 : {{sum()| toFixed}} </td> </tr> </table> </div> </div> </div> </body> <script src ="./node_modules/vue/dist/vue.js" ></script> <script src = "./node_modules/axios/dist/axios.js"></script> <script> let vm = new Vue({ el:'#app', filters:{ toFixed(input,param1){ return '$'+input.toFixed(param1) } }, created() { this.getData(); }, methods:{ sum(){ return this.products.reduce((prev,next)=>{ if(!next.isSelected)return prev; return prev+next.productPrice*next.productCount; },0) }, checkOne(){ this.checkAll = this.products.every(item=>item.isSelected); }, change(){ this.products.forEach(item=>item.isSelected = this.checkAll); }, remove(p){ this.products = this.products.filter(item=>item !==p) }, getData(){ axios.get('./lz.json').then(res=>{ this.products = res.data; this.checkOne(); },err=>{ console.log(err); }); } }, data:{ products:[], checkAll:false, } }) </script> </html>
计算属性外理表单例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id = "app">
<div class="container">
<div class="row">
<table class="table table-hover table-bordered">
<caption class = "h2 text-warning text-center">珠峰购物车</caption>
<tr>
<th>全选<input type="checkbox" v-model="checkAll"></th>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小记</td>
<td>操作</td>
</tr>
<tr v-for ="(product,index) in products">
<td><input type="checkbox" v-model="product.isSelected"></td>
<td><img :src = "product.productCover" :title="product.productCover"> {{product.productName}}</td>
<td>{{product.productPrice}}</td>
<td><input type="number" v-model.number = "product.productCount"></td>
<td>{{product.productCount*product.productPrice | toFixed(2)}}</td>
<td><button class="btn btn-danger" @click = "remove(product)">删除</button></td>
</tr>
<tr>
<td colspan="6">
总价格 : {{sum|toFixed(2)}}
</td> </tr>
</table>
</div>
</div>
</div>
</body>
<script src ="./node_modules/vue/dist/vue.js" ></script>
<script src = "./node_modules/axios/dist/axios.js"></script>
<script>
let vm = new Vue({
el:'#app',
filters:{
toFixed(input,param1){
return '$'+input.toFixed(param1)
}
},
created() {
this.getData();
},
computed:{
checkAll:{
get(){
return this.products.every(p=>p.isSelected);
},
set(val){
this.products.forEach(p=>p.isSelected = val);
}
},
sum:{
get(){
return this.products.reduce((prev,next)=>{
if(!next.isSelected)return prev;
return prev+next.productPrice*next.productCount;
},0);
}
}
},
methods:{
remove(p){
console.log('toFixed(2)toFixed(2)'),
this.products = this.products.filter(item=>item !==p)
},
getData(){
axios.get('./lz.json').then(res=>{
this.products = res.data;
},err=>{
console.log(err);
});
}
},
data:{
products:[],
}
})
</script>
</html>
vue.js动画处理部份
事件处理部份