VUE快速入門與實踐（上）

阿新 • • 發佈：2018-12-11

簡介

vue官網 vue.js是一套構建使用者介面的漸進式框架。 vue全家桶：vue.js+vue-router+vuex+axios

特點

核心只關注檢視層（view)
易學，輕量，靈活的特點
適用於移動端專案
漸進式框架

漸進式的理解

宣告式渲染（無需關係如何實現）
組建系統
客戶端路由（vue-router)
大規模狀態管理（vuex)
構建工具（vue-cli)

核心

響應的資料變化。當資料發生改變->試圖的自動更新
組合的檢視元件。ui頁面對映為組建樹，劃分組建可維護、可複用、可測試

安裝vue

安裝vue npm install vue
安裝bootstrap npm install bootstrap
安裝 axiosnpm install axios
初始化npm npm init -y,初始化生成一個新的 package.json 檔案，如果使用了 -f（代表force）、-y（代表yes），則跳過提問階段，直接生成一個新的 package.json 檔案。

指令

v-model：用於表單中的input ，textarea中，會忽略value，checked，selected，將資料繫結在試圖上，檢視修改後會影響資料的變化。同angularJS中的ng-model
v-text：雙向繫結資料，同{{}}。<div v-text="msg"></div>
v-cloak

：解決{{}}閃爍問題(作用於塊區域)，要賦予樣式才起作用，[v-cloak]{display:none;}
v-once：一次繫結資料。<div v-once>{{msg}}</div>
v-html：繫結html，一定是安全資料。<div v-html="msg"></div>
v-for：迴圈陣列，同angularJS中的指令ng-repeat 例： o in arr 或 (o,index) in arr a in obj 或 (value,key,index) in obj
v-bind：動態繫結屬性。v-bind:src="" 或 :src=""
v-if：同angularJS ng-if，if操作的是dom
v-show：同angularJS ng-show，show操作的是樣式。如果頻繁的切換dom使用v-show,如果一開始就確定下來使用v-if更好，如果if不通過內部指令不會再執行。只用dom從顯示到隱藏或隱藏到顯示菜使用vue動畫
繫結事件 v-on:click="fn" 或 @click="fn"

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<div id="app">
    <!-- 如果不傳遞引數，則不要寫括號會自動傳入事件源，如果寫括號要手動傳入$event -->
    <div v-on:mousedown="fn()">點我</div><br>
    <!-- 事件繫結可以用@代替-->
    <div @mousedown="fn2(2)">點我</div>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    let vm=new Vue({//根例項
        el:'#app',
        methods:{//methods和data中的資料會全部放到vm上，而且名字不能衝突，衝突會報錯，methods中的this指向的都是例項，不能使用箭頭函式
            fn(){alert(this.a)},
            fn2(i){alert(i)}
        },
        data:{
            a:[1,2,3,4,5],
        }
    });
</script>
</body>
</html>

資料響應的變化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>資料響應的變化（物件）</title>
</head>
<body>
<div id="app">
    {{msg}}{{a.school}}
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    //引入vue後會給一個Vue的建構函式
    //vue會迴圈data中的資料（資料劫持），依次的增加getter和setter
    let vm=new Vue({//vm===viewModel
        el:'#app',//vue控制的div
        data:{//data的中的資料會被vue代理
            msg:'hello world!',//可以通過vm.msg取得相對應的資料
            a:{school:''}//1.使用變數時先進行初始化，否則新新增的屬性不會導致頁面重新整理（推薦）
        }
    });
    //2.如果沒有初始化資料，可以通過$set方法來給物件新增響應式資料
    vm.$set(vm.a,'school',1);
    //3.通過替換原物件初始化資料
    vm.a={school:''};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>資料響應的變化（陣列）</title>
</head>
<body>
<div id="app">
    {{arr}}
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            arr:[1,2,3,4,5],
        }
    });
    //去改變陣列中的某一項時監控不到的，也不能使用改變陣列長度的方法
    //錯誤：vm.arr[0]=100;vm.arr.length=2;
    //可以使用變異方法：pop push shift unshift sort reserve splice
    vm.arr=vm.arr.map(item=>item*3);//filter map
</script>
</body>
</html>

checkbox,select,radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox,select,radio</title>
</head>
<body>
<div id="app">
    <div>
        <input type="checkbox" v-model="hobby" value="0">游泳
        <input type="checkbox" v-model="hobby" value="1">跑步
        <input type="checkbox" v-model="hobby" value="2">射箭<br>
        愛好：{{hobby}}
    </div><br>
    <div>
        <select v-model="address">
            <option value="" disabled>請選擇</option>
            <option value="1">上海</option>
            <option value="2">北京</option>
            <option value="3">天津</option>
        </select><br>
        地址：{{address}}
    </div><br>
    <div>
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
        性別：{{sex}}
    </div>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            hobby:[],
            address:'',
            sex:''
        }
    });
</script>
</body>
</html>

Promise

//回撥函式：將後續的處理邏輯傳入到當前要做的事，事情做好後呼叫此函式
function buy(callback) {
    setTimeout(()=>{
        let a='蘑菇';
        callback(a);
    },2000);
}
buy(function (val) {
    console.log(val);
});
//可用promise處理回撥問題，共三個狀態：成功、失敗、等待
//resolve對應data,reject對應err,resolve和reject均是函式
//promise的例項就是一個then方法，then方法中有兩個引數
var p=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let a='青椒';
        resolve(a);
    },2000);
});
p.then((data)=>{
    console.log(data);
},(err)=>{

});
//promise示例
function buyPack() {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(Math.random()>0.5){
                resolve('買');
            }else {
                reject('不買');
            }
        },Math.random()*1000);
    });
}
buyPack().then((data)=>{
    console.log(data);
},(data)=>{
    console.log(data);
});

