vue 基礎（一）

VUE

一. 開發工具

VUE開發環境個人推薦使用VS code, 然後安裝特定的插件即可開發，可用插件如下：

Vetur —— 語法高亮、智能感知、Emmet等
EsLint—— 語法糾錯
Auto Close Tag —— 自動閉合HTML/XML標籤
Auto Rename Tag —— 自動完成另一側標籤的同步修改
Path Intellisense —— 自動路勁補全
HTML CSS Support —— 讓 html 標籤上寫class 智能提示當前項目所支持的樣式
Vue 2 Snippets ——vue的語法提示

二. 第一個VUE程序

2.1 引入js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

2.2 給dom元素定義id

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

2.3 vue代碼編寫

new Vue({
     el: "#app",
     data: {
        msg: "Hello World"
     }
});

二. 基本指令

v-text: v-text是用於操作純文本，它會替代顯示對應的數據對象上的值，可以簡寫爲{{}}, 即插值表達式。

v-html: 將內容以html的形式呈現在頁面。

v-model: 雙向數據綁定。

v-if: 值如果爲true的情況下，顯示標籤，如果爲false會移除標籤。

v-else-if: 與v-if配合使用。

v-else: 與v-if配合使用。

v-show: 如果爲true,顯示信息，如果爲false則隱藏標籤。

v-for: 循環遍歷。語法形式爲 v-for=“item in list”

v-bind: 將值綁定到標籤的自定義屬性上，形式爲 v-bind:title="mytitle"，可以簡寫爲 :屬性名

v-on:click: 點擊事件，可以簡寫爲@click。

如下代碼爲v-bind的演示：

<head>
    <style>
        .cls{
            color: red;
        }
        .cls1{
            font-size: 30px;
        }
        .cls2{
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-bind:class="{cls:isCls}">這是一段話</p>
        <p :class="[one, two, {cls:isCls}]">這是一段話</p>
        <p :title="attr">這是一段話</p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            isCls: true,
            content: 'hello world',
            one: 'cls1',
            two: 'cls2',
            attr: '附加屬性'
        } 
    });
</script>

案例：1. 通過表單添加數據，渲染到列表中。

2. 遍歷數組和對象，並能刪除和更新。

三. 計算屬性與監視

3.1 計算屬性

計算屬性是用來存儲數據，而且數據可以進行邏輯操作，是基於其依賴的進行更新，只有在相關依賴發生變化的時候纔會更新變化，計算屬性是緩存的，只要相關依賴不發生變化，多次訪問屬性值是之前I計算得到的值，並不會多次執行。計算屬性的屬性名不需要納入到Vue的數據對象中。

3.2 監視器

所謂的監視器就是可以通過watch的方式觀察某個屬性的變化，然後做出相應的處理。

3.3 案例

FirstName: <input type="text" v-model="firstName"><br>
LastName: <input type="text" v-model="lastName"><br>
<hr>
FullName1(單向): <input type="text" v-model="fullName1"><br>
FullName2(單向): <input type="text" v-model="fullName2"><br>
FullName3(雙向): <input type="text" v-model="fullName3">

對應的js代碼如下：

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: ''
        },
        computed: { //計算屬性
            fullName1: function(){ 
                //當fullName1所依賴的數據發生改變的時候, 該方法會發生變化
                return this.firstName + ' ' + this.lastName; 
            },
            fullName3: {
                //當fullName1所依賴的數據發生改變的時候, 該方法會發生變化
                get(){
                    return this.firstName + ' ' + this.lastName;
                },
                //當fullName1的值發生變化的時候, 該方法被調用,value爲fullName1的值 
                set(value) {
                     let valArray = value.split(/\s/);
                     console.log(valArray.length);
                     this.firstName = valArray[0];
                     this.lastName = valArray[1];
                }
            }
        },
        watch: {
            // 第一個參數的值爲新的值，第二個參數爲舊的值
            firstName: function(newVal, oldVal) {
                this.fullName2 = newVal + ' ' + this.lastName;
            }
        },
    })

    vm.$watch('lastName', function(newVal, oldVal){
        this.fullName2 = this.firstName + ' ' + newVal;
    });

