Vue基本的語法

Vue的基本代碼結構及插值表達式（Mustache）

<body>
    <!-- Vue 實例所控制的元素區域 -->
    <div id="app">
        {{ message }}
    </div>
    <script>
        //創建一個Vue的實例
        var vm = new Vue({
            el: '#app',// 表示當前new的這個Vue實例要控制頁面上的哪個區域
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

Vue指令之`v-text`和`v-html`

<body>
    <div id="app">
        <div>{{ msg }} - I'm coming</div>
        <div v-text='htmlText'>I'm coming</div>
        <div v-html="htmlText"></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                htmlText: '<h1>我是一個大標題</h1>'
            }
        })
    </script>
</body>

Vue指令之`v-bind`的三種用法

直接使用指令 v-bind
使用簡化指令 :
在綁定的時候，拼接綁定內容：:title="btnTitle + ', 這是追加的內容'"

<body>
    <div id="app">
        <div>{{ msg }} - I'm coming</div>
        <div v-text='htmlText'>I'm coming</div>
        <div v-html="htmlText"></div>
        <div v-html="htmlText" v-bind:title="msg"></div>
        <div v-html="htmlText" :title="msg"></div>
        <div v-html="htmlText" :title="msg+' I am coming'"></div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                htmlText: '<h1>我是一個大標題</h1>'
            }
        })
    </script>
</body>

Vue指令之`v-on`和`跑馬燈效果`

<body>
    <div id="app">
        <h3>{{info}}</h3>
        <input type="button" value="開啓" v-on:click="start">
        <input type="button" value="停止" @click="stop">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                info: '猥瑣發育，別浪~！',
                intervalId: null
            },
            methods: {
                start() {
                    if (this.intervalId != null) { // 如果當前有定時器在運行，則直接return
                        return;
                    }
                    this.intervalId = setInterval(() => { // 開始定時器
                        this.info = this.info.substring(1) + this.info.substring(0, 1);
                    }, 200);
                },
                stop() {
                    clearInterval(this.intervalId);
                }
            }
        });
    </script>
</body>

Vue指令之`事件修飾符`

.stop 阻止冒泡
.prevent 阻止默認事件
.capture 添加事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回調
.once 事件只觸發一次

<body>
    <style type="text/css">
        .inner {height: 150px;background-color: darkcyan;}
        .outer {padding: 40px;background-color: blue;}
    </style>
    <div id="app">
        <h4>正常事件</h4>
        <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>
        <h4> 使用 .prevent 阻止默認行爲</h4>
        <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a>
        <h4> 使用 .capture 實現捕獲觸發事件的機制</h4>
        <div class="inner" @click.capture="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>
        <h4> 使用 .once 只觸發一次事件處理函數 </h4>
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a>
        <h4> 使用 .stop 阻止冒泡 </h4>
        <div class="outer" @click="div2Handler">
            <div class="inner" @click="div1Handler">
                <input type="button" value="戳他" @click.stop="btnHandler">
            </div>
        </div>
        <h4> 使用 .self 只會阻止自己身上冒泡行爲的觸發，並不會真正阻止冒泡的行爲 </h4>
        <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="div1Handler">
                <input type="button" value="戳他" @click="btnHandler">
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div1Handler() {
                    console.log('這是觸發了 inner div 的點擊事件')
                },
                btnHandler() {
                    console.log('這是觸發了 btn 按鈕 的點擊事件')
                },
                linkClick() {
                    console.log('觸發了連接的點擊事件')
                },
                div2Handler() {
                    console.log('這是觸發了 outer div 的點擊事件')
                }
            }
        });
    </script>
</body>

Vue指令之`v-model`和`雙向數據綁定`

<body>
    <div id="app">
        <h4 v-text="msg"></h4>
        <input type="text" v-model="msg">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg:"我是初始值"
            },
        });
    </script>
</body>

Vue指令之`v-for`和`key`屬性

迭代數組

<ul>
  <li v-for="(item, i) in list">
  索引：{{i}} - 姓名：{{item.name}} - 年齡：{{item.age}}
  </li>
</ul>

迭代對象中的屬性

<div v-for="(val, key, i) in user">{{val}}-{{key}}-{{i}}</div>

迭代數字

<p v-for="i in 10">這是第 {{i}} 個P標籤</p>

key與列表篩選

爲了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要爲每項提供一個唯一 key 屬性。

<body>
    <div id="app">
        <div>
            <label>Id:
                <input type="text" v-model="id">
            </label>
            <label>Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" value="添加" @click="add">
        </div>
        <!-- search(name)  :key="item.id"-->
        <p v-for="item in list" >
            <input type="checkbox">{{item.id}} --- {{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '蓋倫' },
                    { id: 2, name: '寒冰' },
                    { id: 3, name: '瑞茲' },
                ]
            },
            methods: {
                add() { // 添加方法
                    this.list.unshift({ id: this.id, name: this.name })
                    this.id=this.name='';
                },
                search(name) {
                    return this.list.filter(x => {
                        return x.name.indexOf(name) != -1;
                    });
                }
            }
        });
    </script>