Promise-ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise-ajax</title>
</head>
<body>
<div id="app">

</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 基於promise -->
<script src="assets/js/promise-ajax.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        created(){
            ajax({url:'carts.json'}).then((data)=>{
                console.log(data);
            })
        },
        data:{
            products:[]
        }
    });
    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 () {//shr.readyState=4  shr.status=200
	            if(xhr.status==200){
	                resolve(xhr.response);//成功呼叫成功的方法
	            }else{
	                reject('not found');//失敗呼叫失敗的方法
	            }
	
	        };
	        xhr.onerror=function (err) {
	            reject(err);//失敗呼叫失敗的方法
	        };
	        xhr.send();
	    });
	}
</script>
</body>
</html>

carts.json檔案

[
  {
    "isSelected":true,
    "name":"由淺入深學習vue",
    "img":"https://img10.360buyimg.com/cms/s80x80_jfs/t18310/260/2349409676/18067/46f30b6f/5aeffa25Nc7c83599.jpg",
    "info":"小米(MI） 米家自動傘 男女通用晴雨兩用 一鍵自動開合 黑色",
    "price":99,
    "count":3
  },
  {
    "isSelected":true,
    "name":"由淺入深學習vue",
    "img":"https://img10.360buyimg.com/cms/s80x80_jfs/t18310/260/2349409676/18067/46f30b6f/5aeffa25Nc7c83599.jpg",
    "info":"小米(MI） 米家自動傘 男女通用晴雨兩用 一鍵自動開合 黑色",
    "price":99,
    "count":3
  }
]

axios

更多關於axios，點選這裡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
</head>
<body>
<div id="app">
<input type="number" v-model.number="num">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 基於promise -->
<script src="node_modules/axios/dist/axios.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        //專門用來發送Ajax的方法
        created(){//再資料被初始化後會呼叫（鉤子函式），this指向是vm例項
            let that=this;
            axios.get('carts.json').then(function (res) {
                that.products=res.data;
            },function (err) {
                console.log(err);
            });
            //也可以用箭頭函式
            axios.get('carts.json').then(res=> {
                this.products=res;
            },err=> {
                console.log(err);
            })
        },
        data:{
            products:[],
            num:0
        }
    });
</script>
</body>
</html>

filter,created,computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="container">
        <table class="table table-bordered table-hover">
            <tr>
                <th>全選<input type="checkbox" v-model="selectAll"></th>
                <th>商品</th>
                <th>描述</th>
                <th>單價</th>
                <th>數量</th>
                <th>總價</th>
                <th>操作</th>
            </tr>
            <tr v-for="(product,index) in products">
                <td><input type="checkbox" v-model="product.isSelected"></td>
                <td><img :src="product.img">{{product.name}}</td>
                <td>{{product.info}}</td>
                <td>{{product.price}}</td>
                <td><input type="number" v-model.number="product.count" min="1"></td>
                <td>{{product.price*product.count|toFixed(2)}}</td>
                <td><input type="button" class="btn btn-danger" value="刪除" @click="remove(product)"></td>
            </tr>
            <tr>
                <td>總價</td>
                <td>{{sum}}</td>
            </tr>
        </table>
    </div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 基於promise -->
<script src="node_modules/axios/dist/axios.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        computed:{//用來計算
            selectAll:{//放棄賦予複選框change方法後，可以通過“計算屬性”實現全選與單選
                //當products值變化時會重新計算
                get(){//get和set中的this指向例項，預設v-model會獲取selectAll的值，多以呼叫get方法
                    return this.products.every(p=>p.isSelected);
                },set(val){//當給checkbox賦值時
                    this.products.forEach(p=>p.isSelected=val);
                }
            },
            sum(){//如果計算屬性寫成函式，預設呼叫get方法，等價於下面的sum屬性
                return this.products.reduce((pre,next)=>{
                    if(!next.isSelected) return pre;
                    return pre+next.price*next.count;
                },0)
            },
            // sum:{//總價,sum結果會被快取，如果依賴的資料沒有變化就不會重新執行
            //     get(){
            //         return this.products.reduce((pre,next)=>{
            //             if(!next.isSelected) return pre;
            //             return pre+next.price*next.count;
            //         },0)
            //     }
            // }
        },
        filters:{//過濾器
            toFixed(n,s){//這裡的this指的是window
                return '￥'+n.toFixed(s);
            }
        },
        created(){//在資料被初始化後會呼叫（鉤子函式），this指向是vm例項
            this.getData();
        },
        methods:{
            // checkOne(){//單選
            //     this.selectAll=this.products.every(item=>item.isSelected);
            // },
            // checkAll(){//全選/反選
            //     this.products.forEach(item=>item.isSelected=this.selectAll);
            // },
            // sum(){//總價,資料只要有變化就會呼叫此方法，不會快取上一次的結果，computed會解決這個問題
            //     return this.products.reduce((pre,next)=>{
            //         return pre+next.price*next.count;
            //     },0)
            // },
            remove(p){//刪除
                this.products=this.products.filter(item=>item!=p);
            },
            getData(){
                axios.get('carts.json').then(res=> {
                    this.products=res.data;
                    // this.checkAll();
                },err=> {
                    console.log(err);
                })
            }
        },
        data:{
            products:[]
            // selectAll:false
        }
    });
