Vue:渲染、指令、事件、組件、Props

時間 2019-11-20

標籤 vue 渲染指令事件組件 props 简体版

原文原文鏈接

若是要我用一句話描述使用 Vue 的經歷，我可能會說「它如此合乎常理」或者「它提供給我須要的工具，並且沒有妨礙個人工做」。每當學習 Vue 的時候，我都很高興，由於頗有意義，並且很優雅。html

以上是我對 Vue 的介紹。在我第一次學習 Vue 的時候，我就想要這樣的文章vue

我喜歡 Vue 的一點是它吸收了其它框架的優秀之處，並有條不紊的將它們組合在一塊兒。react

具備響應式組件化的虛擬 DOM 只提供視圖層， props 和類 Redux 狀態管理與 React 相似。git
條件渲染和服務與 Angular 相似。github
受到 Polymer 簡潔及性能方面的啓發，Vue 提供了相似的模式，好比 HTML，樣式以及 JavaScript 組合在一塊兒。api

Vue 相比其它框架的優點有: 簡潔，提供更多語義化的 API ，比 React 的表現稍好，不像 Polymer 那樣使用 polyfill，相比 Angular 有獨立的視圖。數組

我還能舉一些例子，可是你最好讀一下這篇綜合的、社區推進的文章對比其它框架。這篇文章值得一讀，可是若是你想先看代碼，你也能夠先跳過，之後再讀。app

開始吧！

仍是從 "Hello, world!" 的例子開始。運行以下示例：框架

HTML：異步

<div id="app">
  {{ text }} Nice to meet Vue.
</div>

CSS：

body {
  font-family: 'Bitter', serif;
}

#app {
  text-align: center;
  padding: 70px;
  font-size: 22px;
  max-width: 360px;
  margin: 0 auto;
  display: table;
}

Vue.js

new Vue({
  el: '#app',
  data: {
    text: 'Hello World!'
  }
})

若是你熟悉 React，你會發現二者有不少相同之處。經過 mustache 模板以及使用一個變量，能夠避免在內容中使用 JavaScript，可是不一樣的一點是咱們直接書寫 HTML 而不是 JSX 。雖然 JSX 易於使用，可是我無需再花時間把 class 改爲 className，等等。這樣啓動及運行會更輕量。

如今嘗試一下我喜歡的 Vue 的特性: 循環以及條件渲染。

條件渲染

假若有一組元素，相似導航條，我打算重複利用。合理的作法是放在數組中動態的更新。使用普通的 JS (須要 Babel) ，咱們會這樣作: 建立一個數組，而後建立一個空字符串，用來存放使用 <li> 包裹的元素，再用 <ul> 包裹全部內容，使用 innerHTML 方法添加到 DOM 中：

HTML:

<div id="app">
    <ul>
        <li v-for="item in items">
            {{item}}
        </li>
    </ul>
</div>

Vue.js:

new Vue({
   el:"#app",
   data:{
       items:[
           'thingie',
           'another things',
           'lots of stuff',
           'yadda yadda'
       ]
   }
})

很是簡潔。若是你熟悉 Angular，你對此應該不陌生。我發現這種條件渲染的方式簡單明瞭。若是你須要更新內容，修改起來也很簡單。

另一種好的方式是使用 v-model 進行動態綁定。試試下面的例子：

HTML：

<div id="app">
    <h3>Type here:</h3>
    <textarea v-model="message" class="message" rows="5" maxlength="72"></textarea>
    <p class="booktext">{{message}}</p>
</div>

Vue.js

new Vue({
    el:"#app",
    data:{
        message:"this is a good place top type"
    }
})

在這個 Demo 中你會注意到兩點。首先，能夠直接向書中打字而且動態更新文本。Vue 經過 v-model 很是方便的實現了 <textarea> 和 <p> 的數據綁定。

並非只有簡單的輸入綁定，甚至 v-if 能夠用 v-show 替換，有 v-show 的元素不是銷燬或重建組件，而是始終保持在 DOM 中，切換可見性。

Vue 提供了不少指令 , 下面是我常用的一些指令。不少指令都有縮寫，因此我會一塊兒列出來。在以後的教程中，咱們主要使用指令縮寫，因此最好先熟悉一下下面的表格。

也有很是好的事件修飾符和其餘 API

加快開發的方法：

@mousemove.stop 和 e.stopPropogation() 相同
@mousemove.prevent 相似於 e.preventDefault()
@submit.prevent 提交時再也不從新加載頁面
@click.once 不要和 v-once 混淆，這個 click 事件只觸發一次
v-model.lazy 不會自動填充內容，它將在事件發生時綁定

事件處理

數據綁定雖然很好，可是沒有事件處理也沒法發揮更大的用途，所以接下來就試一試! 這是我喜歡的一部分。咱們將使用上面的綁定和監聽器來監聽 DOM 事件。

在應用程序中有幾種不一樣的方法來建立可用的方法。好比在普通的 JS 中，你能夠選擇函數名，可是實例方法直觀地稱爲 methods！

<div id="app">
   <p><button @click="increment">+</button><br>{{counter}}</p>
</div>

new Vue({
    el:"#app",
    data:{
        counter:0
    },
    methods:{
        increment:function(){
            this.counter++
        }
    }
})

