官方地址

地址：https://cn.vuejs.org/

安裝Vue庫

地址：https://v2.cn.vuejs.org/v2/guide/installation.html

安裝瀏覽器調試工具

另外一種方式

安裝Vue-devtools

克隆gitee項目 https://gitee.com/wen_zhao/devtools

git clone https://gitee.com/wen_zhao/devtools.git

切換到add-remote-devtools分支

git checkout -b add-remote-devtools origin/add-remote-devtools

安裝依賴

cnpm i

打包

npm run build

在谷歌瀏覽器添加擴展程序

用vue寫第一個Hello world

引入Vue.js

 <script src="../vue.js/vue.js"></script>

準備好一個裝載數據的容器

<div id="app">{{message}}</div>

創建Vue實例

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                message: 'Hello world!'
            }
        });
    </script>

注意

一個vue實例只能接管一個容器
插值語法：{{}} 可以讀取到在data的所有屬性
data中數據發生變化，那麼在容器用到的數據會自動更新

模板語法

插值語法

特點：用在標籤體內容
寫法

{{xxx}} // xxx是js表達式，可以拿到data裏所有的屬性

指令語法

特點：用在標籤的解析（標籤屬性，標籤體內容，綁定事件等）
舉例（vue的指令語法形式寫法：v-xxx）

// 解析標籤屬性：v-bind
v-bind:href='url'
:href='url' // 簡寫模式

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
</head>

<body>

    <div id="app">
        {{name}}
        <a :href="url">博客園地址-1</a>
        <a v-bind:href="url">博客園地址-2</a>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                name: 'Hello world!',
                url: 'https://www.cnblogs.com/chenyanbin/'
            }
        });
    </script>
</body>

</html>

雙向數據綁定

單項數據綁定

特點：只能從data流向頁面
實現

// 通過v-bind實現單項數據綁定
<input type="text" :value="name" />

雙向數據綁定

特點：不僅可以從data流向頁面，也能從頁面表單元素（輸入元素）流向data
實現

// 通過v-model實現雙項數據綁定
<input type="text" v-model:value="name" />
<input type="text" v-model="name" />       // 簡寫

示例

    <div id="app">
        <h3>
            單項數據綁定<input type="text" :value="name" />
            <br/>
            雙項數據綁定<input type="text" v-model:value='name' />
        </h3>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                name: 'Hello world!'
            }
        });
    </script>

Vue核心知識點

常用事件處理修飾符

事件綁定指令：v-on

<button v-on:click="showMessge">點擊</button>

// 簡寫
<button @click="showMessge">點擊</button>

事件傳參

<button @click="showMessge('hello')">點擊</button>

methods: {
  showMessge(text) {
    console.log(text);
  },
},

注意

methods中配置的函數不要使用箭頭函數
event.target.innerText能拿到標籤的值，但是調用不加（）或者加（$event）

常用事件修飾符

阻止默認事件

// js中的阻止默認事件
e.preventDefault()

// vue
@click.prevent="showMessge"

阻止事件冒泡

// js中的阻止事件冒泡
e.stopPropagation()

// vue
@click.stop="showMessge"

// 阻止冒泡、默認事件連用
@click.stop.prevent="showMessge"

只觸發一次事件

@click.once="showMessge"

鍵盤事件

@keyup.enter="showMessge"

示例

    <div id="app">
        <h3 v-on:click="cyb">點擊</h3>
        <h3 @click="cyb">點擊</h3>
        <h3 @click="show('hello world')">有參數點擊</h3>
        <h3 @click="cyb2">點我試試</h3>
        <h3 @click="cyb2($event)">點我試試1111</h3>
        <a href="https://www.cnblogs.com/chenyanbin/" @click="cyb3">博客地址</a>
        <a href="https://www.cnblogs.com/chenyanbin/" @click.prevent="cyb4">博客地址</a>
        <div @click="cyb5">
            <div @click="cyb5">
                冒泡事件
            </div>
        </div>
        <h3 @click.once="cyb">一次事件</h3>
        <div>
            鍵盤事件：<input type="text" @keyup.enter='cyb6' />
        </div>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                name: 'Hello world!'
            },
            methods: {
                cyb() { //無參方法
                    alert("111111111");
                },
                show(text) { //有參方法
                    alert(text);
                },
                cyb2(event) { //獲取標籤內的值
                    alert(event.target.innerText)
                },
                cyb3(e) {
                    e.preventDefault();
                    alert('333')
                },
                cyb4(e) {
                    alert('444')
                },
                cyb5() {
                    alert('555')
                },
                cyb6() {
                    alert('666')
                }
            }
        });
    </script>

Vue中的計算屬性

計算屬性

定義

通過已有的屬性計算而來
寫法
- 讀取/更改

