珠峰2016，第9期 vue.js 笔记部份

在珠峰参加培训好年了，笔记原是记在本子上，现在也经不需要看了，搬家不想带上书和本了，所以把笔记整理下，存在博客中，也顺便复习一下

安装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>

View Code

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>

View Code

传统事件外理表单例子：

<!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>

View Code

计算属性外理表单例子：

<!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>

View Code

vue.js动画处理部份

事件处理部份

相关阅读:
TOP 100 SOFTWARE VENDORS (ZZ)
数列总结函数——取余分析
 科克曼女生问题
 约瑟夫问题(猴子选王)——多种解法
 乒乓球与羽毛球不同发球规则下选手的胜率——概率论+程序分析
 Codeblocks快捷键
 常用陌生快捷键
 Dev使用技巧
 vueDemo补充
 vueDemo
原文地址：https://www.cnblogs.com/fgxwan/p/9988651.html