</script>
</body>
</html>

全域性filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全域性filter</title>
</head>
<body>
<div id="app1">{{info|select}}</div>
<div id="app2">{{info|select}}</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    Vue.filter('select',(data)=>data+'小紅');//全域性filter
    new Vue({
        el:'#app1',
        // filters:{
        //     choose(data){
        //         return data+'小紅';
        //     }
        // },
        data:{
            info:'hello'
        }
    });
    new Vue({
        el:'#app2',
        data:{
            info:'hello'
        }
    });
</script>
</body>
</html>

vue動畫

v-if：操作dom，可以和v-else-if,v-else連寫
v-show：操作的是樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue動畫</title>
    <link type="text/css" rel="stylesheet" href="node_modules/animate.css/animate.css">
    <style>
        .one-enter{opacity: 1;}
        .one-leave-active{opacity: 0;transition: 1s linear}
        /*如果只有一個動畫可這樣寫*/
        /*.v-enter{opacity: 1;}*/
        /*.v-leave-active{opacity: 0;transition: 1s linear}*/
    </style>
</head>
<body>
<div id="app">
    <input type="button" @click="flag=!flag" value="切換">
    <transition name="one"><!-- 當存在多個動畫時，可設定name區分 -->
        <div style="width: 100px;height: 100px;background: red;" v-show="flag"></div>
    </transition>
    <input type="text" v-model="query">
    <transition-group name="two" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
        <div v-for="(a,index) in newArr" :key="Math.random()">{{a}}</div>
    </transition-group>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        computed:{
            newArr(){
                return this.arr.filter(item=>item==this.query);
            }
        },
        data:{
            query:'',
            arr:[1,2,3,4,5],
            flag:true
        }
    });
</script>
</body>
</html>

v-if 和v-else 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if,else</title>
</head>
<body>
<div id="app">
<div v-if="flag">紅色</div>
<div v-else>藍色</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            flag:false
        }
    });
</script>
</body>
</html>

修飾符

可進入官網檢視修飾符內容

表單輸入繫結修飾符

.lazy：在預設情況下，v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步 (除了上述輸入法組合文字時)。你可以新增 lazy 修飾符，從而轉變為使用 change事件進行同步：
.number：限制輸入框只能填寫數字。<input type="number" v-model.number="num">
.trim：自動過濾使用者輸入的首尾空白字元。<input v-model.trim="msg">

事件修飾符

.stop：阻止繼續冒泡，向上傳播。阻止事件傳播。同e.stopPropagation 和cancelBubble=true 效果相同
.capture：停止捕獲，向下傳播。阻止事件傳播。類似：xxx.addEventListener('clicl',fn,true)
.prevent：阻止預設行為。如a標籤的跳轉。類似：e.preventDefault 和returnValue=false
.once：只觸發一次
.self：只有觸發自身事件源才會呼叫。類似：e.srcElement&&e.target

<!-- 新增事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

computed

computed 計算屬性，它不是方法。
方法不會快取，computed 會根據依賴的屬性進行快取（歸vue管理的資料，可以響應式變化的）。
由get和set 兩部分組成（不能只寫set，可以只寫get）。一般情況下，通過js賦值影響其他元素或者表單元素設定值的時候會呼叫set方法。
computed預設呼叫get方法，必須要有return，而且不支援非同步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="a">{{msg}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        computed:{//computed預設呼叫get方法，必須要有return，而且不支援非同步
            msg(){
                if(this.a.length<3) return '少了';
                if(this.a.length>6) return '多了';
                return '';
            }
        },
        data:{
            a:''
        }
    });
</script>
</body>
</html>

watch

偵聽器
只有值變化的時候才會觸發，並且支援非同步。其他情況我們更善於使用computed
watch的屬性名字要和觀察的名字一樣
當你有一些資料需要隨著其它資料變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回撥。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="a">{{msg}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        watch:{//只有值變化的時候才會觸發，並且支援非同步。其他情況我們更善於使用computed
            a(newVal,oldVal){//watch的屬性名字要和觀察的名字一樣
                if(newVal.length<3){
                    this.msg='太少';
                }else if(newVal.length>6){
                    this.msg='太多';
                }else{
                    this.msg='';
                }
            }
        },
        data:{
            a:'',
            msg:''
        }
    });
</script>
</body>
</html>

template

template標籤是vue提供給我們的沒有任何意義，只是用來包裹元素用的。
v-show不支援template。
預設情況下切換dom時相同的結構會被複用，如果不需要複用，需要新增key屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if,else</title>
</head>
<body>
<div id="app">
    <!-- template標籤是vue提供給我們的沒有任何意義，只是用來包裹元素用的。v-show不支援template-->
    <template v-if="flag">
        <div>紅色</div>
        <div>紅色</div>
        <div>紅色</div>
        <div>紅色</div>
        <div>紅色</div>
    </template>
    <div v-else>藍色</div>
    <br><br>
     <!-- 預設情況下切換dom時相同的結構會被複用，如果不需要複用，需要新增key-->
    <input type="button" value="切換" @click="cut=!cut">
    <template v-if="cut">
        <label>登入</label>
        <input type="text" key="1">
    </template>
    <template v-else>
        <label>註冊</label>
        <input type="text" key="2">
    </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            flag:true,
            cut:true
        }
    });
</script>
</body>
</html>

:class :style

class和style的繫結有兩種形式：一、物件，二、陣列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind-class,v-bind-style</title>
    <style>
        .x {color: red;}
        .y {font-size: 30px;}
        .z {background: antiquewhite;}
    </style>