fullName: {
  get() {
    return this.firstName + '-' + this.lastName;
  },
  set(value) {
    this.firstName = value.split('-')[0];
    this.lastName = value.split('-')[1];
  },
},

讀取簡寫

computed: {
  fullName() {
    return this.firstName + '-' + this.lastName;
  },
}

// 注意：只有當只讀時可以簡寫，有修改需求時不能使用簡寫

通過methods實現

methods: {
  fullName() {
    return this.firstName + '-' + this.lastName;
  },
}

示例

    <div id="app">
        姓：<input type="text" v-model="firstName"> 名：
        <input type="text" v-model="lastName" /> 全名：
        <input type="text" v-model='fullName()' /> 全名2：
        <input type="text" v-model="fullName2">
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                firstName: '',
                lastName: ''
            },
            methods: {
                fullName() {
                    return this.firstName + "-" + this.lastName;
                }
            },
            computed: {
                fullName2: {
                    get() {
                        return this.firstName + "-" + this.lastName;
                    },
                    set(value) {
                        this.firstName = value.split('-')[0];
                        this.lastName = value.split('-')[1];
                    }
                }
            }
        });
    </script>

計算屬性優點

有緩存的機制，可以複用
效率高，調試方便

Vue中的監視屬性

監視屬性

watch: {
  isSunny: {
    immediate:true, // 開啓初始化調用
    deep:true,      // 開啓深度監視
    handler() {
      this.plan = this.isSunny ? '打藍球' : '敲代碼';
    },
  },
}

被監視的屬性發生改變時，調用回調函數，執行相關操作
配置immediate:true實現初始化調用
監視的屬性須存在才能進行監視

深度監視

Vue自身可以監測到多層數據的改變，但是在watch中不可以（只能監測簡單的數據類型）
在watch中配置deep:true可以監測多維數據，根據具體數據結構決定是否採用深度監視

示例

    <div id="app">
        今天的計劃：{{plan}}
        <br>
        <button @click="change">切換天氣</button>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                plan: '打籃球',
                isSunny: true
            },
            methods: {
                change() {
                    this.isSunny = !this.isSunny;
                }
            },
            watch: { //監視屬性
                isSunny: { //監視屬性的值
                    immediate: true, // 開啓初始化調用監聽
                    deep: true, //開啓深度監聽
                    handler() {
                        this.plan = this.isSunny ? '打籃球' : '擼代碼';
                    }
                }
            }
        });
    </script>

Vue中class樣式的綁定

字符串寫法

使用場景
- 樣式的類型不確定
寫法

<div :class="cyb_bg">陳彥斌</div>

手動觸發樣式改變
注意

字符串使用的是vue實例data中的已有屬性

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
    <style>
        .bg_1 {
            background-color: red;
        }
        
        .bg_2 {
            background-color: blue;
        }
    </style>
</head>

<body>

    <div id="app">
        <div :class="bg_red" @click="change">
            {{name}}
        </div>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                name: '陳彥斌',
                bg_red: 'bg_1'
            },
            methods: {
                change() {
                    this.bg_red = 'bg_2';
                }
            }
        });
    </script>
</body>

對象寫法

使用場景
- 樣式個數、類名確定，通過Boolean動態展示與否

    <style>
        .bg_1 {
            background-color: red;
        }
        
        .bg_2 {
            background-color: blue;
        }
        
        .fs {
            font-size: 50px;
        }
    </style>


    <div id="app">
        <div :class="{bg_2:true,fs:true}">{{name}}</div>
    </div>

對象寫在內聯樣式

<div :class="{bg_red:bg_red,border:border}">陳彥斌</div>

對象寫在data中

<div :class="list">陳彥斌</div>

data: {
  list: {
    bg_red: 'bg_red',
    border: 'border',
  },
}

數組寫法

使用場景
- 需要綁定的樣式個數不確定，類名也不確定
內聯寫法

 <div :class="[cyb_border,cyb_bg]">陳彥斌</div>

數組裏加三元表達式

<div :class="[isActive?cyb_border:'',cyb_bg]">陳彥斌</div>

寫在data中

 <div :class="list">陳彥斌</div>

data:{
  list:['border', 'bg_red']
}

示例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue.js"></script>
    <style>
        .bg_1 {
            background-color: red;
        }
        
        .bg_2 {
            background-color: blue;
        }
        
        .fs {
            font-size: 50px;
        }
        
        .fc {
            color: green;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- 字符串的寫法 -->
        <div :class="bg_red" @click="change">
            {{name}}
        </div>
        <!-- 對象的寫法 -->
        <div :class="{bg_2:true,fs:true}">{{name}}</div>
        <!-- 數組的寫法 -->
        <div :class="list">{{name}}</div>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                name: '陳彥斌',
                bg_red: 'bg_1',
                list: [
                    'bg_1', 'fs', 'fc'
                ]
            },
            methods: {
                change() {
                    this.bg_red = 'bg_2';
                }
            }
        });
    </script>