咱們建立了一個名爲 increment 的方法而且你會注意到函數自動綁定了 this ，會指向實例及組件中的 data 。我喜歡這種自動綁定，不須要經過 console.log 查看 this 的指向。咱們使用縮寫 @click 綁定 click 事件。Methods 並非建立自定義函數的惟一方式。你也可使用 watch 。二者的區別是 methods 適合小的、同步的計算，而 watch 對於多任務、異步或者響應數據變化時的開銷大的操做是有利的。我常常在動畫中使用 watch 。

讓咱們看看如何傳遞事件而且進行動態地樣式綁定。若是你記得上面的表格，你可使用 : 來代替 v-bind ，所以咱們能夠很簡單地經過 :style 以及傳遞狀態，或者 :class 綁定樣式 (以及其餘屬性)。這種綁定確實有不少用途。

<div id="app">
   <p>
       <button @click="increment">+</button>
       <br>
       {{counter}}
       <br>
       <button @click="decrement">-</button>
   </p>
</div>

    new Vue({
        el:"#app",
        data:{
            counter:0,
        },
        methods:{
            increment:function(){
                this.counter++
            },
            decrement:function(){
                this.counter--
            }
        }
    })

你應該看到咱們甚至不須要傳遞 @click 事件，Vue 將它做爲方法的參數(這裏顯示爲 e )自動傳遞。

此外，原生方法也可使用，好比 event.clientX，而且很容易關聯 this 實例。在元素的樣式綁定中，CSS 屬性須要使用駝峯命名。在這個例子中，你能夠看到 Vue 的簡單明瞭。

組件和傳遞數據

若是你熟悉 React 或者 Angular2，組件思想和傳遞狀態對你並不陌生。若是不是，讓咱們先了解一些主要概念。

大小網站一般由不一樣的部分組成，而且抽象成更小的部分更容易佈局、重用、並使得咱們的代碼更清晰。爲了不在冗長的多層次的頁面中搜尋標籤，咱們能夠這樣構建組件：

<header></header>
<aside>
    <sidebar-item v-for="item in items"></sidebar-item>
</aside>
<main>
    <blogpost v-for="post in posts"></blogpost>
</main>
<footer></footer>

這是一個簡單的例子，可是你能夠看到這種組合方式在開始構建網站結構時的用途。若是你要維護這些代碼，你能夠很容易的瞭解程序的結構而且找到每一部分。著做權歸做者全部。

Vue 有多種建立組件的方式。讓咱們從易到難，而複雜的例子就是一個普通的 Vue 程序。

下面是我能作的最簡單的例子，因此很是容易理解。

記住 HTML 中的 :text 是 Vue 綁定的縮寫。咱們在指令部分的最後提到過。綁定能夠用於全部方面，可是在這個實例中，這樣作的好處是不須要把狀態放在 mustache 模板中, 好比 {{ message }}。

在下面的代碼中，Vue.component 是組件， new Vue 稱爲實例。一個程序中能夠有多個實例。一般狀況下，咱們會有一個實例和多個組件，由於實例是主要應用程序。

<div id="app">
    <child :text="message"></child>
</div>

    Vue.component('child', {
        props: ['text'],
        template: '<div>{{ text }}</div>'
    });

    new Vue({
        el: '#app',
        data: {
            message: 'Hello Mr. Magoo'
         }
    })

如今咱們能夠在程序中隨意使用這個組件：

HTML：

<div id="app">
    <h3>
        <button @click="increment">+</button>
        Adjust the data
        <button @click="decrement">-</button>
    </h3>
    <h2>This is the app data: <span class="num">{{ count }}</span></h2>
    <h4>
        <child :count="count"></child>
    </h4>
    <p>This is a child counter that is using a static integer as props</p>
    <h4>
        <child :count="count"></child>
    </h4>
    <p>This is the same child counter and it is using the vue instance data as props</p>
</div>

Vue.js

    Vue.component('child', {
        props: ['count'],
        template: '<div class="num">{{ count }}</div>'
    });

    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            increment:function(){
                this.count++
            },
            decrement:function(){
                this.count--
            }
        }
    })

區別在於你是否傳遞了一個屬性並綁定它：

沒有使用狀態：<child count="1"></child>
使用狀態：<child :count="count"></child>

再看一個案例：

HTML：

<div id="app">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-post-photo.jpg" alt="" class="main-photo" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-main-profile.jpg" alt="" class="main-profile" />
    <div class="main-info">
        <span class="name">Julianne Delfina</span>
        <h3>"It's lovely after it rains"</h3>
    </div>
    <ul>
        <li
                is="individual-comment"
                v-for="comment in comments"
                v-bind:commentpost="comment"
                ></li>
    </ul>
    <input
            v-model="newComment"
            v-on:keyup.enter="addComment"
            placeholder="Add a comment" />
</div>

Vue.js

Vue.component('individual-comment', {
        template: '<li>{{ commentpost }}</li>',
        props: ['commentpost']
    });

    new Vue({
        el: '#app',
        data: {
            newComment: '',
            comments: [
                'Looks great Julianne!',
                'I love the sea',
                'Where are you at?'
            ]
        },
        methods: {
            addComment: function () {
                this.comments.push(this.newComment);
                this.newComment = ''
            }
        }
    })

<---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

Vue系列教程