</head>
<body>
<div id="app">
    <p :class="{x:flag,y:true,z:false}">測試</p>
    <p :class="[class1,class2,{z:true}]">測試</p>

    <p :style="{color:'red',fontSize:'30px',background:'antiquewhite'}">測試</p>
    <p :style="[style1,style2,{background:'antiquewhite'}]">測試</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            class1:'x',
            class2:'y',
            style1:{color:'red'},
            style2:{fontSize:'30px'},
            flag:true,
            cut:true
        }
    });
</script>
</body>
</html>

實現單頁開發的方式

通過hash(#)記錄跳轉的路徑（可以產生歷史管理）
瀏覽器自帶的歷史管理的方法history（history。pushState())，但可能會導致404錯誤
開發時使用hash的方法，上線的時候使用history的方法

自定義指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義指令</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;;
        }
    </style>
</head>
<body>
<div id="app">
    <button v-color="flag">變色</button>
    <div class="box" v-drag></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        directives:{
            color(el,bindings){//el指代的是元素本身，這裡指的是button
                el.style.background=bindings.value;
            },
            drag(el,bindings){
                el.onmousedown=function(e){
                    var disX=e.pageX-el.offsetLeft;
                    var disY=e.pageY-el.offsetTop;
                    document.onmousemove=function (e) {
                        el.style.left=e.pageX-disX+'px';
                        el.style.top=e.pageY-disY+'px';
                    };
                    e.preventDefault();
                }
            }
        },
        data:{
            flag:'red'
        }
    });
</script>
</body>
</html>

元件