</body>

Vue中style樣式動態綁定

樣式中2個單詞中間不能出現“-”，第二個單詞需要轉大寫
style樣式中，需要key-value形式，value需要加單引號

    <div id="app">
        <div :style="{backgroundColor:red,color:blue}">{{name}}</div>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                name: '陳彥斌',
                red: 'red',
                blue: 'blue'
            }
        });
    </script>

Vue中的條件渲染

`v-if`

寫法

        <p v-if="dice===1">週一</p>
        <p v-else-if="dice===2">週二</p>
        <p v-else-if="dice===3">週三</p>
        <p v-else>未知</p>

特點

語法和原生js的if...else if...else一樣
不展示時直接移除DOM元素，適合切換頻率低的場景
v-if、v-else-if、v-else要連用

v-show

寫法

        <p v-show="dice===1">週一</p>
        <p v-show="dice===2">週二</p>
        <p v-show="dice===3">週三</p>
        <p v-show="dice===4">週四</p>

特點

不展示時使用樣式隱藏，適合切換頻率高的場景

`v-if` vs `v-show`

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。
如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

示例

    <div id="app">
        <p v-if="dice===1">週一</p>
        <p v-else-if="dice===2">週二</p>
        <p v-else-if="dice===3">週三</p>
        <p v-else>未知</p>
        <button @click="thorFun">投骰子</button>
        <br>
        <p v-show="dice===1">週一</p>
        <p v-show="dice===2">週二</p>
        <p v-show="dice===3">週三</p>
        <p v-show="dice===4">週四</p>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                dice: ''
            },
            methods: {
                thorFun() {
                    this.dice = Math.floor(Math.random() * 4);
                    console.log(this.dice);
                }
            }
        });
    </script>

Vue中的列表渲染

`v-for`

定義
- 用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名
遍歷數組
- 寫法

<li v-for="(item,index) in list">{{item.name}}-{{index}}</li>



new Vue({
  el: '#app',
  data: {
    list: [{ name: '張三' }, { name: '李四' }, { name: '王五' }],
  },
});

第二個參數

<li v-for="(item,index) in list">{{item.name}}-{{index}}</li>

也可以用 of 替代 in

<li v-for="(item,index) of list">{{item.name}}-{{index}}</li>

遍歷對象

寫法

<li v-for="value in obj">{{value}}</li>


new Vue({
  el: '#app',
  data: {
    obj: { name: '張三', age: '18', sex: '男' },
  },
});

第二個參數（鍵名）

<li v-for="(name,value) in obj">{{name}}：{{value}}</li>

第三個參數（索引）

<li v-for="(name,value,index) in obj">{{index}}：{{name}}：{{value}}</li>

示例

    <div id="app">
        <div v-for="item in name">{{item}}</div>
        <br>
        <div v-for="(item,index) in list">{{item.week}}-{{index}}</div>
        <br>
        <div v-for="(v,k) in obj">{{k}}-{{v}}</div>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                name: '陳彥斌',
                list: [{
                    week: '週一'
                }, {
                    week: '週二'
                }, {
                    week: '週三'
                }, {
                    week: '週四'
                }, {
                    week: '週五'
                }, {
                    week: '週六'
                }, {
                    week: '週日'
                }],
                obj: {
                    name: 'Alex',
                    age: '18',
                    sex: '男'
                }
            }
        });
    </script>

Vue中列表過濾

列表過濾

做一個商品關鍵字搜索展示列表

    <div id="app">
        <input type="text" v-model='inputValue' />
        <ul>
            <li v-for="obj in newList">{{obj.name}}-{{obj.price}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                list: [{
                    name: '牛仔褲',
                    price: '88元'
                }, {
                    name: '運動褲',
                    price: '67元'
                }, {
                    name: '羽絨服',
                    price: '128元'
                }, {
                    name: '運動服',
                    price: '99元'
                }],
                newList: [],
                inputValue: []
            },
            watch: { //監聽器
                inputValue: {
                    immediate: true,
                    handler(val) {
                        this.newList = this.list.filter((i) => {
                            return i.name.indexOf(val) !== -1;
                        })
                    }
                }
            }
        });
    </script>

Vue中列表排序

列表排序

