vue學習筆記--day1

時間 2019-12-07

標籤 vue 學習筆記 day1 day 简体版

原文原文鏈接

最近開始慢慢接觸vue的學習，但願天天能記錄一下學習的內容，好記性不如爛筆頭。

vue中的代碼與MVVM的關係

首先咱們解釋一下什麼的是MVVM，MVVM是針對前端而言的一種模式，目前流行的框架都是這種模式，分爲三層，即M層（數據層），V層（顯示層）以及VM層（將數據同步到頁面顯示，並將頁面上的修改同步到數據層）。html

<body>
<!--須要進行渲染的部分，即MVVM中的V層-->
<div id="app">{{message}}</div>

<script>
    //建立一個vue實例，用來控制頁面中id爲app的元素
    //整個的vm實例就想至關因而VM層，用來控制將數據傳輸到V層
    var vm = new Vue({
        el: '#app',
        //這裏的data就至關因而M層，用來控制數據
        data: {
            message: '歡迎使用vue！'
        }
    })
</script>
</body>

上面的代碼很好地解釋了在vue中怎樣實現MVVM模式的，使用vue就不須要再像之前使用jQuery那樣去操做DOM來顯示數據，相對來講會方便不少。前端

vue中展現信息的3種方式之間的區別

vue中展現信息有三種方式，包括：vue

使用插值表達式的形式（也叫雙括號）--{{}}
使用v-text='變量'的形式
使用v-html='變量'的形式

這三種方式均可以進行數據展現，區別在於當網速比較慢的時候，使用{{}}會有閃爍的問題，這時須要使用v-cloak命令去解決這個問題，而v-text就不會出現這個問題，可是v-text不能在該變量的先後添加文本，即在標籤中的內容是不會顯示的，這個時候採用{{}}會更加合適；v-html更適合於變量中有標籤須要進行編譯的狀況。app

v-bind指令的做用

v-bind指令是用來綁定屬性的，若是在標籤中的某個屬性前面使用了v-bind，說明該屬性等號後面是一個變量，而且等號後面能夠直接寫js表達式，有時也會將v-bind:簡寫成:框架

//下面兩行代碼的實現效果相同
    <input type="button" v-bind:title="msg3+'按鈕'" value="測試按鈕">
    <input type="button" :title="msg3+'按鈕'" value="測試按鈕">
    
    //若是不使用v-bind，那麼提示信息就是title屬性後面的字符串
    <input type="button" title="msg3" value="測試按鈕">

v-on指令的做用

v-on指令是用來綁定事件機制的，前提是須要在實例的methods對象中進行定義，v-on：後面接的是事件類型，例如click等，等號後就是綁定的事件，以下面代碼所示：函數

<!--在vue中使用v-on來提供事件綁定機制，在等號後面放的是綁定的方法名，須要在實例的methods對象中進行定義-->
    <p v-on:click="show">這是能夠點擊的p字段</p>
    
    methods:{
            show: function () {
                alert('Hello vue!')
            }
        }

上面代碼的意思就是在p標籤中綁定一個click事件，當點擊該p標籤時，就會彈出顯示Hello vue!的對話框。學習

vue實現走馬燈的效果

實現效果是，點擊開始按鈕，文字會進行滾動，點擊結束，文字中止滾動（主要是對以前的內容進行綜合運用，並添加了一個this的用法）測試

<div id="test">
        <input type="button" value="開始" @click = 'active'>
        <input type="button" value="結束" @click = 'stop'>
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#test',
            data: {
                msg: '快跑吧，天要下雨了！！！',
                intervalId: null
            },
            methods: {
                active(){
                    if(this.intervalId !== null) return;

                    this.intervalId = setInterval(() => {
                        console.log(this.msg)
                        start = this.msg.substring(0,1)
                        end = this.msg.substring(1)
                        this.msg = end + start
                    },400)
                },
                stop(){
                    clearInterval(this.intervalId)
                    this.intervalId = null;
                }
            }
        })
        
    </script>

該例子說明，在實例中，this指向的就是該實例，能夠經過this去獲取data中的任何屬性值，在methods中不一樣的方法之間變量是不能夠共享的，解決方法就是將該變量添加到this上，而後經過this去獲取該值。還有一個問題就是在定時器中，this的指向會發生改變，有兩種解決方案，第一種是在定時器外面將this的值用變量保存起來，第二種是使用箭頭函數，利用箭頭函數中的this是指向上下文的這一點調整this指向。this