</body>

Vue指令之`v-if`和`v-show`

v-if：每次都會重新刪除或創建元素有較高的切換性能消耗
v-show: 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式有較高的初始渲染消耗

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <h3 v-if="flag">這是用v-if控制的元素</h3>
    <h3 v-show="flag">這是用v-show控制的元素</h3>
  </div>
  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
    });
  </script>
</body>

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。

使用內聯樣式

直接在元素上通過 `:style` 的形式，書寫樣式對象

<h1 :style="{color: 'red','font-size':'40px'}">這是一個H1</h1>

將樣式對象，定義到 `data` 中，並直接引用到 `:style` 中

在data上定義樣式：

data: {
  h1StyleObj: { color: 'red', 'font-size': '40px' }
}

在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="h1StyleObj">這是一個H1</h1>

在 `:style` 中通過數組，引用多個 `data` 上的樣式對象

在data上定義樣式：

data: {
  h1StyleObj: { color: 'red', 'font-size': '40px'},
  h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個H1</h1>

Vue自定義過濾器

Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示；

私有過濾器

<body>
    <div id="app">
        <select v-model="message">
            <option value="1">開心</option>
            <option value="2">失落</option>
            <option value="3">狂躁</option>
        </select>
        <p>選中值： {{message}}</p>
        <p :title="message | tran('我很')">翻譯後： {{ message | tran('我很')}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            filters: {
                tran(str, mood = "") {
                    switch (str) {
                        case "1": mood = mood + '開心';
                            break;
                        case "2": mood = mood + '失落';
                            break;
                        case "3": mood = mood + '狂躁';
                            break;
                        default: mood = "";
                    }
                    return mood;
                }
            }
        })
    </script>
</body>

全局過濾器

Vue.filter('tran', function (str, mood = "") {...})

注意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用！

Vue自定義指令

詳見官網api

Vue過渡動畫

詳見官網api

Vue生命週期函數

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }，
  ...
})

Vue組件

定義Vue組件

什麼是組件：組件的出現，就是爲了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件即可；
組件化和模塊化的不同：

模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的職能單一；
組件化：是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用；

Vue組件的定義

全局定義的三種方式

使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
  template: '<h1>登錄</h1>'
});
Vue.component('login', login);

直接使用 Vue.component 方法：

Vue.component('register', {
  template: '<h1>註冊</h1>'
});

將模板字符串，定義到script標籤種：

<script id="tmpl" type="x-template">
  <div><a href="#">登錄</a> | <a href="#">註冊</a></div>
</script>
//同時，需要使用 Vue.component 來定義組件
Vue.component('account', {
  template: '#tmpl'
});

注意：組件中的DOM結構，有且只能有唯一的根元素（Root Element）來進行包裹！

使用`components`屬性定義局部子組件

<body>
    <div id="app">
        <!-- 組件的引用 -->
        <account></account>
    </div>
    <script>
        // 創建 Vue 實例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: { // 定義當前實例的子組件
                account: { // account 組件
                    template: '<div><h1> 這是Account組件{{ name }}</h1 ><login></login></div > ',
                    components: { // 定義account 組件的子組件
                        login: {
                            template: "<h3>這是登錄組件</h3>"
                        },
                        regist: {
                            template: "<h3>這是註冊組件</h3>"
                        }
                    }
                }
            }
        });
    </script>
</body>

組件中展示數據和響應事件

在組件中，data需要被定義爲一個方法並返回一個對象，例如：

Vue.component('account', {
    template: '#tmpl',
    data() {
        return {
            msg: '大家好！'
        }
    },
    methods: {
        login() {
            alert('點擊了登錄按鈕');
        }
    }
});

在子組件中，如果將模板字符串，定義到了script標籤中，那麼，要訪問子組件身上的data屬性中的值，需要使用this來訪問；

組件切換使用`component`標籤，來引用組件，並通過`:is`屬性來指定要加載的組件

<body>
    <style>
        .v-enter,.v-leave-to {opacity: 0;transform: translateX(30px);}
        .v-enter-active,.v-leave-active { position: absolute;transition: all 0.3s ease;}
    </style>
    <div id="app">
        <a href="#" @click.prevent="comName='login'">登錄</a>
        <a href="#" @click.prevent="comName='regist'">註冊</a>
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>
    </div>
    <script>
        // 創建 Vue 實例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                comName:'login'
            },
            methods: {},
            components: { // 定義當前實例的子組件
                login: {
                    template: "<h3>這是登錄組件</h3>"
                },
                regist: {
                    template: "<h3>這是註冊組件</h3>"
                }
            }
        });
    </script>
</body>

Vue組件間的傳值