案例，實現如下效果：

四. 事件相關

4.1 事件修飾符

A. 阻止事件冒泡

一個盒子中嵌套另外一個盒子的時候，在內外層的盒子中都有有對應的事件行爲，當點擊內層盒子時候，默認情況下會觸發外層盒子的事件，這種默認的行爲就是事件冒泡。需要去阻止事件的冒泡。使用方法：

@click.stop="方法名"

B. 阻止事件的默認行爲

對於form表單來說，當點擊表單中的button的時候，會默認觸發表單的提交；對於a標籤，當點擊a標籤的時候，會觸發a標籤訪問。那麼如何去阻止a標籤的默認訪問行爲呢，使用方法是：

@click.prevent="方法名"

4.2 按鍵修飾符

<input @keyup.13="showInfo" v-model="info"><br>
<input @keyup.enter="showInfo" v-model="info"><br>

new Vue({
    el: '#app',
    data: {
        info: ''
    },
    methods: {
        showInfo(){
            alert(this.info);
        }
    }
 })

五. 過濾器

Vue中使用過濾器（Filters）來渲染數據是一種很有趣的方式，他不能替代Vue中的methods、computed或者watch，因爲過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾後的版本。在很多不同的情況下，過濾器都是有用的，比如儘可能保持API響應的乾淨，並在前端處理數據的格式。在你希望避免重複和連接的情況下，它們也可以有效地封裝成可重用代碼塊背後的所有邏輯。不過，在Vue 2.0中已經沒有內置的過濾器了，我們必須要自己來構建它們。過濾器只能用於插值表達式中。

5.1 全局過濾器

全局過濾器是隻通過 Vue.filter()的方式來定義的過濾器，用這種方式定義的過濾器可以被所有的Vue實例使用。

案例一：將數字轉換爲美元的形式。

<div id="app">
    <p>{{price | toUSD}}</p>
</div>
<script src="./vue.js"></script>
<script>
    Vue.filter('toUSD', function(value){
        return '$' + value;
    })
    new Vue({
        el: '#app',
        data: {
            price: 345.45
        }
    });
</script>

案例二：串聯過濾器，將數字四捨五入成兩位有效數字，然後轉換爲美元表達方式

<div id="app">
    <p>{{price | fix(2) | toUSD}}</p>
</div>
<script src="./vue.js"></script>
<script>
    //方法的第一個參數爲數據源，第二個爲保留幾位小數。
    Vue.filter('fix', (num, limit) => {
        return num.toFixed(limit);
    });
    //轉換爲美元表達方式
    Vue.filter('toUSD', function(value){
        return '$' + value;
    })
    new Vue({
        el: '#app',
        data: {
            price: 345.45
        }
    });
</script>

5.2 局部過濾器

局部過濾器是定義在Vue實例中，只能在指定的實例中才能使用。

案例：我們創建博客的時候，都會有文章列表，每篇博客將會有一個文章摘要，然後提供一個“閱讀更多”的功能。我們這個示例就是來創建一個名爲readMore的過濾器，它將把字符串的長度限制爲給定的字符數，並將其附加到你的選擇的後綴中。

<div id="app">
        <p>{{article | articleDisplay(20, '...')}}</p>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
        article: '17日，復旦大學國際政治系副教授沈逸在接受觀察者網採訪時，將15日啓動立法' + 
                  '程序阻撓政府解禁華爲的議員稱爲“槓精”和“戲精”，稱其是爲了在貿易問題上，' + 
                  '加大國會在白宮面前的存在感，是美國政治的一種內鬥形式，但最終，破壞的還是' + 
                  '美國企業的利益。'
        },
        filters: {
            // value爲數據源，length表示要展示的長度，suffix爲後綴
            articleDisplay(value, length, suffix) {
            return value.substring(0, length) + suffix;
        }
    }
})
</script>

練習：定義日期轉換的過濾器。

六. vue-cli構建項目與打包部署