分類是頁面級的，1.一個頁面是一個元件；2.將可複用的部分抽離出來形成的基礎元件
全域性元件：可以宣告一次在任何地方使用
區域性元件：必須告訴這個元件屬於誰
一般寫外掛用的是全域性元件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全域性元件</title>
</head>
<body>
<div id="app">
   <my-remark></my-remark>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //1.元件名不要帶有大寫，多個單詞用-連線
    //2.只要元件名和定義名字相同就可以,但只有首字母可以大寫
    //3.html採用短橫線隔開命名法，js中轉駝峰也是可以的
    Vue.component('my-remark',{
        template:'<div>{{msg}}測試啦</div>',
        data(){//元件中的資料必須是函式型別，返回一個例項作為元件的資料
             return {msg:'啦啦啦,'}
        }
    });
    let vm=new Vue({
        el:'#app',
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>區域性元件</title>
</head>
<body>
<div id="app">
   <component1></component1>
   <component2></component2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //區域性元件使用三部曲：1.建立元件，2.註冊元件，3.使用元件
    //元件是相互獨立的，不能之間跨作用域。例項也是一個元件，元件中擁有宣告周期函式
    let obj={school:'lalala'};//如果元件公用了資料，會導致同時更新（獨立性）
    //子元件不能直接使用父元件的資料（元件之間的資料互動）
    //元件理論上可以無限巢狀
    let component1={
        template:'<div @click="fn">元件1{{school}}</div>',
        data(){
            return obj;
        },
        methods:{
            fn(){
                this.school='hello'
            }
        }
    };
    let component2={
        template:'<div>元件2{{school}}</div>',
        data(){
            return obj;
        }
    };
    let vm=new Vue({
        el:'#app',
        components:{
            component1,component2
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>巢狀元件</title>
</head>
<body>
<div id="app">
   <parent></parent>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //如果要再一個元件使用另一個元件，1.先保證使用的元件是真實存在的，2.在需要引用這個元件的例項上通過components註冊這個元件，3.元件需要在父級的模板中通過標籤的形式引入
    let grandson={
        template:'<h3>grandson</h3>'
    };
    let son={
        template:'<h2>son<grandson></grandson></grandson></h2>',
        components:{
            grandson
        }
    };
    let parent={
        template:'<h1>parent<son></son></h1>',
        components:{
            son
        }
    };
    let vm=new Vue({
        el:'#app',
        components:{
            parent
        }
    });
</script>
</body>
</html>

父傳子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父傳子</title>
</head>
<body>
<div id="app">
    父親：{{money}}
    <!-- 當前元件的屬性=父級的值。給兒子加了一個m屬性，屬性對應的資料是屬於父親的-->
    <child :m="money"></child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //父傳遞子
    let vm=new Vue({//parent
        el:'#app',
        data:{money:200},
        components:{
            child:{
                props:{//屬性名和data中名字不能相同，校驗時不能阻斷程式碼的指向，只是警告而已
                    m:{//校驗屬性的型別，如果不帶:得到的肯定時字串型別:m='1'  :m='true'
                        type:[String,Function,Object,Array,Number,Boolean],
                        // default:0,//可以給m賦予預設值，如果不傳預設會呼叫default
                        required:true,//次屬性是限制必須傳遞，但不能給default同用
                        validator(val){//第一個引數是當前傳遞的值，返回true標識通過，false不通過
                            return val>300;//自定義校驗器（用的不是很多）
                        }
                    }
                },//物件的形式可以通過校驗
                // props:['m'],//this.m=200;會在當前子元件上宣告一個m屬性值是父親的
                template:'<div>兒子：{{m}}</div>'
            }
        }
    });
</script>
</body>
</html>

釋出訂閱

//釋出emit 訂閱on
function Girl() {
    this._events={};
}
Girl.prototype.on=function (eventName,callback) {
    if(this._events[eventName]){//不是第一次
        this._events[eventName].push(callback);//{失戀:[cry,shopping,eat]}
    }else{
        this._events[eventName]=[callback]//{失戀:[cry]}
    }
};
Girl.prototype.emit=function (eventName,...args) {
    //[我,你,他]
    //[].slice.call(arguments,1);
    //Array.from(arguments).slice(1);
    this._events[eventName].forEach(cb=>cb(args));
};
let girl=new Girl();
let cry=(who)=>{console.log(who+'哭')};
let shopping=(who)=>{console.log(who+'購物')};
let eat=(who)=>{console.log(who+'吃')};
girl.on('失戀',cry);//{失戀:[cry]}
girl.on('失戀',shopping);//{失戀:[cry,shopping]}
girl.on('失戀',eat);//{失戀:[cry,shopping,eat]}
girl.emit('失戀','我','你');

arguments 剩餘引數

sync修飾符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sync修飾符</title>
</head>
<body>
<div id="app">
    <!-- 使用.sync修飾符同步資料 -->
    父親：{{money}}
    <!--<child :m="money" @update:m="val=>this.money=val"></child>-->
    <child :m.sync="money"></child>
    <!-- 寫的時候還是按原有的方法來寫即可，即註釋的方法 -->
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //父親繫結一些事件，兒子觸發這個事件將引數傳遞過去，單向資料流，父親資料重新整理，兒子就重新整理
    let vm=new Vue({//parent
        el:'#app',
        data:{money:200},
        components:{
            child:{
                props:['m'],
                template:'<div>兒子：{{m}}<button @click="getMoney">多要錢</button></div>',
                methods:{
                    getMoney(){
                        this.$emit('update:m',400);//觸發自定義事件
                    }
                }
            }
        }
    });
</script>
</body>
</html>

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈窗</title>
    <style>
        .mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.3);}
        .pop {position: fixed;top: 50%;left: 50%;width: 500px;height: 200px;background: #fff;transform: translate3d(-50%,-50%,0);}
    </style>
</head>
<body>
<div id="app">
    <button @click="open">點選</button>
    <pop :shows="flag" @close="()=>flag=false"></pop>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let pop={
        props:['shows'],
        template:' <div class="mask" v-show="shows">' +
                    '<div class="pop">' +
                        '<button @click="down">關閉彈窗</button>' +
                    '</div>' +
                 '</div>',
        methods:{
            down(){
                this.$emit('close');
            }
        }
    };
    let vm=new Vue({//parent
        el:'#app',
        data:{flag:false},
        components:{
            pop
        },
        methods:{
            open(){
                this.flag=true;
            }
        }
    });
</script>
</body>
</html>

slot插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot插槽</title>
</head>
<body>
<div id="app">
    <container><h1 slot="title">標題</h1><p slot="content">內容</p><span>預設內容嗎</span></container>
    <!--<box>測試啦</box>-->
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let container={
        template:'<div><slot name="title"></slot><slot name="content"></slot><slot name="default"></slot></div>',
    };
    let vm=new Vue({//parent
        el:'#app',
        components:{
            container
        }
    });
    //最基本的方法
    // let box={
    //     //slot中的內容為元件標籤內容為空時的預設內容，可不填
    //     template:'<div><slot>預設內容</slot></div>',//預設slot擁有name為default的屬性，若只有一個slot，可不填寫name屬性
    // };
    // let vm=new Vue({//parent
    //     el:'#app',
    //     components:{
    //         box
    //     }
    // });
</script>
</body>
</html>

ref 父呼叫子方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父呼叫子方法,ref獲取真實dom</title>
</head>
<body>
<div id="app">
   <loading ref="load"></loading>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //父呼叫子方法
    let loading={
        data(){
            return {flag:true};
        },
        template:'<div v-show="flag">瘋狂載入中...</div>',
        methods:{
            hide(){
                this.flag=false;
            }
        }
    };
    let vm=new Vue({
        el:'#app',
        mounted(){
            console.log(this.$refs.load);
            this.$refs.load.hide();
            // this.$refs.load.$el.style.color='red';
        },
        components:{
            loading
        },
    });
</script>
</body>
</html>

keep-alive <keep-alive> 包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。和 <transition> 相似，<keep-alive> 是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在父元件鏈中。當元件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函式將會被對應執行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keep-alive,component標籤</title>
</head>
<body>
<div id="app">
    <input type="radio" v-model="flag" value="home" name="flag">home
    <input type="radio" v-model="flag" value="list" name="flag">list
    <!-- component是vue自帶的標籤，template，slot，transition同樣也是-->
    <!-- 這種方法在跳轉的時候會銷燬前一個元件-->
    <component :is="flag"></component>
    <!-- 可以新增keep-alive標籤，就不會銷燬元件-->
    <!-- 一般用作快取，為的是後面的路由做準備-->
    <keep-alive>
        <component :is="flag"></component>
    </keep-alive>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //父呼叫子方法
    let home={
        template:'<div>home</div>',
        beforeDestroy(){
            alert('銷燬');
        }
    };
    let list={
        template:'<div>list</div>',
        beforeDestroy(){
            alert('銷燬');
        }
    };
    let vm=new Vue({
        el:'#app',
        data:{
            flag:'home'
        },
        components:{
            home,list
        },
    });
</script>
</body>
</html>

元件非同步渲染問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元件渲染掛載問題$nextTick</title>
</head>
<body>
<div id="app">
    <child ref="child"></child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //子元件和父元件同時擁有mounted，先執行子元件，後執行父元件
    let child={
        data(){
            return {arr:[1,2,3]}
        },
        template:'<div><li v-for="a in arr">{{a}}</li></div>',
        mounted(){
            this.arr=[4,5,6];//此處是非同步渲染dom
            alert('child');
        },
    };
    let vm=new Vue({
        el:'#app',
        mounted(){
            alert('parent');
            console.log(this.$refs.child.$el.innerHTML);//結果是<li>1</li><li>2</li><li>3</li>
            //頁面顯示是4，5，6，為什麼父元件列印的是1，2，3。因為mounted是非同步渲染的，所以此時需要$nextTick，使用mounted一定要使用$nextTick
            this.$nextTick(()=>{
                console.log(this.$refs.child.$el.innerHTML);
            })
        },
        components:{
            child
        },
    });
</script>
</body>
</html>

slot實踐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot</title>
    <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
    <panel type="primary" @say-title="parent">
        <div slot="title">怎樣學習vue</div>
        <div slot="body">
            <p>js基礎</p>
            <p>vue基礎</p>
            <p>vue進階</p>
        </div>
        <div slot="foot">作者：小明</div>
    </panel>
</div>
<template id="panel">
    <div class="panel" :class="[color]">
        <div class="panel-heading" ref="head">
            <slot name="title"></slot>
        </div>
        <div class="panel-body">
            <slot name="body"></slot>
        </div>
        <div class="panel-footer">
            <slot name="foot">無名</slot>
        </div>
        <button class="btn btn-default" @click="getTitle">點選獲取標題</button>
    </div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let panel={
        template:'#panel',
        computed:{
            color(){
                return 'panel-'+this.type
            }
        },
        methods:{
            getTitle(){
                this.$emit('say-title',this.$refs.head.innerText);
            }
        },
        props:{
            type:{//this.type='primary',子不能更改父元件傳遞的屬性
                type:[String],
                default:'default'
            }
        }
    };
    let vm=new Vue({
        el:'#app',
        components:{
            panel
        },
        methods:{
            parent(val){
                alert(val);
            }
        }
    });
</script>
</body>
</html>

元件的迴圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元件的迴圈</title>
    <link type="text/css" rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
    <!-- 在2.2.0版本以上，當元件使用v-for時，key是必須的 -->
    <panel :type="article.type" @say-title="parent" v-for="(article,index) in articles" :key="index">
        <div slot="title" v-html="article.title"></div>
        <div slot="body">{{article.content}}</div>
        <div slot="foot">{{article.auth}}</div>
    </panel>
</div>
<template id="panel">
    <div class="panel" :class="[color]">
        <div class="panel-heading" ref="head">
            <slot name="title"></slot>
        </div>
        <div class="panel-body">
            <slot name="body"></slot>
        </div>
        <div class="panel-footer">
            <slot name="foot">無名</slot>
        </div>
        <button class="btn btn-default" @click="getTitle">點選獲取標題</button>
    </div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let panel={
        template:'#panel',
        computed:{
            color(){
                return 'panel-'+this.type
            }
        },
        methods:{
            getTitle(){
                this.$emit('say-title',this.$refs.head.innerText);
            }
        },
        props:{
            type:{//this.type='primary',子不能更改父元件傳遞的屬性
                type:[String],
                default:'default'
            }
        }
    };
    let vm=new Vue({
        el:'#app',
        components:{
            panel
        },
        methods:{
            parent(val){
                alert(val);
            }
        },
        data:{
            articles:[
                {type:'primary',title:'<h1>vue</h1>',content:'這是vue文章',auth:'作者：小明'},
                {type:'success',title:'<h1>react</h1>',content:'這是react文章',auth:''},
                {type:'info',title:'<h1>angularJs</h1>',content:'這是angularJs文章',auth:'作者：小紅'},
            ]
        }
    });
</script>
</body>
</html>

路由

宣告式路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宣告式路由</title>
    <style>
        /*.router-link-active {color: red;}*/
        .active {color: red;}
    </style>
</head>
<body>
<!-- hash模式#，開發時使用，不會導致404，但不支援seo-->
<!-- h5的history.pushState，上線後採用h5的跳轉方式-->
<div id="app">
    <!-- 宣告式導航 -->
    <router-link to="/home" tag="button">首頁</router-link>
    <router-link to="/list" tag="button">列表頁</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home={template:'<div>首頁</div>'};
    let list={template:'<div>列表頁</div>'};
    let routes=[//路由的對映表，配置路徑和元件的關係
        {path:'/home',component:home},//配置的關係就是頁面級元件
        {path:'/list',component:list}//路徑必須加/
    ];
    let router=new VueRouter({//引入vue-router自帶VueRouter類
        //vue-router 預設 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入。如果不想要很醜的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面。
        mode:'history',
        routes,
        linkActiveClass:'active'//將router-link按鈕自帶觸發類名改為active
    });
    let vm=new Vue({
        el:'#app',
        router
    });
</script>
</body>
</html>

程式設計式路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>程式設計式路由</title>
    <style>
        /*.router-link-active {color: red;}*/
        .active {color: red;}
    </style>
</head>
<body>
<div id="app">
    <!-- 程式設計式導航 -->
    <router-link :to="{path:'/home'}" tag="button">首頁</router-link>
    <router-link :to="{path:'/list'}" tag="button">列表頁</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home={
        template:'<div>首頁<button @click="goList">列表頁</button></div>',
        methods:{
            goList(){
                this.$router.push('/list');
                // this.$router.replace('/list');不常用
            }
        }
    };
    let list={
        template:'<div>列表頁<button @click="back">返回</button></div>'
        ,methods:{
            back(){
                this.$router.go(-1);//返回上一級
            }
        }
    };
    let routes=[//路由的對映表，配置路徑和元件的關係
        {path:'',component:home},//預設的路由
        {path:'/home',component:home},//配置的關係就是頁面級元件
        {path:'/list',component:list},//路徑必須加/
        // {path:'*',component:list}//當沒有可匹配的頁面時，展示這個頁面。但這個地方路徑不會變，只是切換了元件而已
        {path:'*',redirect:'/home'}//路徑變，元件也會變。常用於404
    ];
    let router=new VueRouter({//引入vue-router自帶VueRouter類
        routes,
        linkActiveClass:'active'//將router-link按鈕自帶觸發類名改為active
    });
    let vm=new Vue({
        el:'#app',
        router//定義router後，每個元件都會擁有$router(有r放的都是方法)和$route(沒有r放的都是屬性)
    });
</script>
</body>
</html>

路由巢狀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由巢狀</title>
</head>
<body>
<div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/detail">詳情頁</router-link>
    <router-view></router-view>
</div>
<template id="detail">
    <div>
        <router-link to="/detail/profile">個人中心</router-link>
        <router-link to="/detail/about">關於我們</router-link>
        <router-view></router-view>
    </div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home={template:'<div>home</div>'};
    let detail={template:'#detail'};
    let profile={template:'<div>profile</div>'};
    let about={template:'<div>about</div>'};
    let routes=[
        {path:'/home',component:home},
        {
            path:'/detail',
            component:detail,
            children:[//children中的路徑永遠不帶/，如果帶/表示1級路由
                {path:'profile',component:profile},
                {path:'about',component:about}
            ]
        }
    ];
    let router =new VueRouter({
        routes
    });
    let vm=new Vue({
        el:'#app',
        router
    });
</script>
</body>
</html>

路由引數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由引數</title>
</head>
<body>
<div id="app">
    <!-- 如果用物件作為to的屬性，並且使用了引數，必須給路由起一個名字，通過名字跳轉-->
    <router-link :to="{name:'pro',params:{num:1,id:'a'}}">商品1</router-link>
    <router-link to="/article/2/b">商品2</router-link>
    <router-link to="/article/3/c">商品3</router-link>
    <router-view></router-view>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let article={
        template:'<div>這是第{{$route.params.num}}篇文章</div>',
        watch:{//路徑引數發生變化，監控引數的變化來發送Ajax
            $route(){
                alert('ajax');
            }
        }
    };
    let routes=[
        {path:'/article/:num/:id',component:article,name:'pro'},
    ];
    let router =new VueRouter({
        routes
    });
    let vm=new Vue({
        el:'#app',
        router
    });
</script>
</body>
</html>

路由動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由動畫</title>
    <link type="text/css" rel="stylesheet" href="node_modules/animate.css/animate.css">
</head>
<body>
<div id="app">
    <router-link to="/home" tag="button">首頁</router-link>
    <router-link to="/list" tag="button">列表頁</router-link>
    <!-- mode="out-in"動畫的模式，預設是in-out-->
    <!-- 要想呈現相對流暢的動畫，可以設定檢視為絕對位置-->
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <router-view style="position: absolute;top: 50px;left: 0;width: 100%;height: 50px;"></router-view>
    </transition>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home={template:'<div style="background: red">首頁</div>'};
    let list={template:'<div style="background: green">列表頁</div>'};
    let routes=[
        {path:'/home',component:home},
        {path:'/list',component:list}
    ];
    let router=new VueRouter({
        routes
    });
    let vm=new Vue({
        el:'#app',
        router
    });
</script>
</body>
</html>

VUE快速入門與實踐（上）

簡介 vue官網 vue.js是一套構建使用者介面的漸進式框架。 vue全家桶：vue.js+vue-router+vuex+axios 特點核心只關注檢視層（view) 易學，輕量，靈活的特點適用於移動端專案漸進式框架漸進式的理解宣告式渲染（無

Docker入門到實踐（上）

虛擬化技術容器 Docker是一個開源的應用容器引擎，開發可以打包自己的應用或者是依賴包上傳到可移植的容器裏，然後進行發布到任何linux機器上，也可實現虛擬化容器是完全使用沙箱機制的，相互之間不會存在任何接口，幾乎沒有額外的性能開銷，很容易的在機器和數據中興運行，最重要的是不依賴任

Docker容器的原理與實踐（上）

系統 rest 引擎服務器分類 file creat 產品 maintain 歡迎訪問網易雲社區，了解更多網易技術產品運營經驗。虛擬化是一種資源管理技術，將計算機的各種資源予以抽象、轉換後呈現出來, 打破實體結構間的不可切割的障礙，使用戶可以比原本更好的方式來應用這些資

談談華為微服務解決方案與實踐（上）

華為雲微服務引擎的前世今生華為從12年開始在很多創新專案裡應用微服務技術，在14年隨著微服務框架技術越來越成熟，工具越來越完善，公司各個產品線開始基於微服務框架做雲化產品，16年的時候公司為了更好的進行能力共享，決策把散落在公司各個產品線的一些與微服務相關的工具、平臺、框架和團隊統一整合

python3入門與實踐（六）：函數語言程式設計

匿名函式 lambda # 1.parameter_list 引數列表 # 2.expression 函式體，只能是有一些簡單的，注意不是程式碼塊，比如不能寫賦值語句 # 3.不需要return lambda parameter_list: expression 複製程式碼 def add(x,y):

GitHub入門與實踐（一）——在widows環境下安裝Git

1、Git最新版本下載地址 https://git-for-windows.github.io/ 2、按照下圖中的選項安裝即可： 1）選擇安裝路徑 2）選擇安裝的元件 3）設定開始欄中的資料夾名稱 4）設定環境變數，以後我們只用Git Bash 命令

vue 快速入門與最佳實踐（vue-cli, webpack, vue 最佳實踐）

技術與依賴環境分層結構 ES6 語言 nodejs 底層環境 npm 高階庫 vue-cli 腳手架 webpack 打包編譯工具

VBA學習1_教你快速入門Excel-巨集與VBA（上）

最近在做專案的時候用到了Excel巨集和VBA，本著共享的原則，我把收集的資料結合專案實踐操作進行了總結之後製作了本教程，旨在幫初學者入門，特別是有一定VB基礎的同學，可以通過此教程快速掌握巨集和VBA。什麼是巨集 Excel巨集就是一系列的操作步驟，比如在單元格

Oracle入門第一天（上）——簡介與安裝

http 添加數據 system 第一個上網操作 develop 窗口 style 一、Oracle介紹　　 Oracle 公司是全球最大的信息管理軟件及服務供應商，成立於1977年　　Oracle 公司因其復雜的關系數據庫產品而聞名。Oracle的關系數據庫是

企業級Redis開發運維從入門到實踐（20）— Redis複製的原理與優化

什麼是主從複製單機有什麼問題？單機存在機器故障、容量瓶頸、QPS（每秒查詢率）瓶頸的問題。主從複製的作用資料副本擴充套件讀效能；一對一的主從結構一對多的主從結構（主從備份、讀寫分離）

Vue從入門到精通（5）--第四階段（上）：Vue入門及Vue-cli上手教程

第四階段 vue2.0語法 vue2.0+webpack搭建開發環境官方腳手架vue-cli Vue的作者尤雨溪大神寫了一篇《新手向：Vue 2.0 的建議學習順序》來介紹Vue及相關知識點的學習路線，主要列出了知識點概要，如果你覺得略

知識圖譜學習與實踐（5）——Protégé使用入門

1 Protégé簡介 Protégé是一個本體建模工具軟體，由斯坦福大學基於java語言開發的，屬於開放原始碼軟體。軟體主要用於語義網中本體的構建和基於本體的知識應用，是本體構建的核心開發工具，最新版本為5.5.0（截至2019年7月）。 Prot

Vuex入門實踐（上）

一.前言　　vuex被稱為是專為vue應用程式開發的的狀態管理模式。它的作用使用一句話描述就是：讓元件之間可以共享資料　　話不多少，先拋開概念，我們寫一個簡單的示例感受一波。二.專案開發環境　　專案開發環境搭建請移步作者的另外一篇文章《使用vue

.Net Core微服務入門全紀錄（二）——Consul-服務註冊與發現（上）

# 前言上一篇【[.Net Core微服務入門全紀錄（一）——專案搭建](https://www.cnblogs.com/xhznl/p/13071260.html)】講到要做到服務的靈活伸縮，那麼需要有一種機制來實現它，這個機制就是服務註冊與發現。當然這也並不是必要的，如果你的服務例項很少，並且很穩定，那

go-zero解讀與最佳實踐（上）

> 本文有『Go開源說』第三期 go-zero 直播內容修改整理而成，視訊內容較長，拆分成上下篇，本文內容有所刪減和重構。大家好，很高興來到“GO開源說” 跟大家分享開源專案背後的一些故事、設計思想以及使用方法，今天分享的專案是 go-zero，一個集成了各種工程實踐的 web 和 rpc 框架。我是Ke

JVM高級特性與實踐（二）：對象存活判定算法（引用）與回收

添加引用計數器程序計數器正文 bmc 進入 block 結構內存關於垃圾回收器GC（Garbage Collection），多數人意味它是Java語言的伴生產物。事實上，GC的歷史遠比Java悠遠，於1960年誕生在MIT的Lisp是第一門真正使用內存動態分配和垃

三維渲染引擎設計與實踐（四）

方式 lora 扇面多個幀緩存 binding osg smo tco 五、繪制幾何對象和文字幀緩存（Frame Buffer）為用戶與顯示設備交互的一個接口，將顯示的畫面抽象成一塊可以進行讀寫操作的內存區域。幀緩存的每一個存儲單元都對應顯示屏上的一個像素。整個緩存

三維渲染引擎設計與實踐（八）

窗口 drag 支持機制對象 window ani handle ima 視頻 8.2三維人機交互工具 osg實現了三維場景的漫遊以及場景中三維對象的操縱。 8.2.1漫遊器 osgGA::MatrixManipulator類漫遊器也是事件處理器GUIEventHand

jQuery EasyUI快速入門實戰教程（一）-入門

jquery javascript easyui 1、jQuery EasyUI概述jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富並且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要

前端工程化思考與實踐（二）

run test 代碼 -m link 本地生成頁面函數說我 4. 前端工程化開發實踐由於Nodejs 、npm的環境搭建往上很多，這裏就不過多介紹它們了。這裏我們將更多介紹FIS3、RequireJS 、r.js。 4.1 模塊化開發：

VUE快速入門與實踐（上）

簡介

特點

核心

安裝vue

指令

資料響應的變化

checkbox,select,radio

Promise

Promise-ajax

axios

filter,created,computed

vue動畫

修飾符

computed

watch

template

:class :style

實現單頁開發的方式

自定義指令

元件

路由

相關推薦