父組件向子組件傳值

注意：一定要使用props屬性來定義父組件傳遞過來的數據

<body>
    <div id="app">
        <son :finfo="msg"></son>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '這是父組件中的消息'
            },
            components: {
                son: {
                    template: '<h1>這是子組件 - {{finfo}}</h1>',
                    props: ['finfo']
                }
            }
        });
    </script>
</body>

子組件向父組件傳值

原理：父組件將方法的引用，傳遞到子組件內部，子組件在內部調用父組件傳遞過來的方法，同時把要發送給父組件的數據，在調用方法的時候當作參數傳遞進去；
父組件將方法的引用傳遞給子組件，其中，getMsg是父組件中methods中定義的方法名稱，func是子組件調用傳遞過來方法時候的方法名稱
子組件內部通過this.$emit('方法名', 要傳遞的數據)方式，來調用父組件中的方法，同時把數據傳遞給父組件使用實例如下：

<body>
    <div id="app">
        <p v-text="msg"></p>
        <son @func="getMsg" :finfo="msg"></son>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '這是父組件中的消息'
            },
            methods: {
                getMsg(val){
                    this.msg = val;
                }
            },  
            components: {
                son: {
                    template: `
                    <div>
                        <input type="text" v-model="finfo" />
                        <input type="button" value="向父組件傳值" @click="sendMsg" />
                    </div>
                    `,
                    methods: {
                        sendMsg(){
                            this.$emit('func', this.finfo);
                        }
                    },
                    props: ['finfo']
                }
            }
        });
    </script>
</body>

Vue-Router的使用

什麼是路由

對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；
對於單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；
在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

vue-router的基本使用

導入 vue-router 組件類庫：

<script src="./lib/vue-router-3.0.1.js"></script>

使用 router-link 組件來導航

<router-link to="/login">登錄</router-link>
<router-link to="/regist">註冊</router-link>

使用 router-view 組件來顯示匹配到的組件

<router-view></router-view>

創建使用Vue.extend創建組件

var login = Vue.extend({
    template: '<h1>登錄組件</h1>'
});
var regist = Vue.extend({
    template: '<h1>註冊組件</h1>'
});

創建一個路由 router 實例，通過 routers 屬性來定義路由匹配規則

var router = new VueRouter({
    routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: login },
    { path: '/regist', component: register }
    ]
});

使用 router 屬性來使用路由規則

var vm = new Vue({
    el: '#app',
    router: router // 使用 router 屬性來使用路由規則
});

完整示例

<body>
    <div id="app">
        <router-link to="/login">登錄</router-link>
        <router-link to="/regist">註冊</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = Vue.extend({
            template: '<h1>登錄組件</h1>'
        });
        var regist = Vue.extend({
            template: '<h1>註冊組件</h1>'
        });
        var router = new VueRouter({
            routes: [
                
                { path: '/login', component: login },
                { path: '/regist', component: regist }
            ]
        });
        var vm = new Vue({
            el: '#app',
            router: router
        });
    </script>
</body>

使用`redirect`實現重定向

{ path: '/', redirect: '/login' }

在路由規則中定義參數

定義參數`:參數名`

{ path: '/register/:id', component: register }

獲取參數`this.$route.params`

var regist = Vue.extend({
    template: '<h1>註冊組件 --- {{this.$route.params.id}}</h1>'
});

使用 `children` 屬性實現路由嵌套

 var router = new VueRouter({
    routes: [
        { path: '/', redirect: '/account/login' }, 
        {
            path: '/account',
            component: account,
            // 通過 children 數組屬性，來實現路由的嵌套
            children: [ 
                // 注意，子路由的開頭位置，不要加 / 路徑符
                { path: 'login', component: login }, 
                { path: 'regist', component: regist}
            ]
        }
    ]
});

用Vue-cli3初始化一個Vue項目

安裝

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安裝之後，你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗證它是否安裝成功。

創建一個項目

運行以下命令來創建一個新項目：

vue create hello-world

你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。

通過 vue ui 命令以圖形化界面創建和管理項目
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UTd8PTGp-1575449673653)(https://cli.vuejs.org/ui-new-project.png)]

使用命令啓動或打包

在一個 Vue CLI 項目中，@vue/cli-service 安裝了一個名爲 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。

這是使用默認 preset 的項目的 package.json：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

通過 npm 或 Yarn 調用這些 script：

//啓動項目
npm run serve
# OR
yarn serve
//打包項目
npm run build
# OR
yarn build

build會在 dist/ 目錄產生一個可用於生產環境的包，帶有JS/CSS/HTML的壓縮

Ant Design of Vue 組件庫的基本使用

整理中…

Ant Design Pro of Vue 的基本使用

整理中…

碼客斯基

發佈了11 篇原創文章 · 獲贊 78 · 訪問量 14萬+

私信關注

Vue從入門到實踐應用