珠峯2016，第9期 vue.js 筆記部份

時間 2019-12-11

原文原文鏈接

在珠峯參加培訓好年了，筆記原是記在本子上，如今也經不須要看了，搬家不想帶上書和本了，因此把筆記整理下，存在博客中，也順便複習一下css

安裝vue.js html

由於方便打包和環境依賴，因此建意npm init -y vue

第一個示例：node

<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:ios

promise是解決回調問題傳統的ajax方法回調太多代碼很差看例：ajax

解決問題一：npm

　　緩時二秒後給一個變量賦值 a = ‘zzz’,另外的函數打印：一般代碼以下json

let a = '';bootstrap

funcion buy(){axios

　　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動畫處理部份

事件處理部份

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。