Vue 學習記錄一

zs4336發表於2019-11-23
Vue

安裝

vue的安裝有兩種方式，一是直接使用<script>標籤引入vue.js，如果是使用這種方式最好是把原始碼下載下來，然後自己部署。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

另外一種方式，也是官方推薦的一種方式通過cli命令列工具進行快速搭建腳手架，但在開發專案的時候，會存在不同專案使用的vue版本也不同，這裡我比較推薦使用nvm，它是node版本管理器，可是快速實現版本切換，這裡就不在過多的描述，有興趣的小夥伴可以參考我的另外一篇文章Windows 上 nvm 的安裝與使用。言歸正傳，那麼怎麼使用cli快速搭建專案呢，請參考我的另外一篇文章使用 vue-cli3 建立專案並引入 element。當然，有什麼疑問可以查閱官方文件。

npm install -g @vue/cli

Vue的基礎知識

vue 例項

每個 Vue 應用都是通過 Vue 函式傳入一個選項物件來建立一個新的 Vue 例項開始的

 const app = new Vue({
    el:'#app',
    data(){
        return {

        }
    },
    methods:{

    }
 })

詳細的Vue例項選項如下圖所示
例項選項

值得注意的是只有當例項被建立時就已經存在於data中的屬性才是響應式的

常用語法

1、當我們想將資料插入到標籤內的時候可以使用“Mustache”語法 (雙大括號) 的文字插值

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

<script>
    const app = new Vue({
        el:'#app',
        data(){
            return {
                msg:'nothing is impossible',
            }
        }
    });
</script>

2、有候我們想直接輸出後端返回的html

<div id="app">
    <span v-html="html"></span>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data(){
            return {
                html:`<span>nothing is impossible<span>`,
            }
        }
    });
</script>

3、有時候我們想設定html標籤屬性或者處理事件的時候，需要使用指令v-bind

<div id="app">
    <image v-bind:src="url" v-on:click="changeImg"></image>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data(){
            return {
                url:`some url`,
            }
        },
        methods:{
            changeImg:() => { this.url = `another url` }
        }
    });
</script>

v-bind 可以簡寫為:，v-on可以簡寫為@
指令可以分為區域性指令和全域性指令，指令的組成包括：指令名，指令引數，指令值，指令修飾符等。

計算屬性，方法與偵聽器

1、計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值
2、有的時候我們需要設定計算屬性的getter與setter 

const app = new Vue({
    el:'#app',
    data(){
        return {
            odds:[1,3,5,7],
            firstName:'佚',
            lastName:'名'
        }
    },
    computed:{
        //當evens的依賴項 odds 沒有變化的時候，evens取得都是第一次計算後的快取值
        evens(){
            return this.odds.map(item => item + 1);
        },
        fullName: {
            // getter
            get: function () {
              return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
              var names = newValue.split(' ')
              this.firstName = names[0]
              this.lastName = names[names.length - 1]
            }
        }
    }
})

當需要在資料變化時執行非同步或開銷較大的操作時，可以使用偵聽器

const app = new Vue({
    el:'#app',
    data(){
        return {
            id:0,
            entity:null,
        }
    },
    watch:{
        id(newValue,oldValue){
            //執行非同步操作
            this.getEntityById(newValue);
        }
    },
    methods:{
        getEntityById(id){
            //執行非同步操作
            this.entity = 'result';
        }
    }
})

趁還沒掉光，趕緊給每根頭髮起個名字吧~

相關文章