對商品列表進行排序

    <div id="app">
        <input type="text" v-model='inputValue' />
        <button @click="keyword=1">降序</button>
        <button @click="keyword=2">升序</button>
        <button @click="keyword=0">原順序</button>
        <ul>
            <li v-for="obj in newList">{{obj.name}}-{{obj.price}}元</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                list: [{
                    name: '牛仔褲',
                    price: '88'
                }, {
                    name: '運動褲',
                    price: '67'
                }, {
                    name: '羽絨服',
                    price: '128'
                }, {
                    name: '運動服',
                    price: '99'
                }],
                inputValue: [],
                keyword: 0
            },
            computed: {
                newList() {
                    const arr = this.list.filter((i) => {
                        return i.name.indexOf(this.inputValue) !== -1;
                    })
                    if (this.keyword) {
                        arr.sort((a1, a2) => {
                            return this.keyword === 2 ? a1.price - a2.price : a2.price - a1.price;
                        })
                    }
                    return arr;
                }
            }
        });
    </script>

表單數據的綁定

    <div id="app">
        <form @submit.prevent="submit">
            賬號：<input type="text" v-model="userInfo.username"><br />
            賬號：<input type="password" v-model="userInfo.password"><br />
            手機號：<input type="number" v-model.number="userInfo.phone"><br />
            性別：男<input type="radio" name="sex" value="male" v-model='userInfo.sex' /> 女<input type="radio" name="sex"
                value="femal" v-model='userInfo.sex' /><br />
            方向：前端<input type="checkbox" value="front" v-model='userInfo.direction' /> 後端<input type="checkbox"
                value="back" v-model='userInfo.direction' />測試<input type="checkbox" value="test"
                v-model='userInfo.direction'><br />
            地區：<select v-model="userInfo.city">
                <option value="">請選擇地區</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="gz">廣州</option>
                <option value="sz">深圳</option>
            </select><br/>
            備註：<textarea v-model="userInfo.remarks"></textarea><br>
            <input type="checkbox" v-model="userInfo.agree">請閱讀並接受<a href="http://baidu.com">《用戶協議》</a>
            <br><br>
            <button>提交</button>
        </form>
    </div>

    <script>
        new Vue({
            el: '#app', //用於指定當前Vue實例爲那個容器使用，值爲css選擇器字符串
            data: { //用於存儲數據，數據供el指定的容器使用
                userInfo: {
                    username: '',
                    password: '',
                    phone: '',
                    sex: '',
                    direction: [],
                    city: '',
                    remarks: '',
                    agree:''
                }
            },
            methods: {
                submit(){
                    console.log(this.userInfo)
                }
            }
        });
    </script>

Vue指令v-text/v-html

`v-text`

寫法

<p v-text="name"></p>


new Vue({
  el: '#app',
  data: {
    name: '陳彥斌',
  },
});

特點

在所在節點渲染文本內容
會替換節點中所在的內容

`v-html`

寫法

<p v-html="str"></p>


new Vue({
  el: '#app',
  data: {
    str: '<h1>陳彥斌</h1>',
  },
});

特點
- 在所在節點渲染html結構的內容
- 替換節點所在的所有內容
注意
- 在網站上動態渲染任意 HTML 是非常危險的，因爲容易導致 XSS 攻擊（注入惡意指令代碼到網頁）
- 只在可信內容上使用 v-html，不要在用戶提交的內容上。

Vue 初識

官方地址

安裝Vue庫

安裝瀏覽器調試工具

用vue寫第一個Hello world

模板語法

雙向數據綁定

Vue核心知識點

常用事件處理修飾符

常用事件修飾符

鍵盤事件

Vue中的計算屬性

Vue中的監視屬性

Vue中class樣式的綁定

字符串寫法

對象寫法

數組寫法

Vue中style樣式動態綁定

Vue中的條件渲染

`v-if`

v-show

`v-if` vs `v-show`

Vue中的列表渲染

`v-for`

Vue中列表過濾

Vue中列表排序

表單數據的綁定

Vue指令v-text/v-html

`v-text`

`v-html`

java 高效遞歸查詢樹 find_in_set 處理遞歸樹

Mac Vue-cli腳手架搭建

Mac postman調分頁接口，導出csv

SpringBoot 啓動時報錯Unable to start embedded Tomcat

Mac SpringBoot項目 Gradle 7.3 轉 Maven 手把手教學，包學會~

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Vue 初識

官方地址

安裝Vue庫

安裝瀏覽器調試工具

用vue寫第一個Hello world

模板語法

雙向數據綁定

Vue核心知識點

常用事件處理修飾符

常用事件修飾符

鍵盤事件

Vue中的計算屬性

Vue中的監視屬性

Vue中class樣式的綁定

字符串寫法

對象寫法

數組寫法

Vue中style樣式動態綁定

Vue中的條件渲染

v-if

v-show

v-if vs v-show

Vue中的列表渲染

v-for

Vue中列表過濾

Vue中列表排序

表單數據的綁定

Vue指令v-text/v-html

v-text

v-html

`v-if`

`v-if` vs `v-show`

`v-for`

`v-text`

`v-html`