使用vue-cli能夠快速的幫助我們構建項目，它就如同一個腳手架，提供了可選的模板。在使用vue-cli之前需要先安裝nodejs。

6.1 使用npm構建項目

npm install -g @vue/cli             #安裝vue-cli,該步驟需要等一段時間
vue -V                              #查看vue-cli的版本
vue create my-app                   #創建名爲my-app的項目

6.2 項目的結構介紹

public: 存放靜態文件。
src: 源碼文件，開發就在此目錄下。
.gitignore: git的配置文件。
babel.config.js: babel的配置文件，在創建項目的時候才用的腳手架爲bable。
package-lock.json：定義了依賴庫的下載位置，保證了在項目遷移部署環境的一致性。
package.json: 定義了該項目依賴的類庫。

6.3 項目的打包部署

執行命令：

npm run build

將生成的dist目錄下的文件放入到tomcat或者nginx下，啓動服務器，即可訪問。

七. 組件化開發

組件化開發是在ES6中提出的，可以提高頁面的複用率，提高開發效率，便於團隊協作，是一套模板化的代碼，要有<template>、<script>、<style>三個標籤，分別用來定義佈局、腳本和樣式。而且<template>下必須有一個根節點。

7.1 編寫App.vue和HelloWorld.vue

HelloWorld.vue

<template> 
    <div>  <!-- template的根節點，是必須的 -->
        <h1 class="title">{{msg}}</h1>
    </div>
</template>
<script>
    export default {   <!-- 向外保留成員，表示向外暴露該組件 -->
        data() {
            return {
                msg: 'Hello World'
            }
        } 
    }
</script>
<style>
    .title{
        color: red;
    }
</style>

App.vue

<template>
    <div>
        <p>{{article}}</p>
        <Helloworld></Helloworld> <!-- 在Helloworld.vue中的組件 -->
    </div>
</template>
<script>
/**
 * 引入HelloWorld.vue組件，使用Helloworld變量來接收，接收變量的組件
 * 可以叫任何名字，但是推薦使用和導入組件保持一致。
 */
import Helloworld from './components/HelloWorld.vue'

export default {
    /**
     *  需要在當前組件中來定義引入的組件，接收的形式可以有二種：
     * 
     *  components: {HelloWorld} 最原始的寫法爲{Helloworld:Helloworld},第一個Helloworld
     *     在當前組件中使用的名字，可以隨意更改，第二個Helloworld是上面import引入的時候用來接收的變
     *     量名。如果只寫一個表示當前組件中使用的名字和變量名一致。 
     */
    components: {Helloworld},
    data(){   //組件化編程必須使用定義data方法
        return {
            article: '路透社20日援引伊朗法爾斯通訊社消息稱'
        };
    }
}
</script>
<style>
</style>

7.2 定義入口JS文件

import Vue from 'vue'        //引入vue
import App from './App.vue'  //引入自己定義的App.vue,使用變量App來接收

new Vue({
    render: h => h(App),  //將App組件渲染到index.html中。
}).$mount("#app")

render是Vue中的一個方法，方法的定義形式如下：

// render最原始的，而傳入的參數createElement又是一個函數，用來生成dom結構
render: function(createElement){
    
}
// 按照ES6的箭頭函數的寫法，進行第一次演變
render: createElement => createElement(模板)
// 將上面的createElement變爲h，那麼就得到最終的形式
render: h => h(App)

$mount("#id")該方法的作用是先實例化Vue對象，接着在掛載到指定Id的節點上，和在new Vue的時候使用el指定要渲染的節點的形式是一樣的，只是換了種形式而已。

vue 基礎（一）

VUE

一. 開發工具

二. 第一個VUE程序

二. 基本指令

三. 計算屬性與監視

四. 事件相關

五. 過濾器

六. vue-cli構建項目與打包部署

七. 組件化開發

java切面編程：spring aop的簡單使用（二）

關於java網絡編程socket的回顧

java切面編程:概念部分（一）

Spring-boot的簡單實例

Docker進階（含springcloud的docker-compose的簡單實例）

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結