Hello Vue: Vue快速入門教程

時間  2020-02-06
標籤 hello vue 快速 入門 教程 简体版
原文   原文鏈接

Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。但願經過此教程可以成爲你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，若是你感興趣能夠深刻學習下去。css

本教程針對的是第一次使用Vue資源管理器。我將向您展現如何使用Vue建立一個簡單的示例，而後我將添加一些交互性和UI組件，最後添加更多功能和Kendo UI組件。雖然本教程演示很是基礎，但它概述了使用Vue添加特性和功能的全部關鍵元素。擴展演示代碼並交換更復雜的組件很是容易。個人例子，如Vue自己，是可擴展的。html

ps: 框架的名稱在技術上是「Vue.js」，有些地方甚至會修改版本號以得到「Vue.js 2」，但大多數人只是在經常使用中使用「Vue」。本教程側重於語言，並未涵蓋更重要的Vue-cli等高級主題，但應該在之後會有介紹。vue

讓咱們開始吧!jquery

Hello, world!

首先，讓咱們先來了解一下開始使用Vue是多麼容易。咱們將從流行的「hello，world」應用程序的Vue實現開始。git

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Clash</title>
  <!-- the star of the show - the Vue library! -->
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    // when life is settled, load up the fun stuff
    document.addEventListener('DOMContentLoaded', function () {
      new Vue({
        el: '#sg1',
        // define data - initial display text
        data: {
          m1: "You got to let me know"
        }
      })
    })
  </script>
</head>
<body>
  <!-- text -->
  <div id="sg1">
    <p>{{ m1 }}</p>
  </div>
</body>
</html>

咱們作了什麼

首先，在文檔<head>中，咱們給它標題。可是寫標題是一個不應被遺忘的好習慣。github

接下來，咱們從CDN加載Vue庫。當你開始使用時，你可能會切換到npm（這是Vue的[推薦安裝方法]（https://vuejs.org/v2/guide/in...）），但CDN是最簡單和最便攜的方式。ajax

首先，讓咱們跳到文檔<body>。在這裏，咱們有一個<div id =「sg1」>的元素。npm

<div id="sg1">
  <p>{{ m1 }}</p>
</div>

Vue的核心是可以使用簡單的模板語法以聲明方式將數據呈現給DOM。數組

跳回到文檔<head>，咱們看到一些代碼在經過設置事件監聽器加載DOM時觸發。若是你來自jQuery世界，這就像$（document）.ready（）`,但在這裏沒有jQuery。babel

接下來，咱們有咱們的Vue代碼，這裏所作的就是設置「m1」的內容：

new Vue({
  el: '#sg1',
  // define data - initial display text
  data: {
    m1: "You got to let me know"
  }
})

咱們從這裏開始使用Vue（）函數建立一個新的Vue實例。有了這個，咱們傳遞它配置。在這裏，咱們只在數據部分設置m1的初始值。 （稍後會詳細介紹。）咱們還告訴它咱們想要使用哪一個元素，el：'＃sg1'相似於document.getElementById（'＃sg1'）。

當咱們運行它時，咱們獲得：

clipboard.png

這很簡單，但不是頗有用。可是，它確實讓咱們瞭解如何設置Vue應用程序。到目前爲止，它看起來並無太大的不一樣。可是這裏發生了一些有趣的事情，咱們尚未看到。咱們將探討下一個例子中的內容。

增長交互性

接下來，咱們添加一個按鈕。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Clash</title>
  <!-- the star of the show - the Vue library! -->
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    // some data we'll use
    var action = [ "Go", "Stay"];
    var result = [ "It will be double", "There will be trouble" ];
    // when life is settled, load up the fun stuff
    document.addEventListener('DOMContentLoaded', function () {
      new Vue({
        el: '#sg1',
        // define data - initial display text and set the text on the button
        data: {
          m1: "You got to let me know",
          btext: action[0]
        },
        // define the methods - alternate between the two values
        methods: {
          staygo: function () {
            var sel = ( this.btext == action[0] ) ? sel = 1 : sel = 0;
            this.m1 = result[sel];
            this.btext = action[sel];
          }
        }
      })
    })
  </script>
</head>
<body>
  <!-- text and the button -->
  <div id="sg1">
    <p>{{ m1 }}</p>
    <p><button v-on:click="staygo">{{ btext }}</button></p>
  </div>
</body>
</html>

在標記中，咱們添加了按鈕。這是一個基本按鈕，咱們經過附加調用staygo（）的偵聽器定義了一個單擊事件的動做，而且咱們爲按鈕文本設置了一個名爲「btext」的佔位符。

回到代碼中，咱們在配置中添加了一個方法屬性。在其中，咱們定義了staygo（）以匹配按鈕中的那個。這是它變得有趣的地方。

methods: {
  staygo: function () {
    var sel = ( this.btext == action[0] ) ? sel = 1 : sel = 0;
    this.m1 = result[sel];
    this.btext = action[sel];
  }
}

咱們還在數據區域添加了文本，爲按鈕提供了初始標籤。在該方法中，咱們基本上看到按鈕上的內容，而後在兩行文本中的一行和兩個按鈕標籤之一之間切換。

data: {
  m1: "You got to let me know",
  btext: action[0]
}

這裏發生的有趣的事情是咱們如今已經連接了數據和DOM，咱們的應用程序是被動的。當咱們改變m1的值時，顯示的文本被改變，當咱們改變btext的值時，按鈕文本被改變。沒有什麼須要作的了。這也發生在咱們的第一個例子中，但咱們沒有看到，由於咱們只是將文本留下了初始值。

clipboard.png

咱們看到文字「You got to let me know」，按鈕標有「go」。正如任何經典朋克的粉絲都知道的那樣，若是你去「There will be trouble」而且文字也會爲此改變。同時，決定留下來，咱們惟一的選擇是「stay"」，咱們將按鈕上的標籤更改成「stay"」。

clipboard.png

若是您如今單擊「stay」，則文本將更改成「It will be double」。

clipboard.png

你能夠來回點擊，而後決定你的文本顯示。

添加Kendo UI組件

爲了簡單起見，我在這裏使用了一個基本的下拉組件，但若是你想添加一個網格或圖表或其餘更復雜的組件，那麼這個過程就大體相同了。此外，它有點長，因此我將列出下面每一個部分的添加內容，並在GitHub上列出完整的代碼。

首先，咱們在標題中添加了一個部分，以引入Kendo UI樣式，基本庫和此組件的庫：

<!-- load Kendo UI stylesheets -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css"/>
<!-- load Kendo UI libraries -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<!-- load Kendo UI for Vue -->
<script src="https://unpkg.com/@progress/kendo-dropdowns-vue-wrapper/dist/cdn/kendo-dropdowns-vue-wrapper.min.js"></script>

這包括組件的一些樣式，咱們依賴的一些庫，以及咱們將使用的實際組件的庫。

咱們還在<body>部分添加了一個<div>元素。在這裏，您會看到一些新文本以及<kendo-dropdownlist>元素：

<!-- second text and the DropDownList component -->
<div id="sg2" class="vue-app">
  <p>{{ m2 }}</p>
  <h4>Singer:</h4>
  <kendo-dropdownlist :data-source="singerOptions"
                       :data-text-field="'text'"
                       :data-value-field="'value'"
                       @change="onChange">
  </kendo-dropdownlist>
</div>

在這裏，您能夠看到咱們已經指定了實際標籤的數據源（文本項數組），調用文本字段的內容，調用返回的值，最後咱們告訴它如何處理具體行動。在這種狀況下，它是@change，它在選擇被更改時觸發（不只僅是選中，而是實際更改成其餘選擇）而且咱們已經定義了onChange（）。您能夠觸發許多其餘事件，還能夠設置大量其餘參數來控制DropDownList組件的行爲。有關這方面的更多信息，請查看DropDownList組件的文檔。

如今，回到腳本，咱們爲這個新部分添加了新代碼：

new Vue({
  el: "#sg2",
  // data is the lyric line and the two options for the DropDownList component
  data: {
    m2: problem[0],
    singerOptions: [
      { text: option[0], value: '0' },
      { text: option[1], value: '1' }
    ]
  },
  // and the method here just updates the text based on the singer selection
  methods: {
    onChange: function(e) {
      this.m2 = problem[e.sender.value()];
    }
  }
})

咱們添加了兩（2）個數據項：一個用於文本，「m2」，第二個是實際由DropDownList組件使用的數組。最後，咱們有一個方法，在DropDownList組件中更改選擇時調用，該方法根據選擇設置文本「m2」，與e.sender.value（）一塊兒傳遞。

咱們的應用如今看起來像這樣：

clipboard.png

咱們仍然有原始的「hello，world」文本和按鈕，但如今咱們也看到了新的詞和下拉列表。若是咱們點擊下拉菜單，咱們會獲得兩個選擇：「Mick」或「Joe and Joe」。

clipboard.png

在下拉菜單中選擇不一樣的選項，上面的文本也將相應的發生變化。

clipboard.png

下一步

如今你已經看到了開始使用Vue是多麼容易，下一步是什麼？

在這個小例子以後你能夠找到各類各樣的方向。可是在這裏你有一個實際的工做示例，交互性和全部鏈接的Kendo UI組件。若是您以前沒有使用過Vue，那麼這能夠超越基本的「hello，world」示例，這些示例是須要確保你具有全部設置和工做的基礎知識。從一個複雜的例子開始，歷來沒有什麼幫助，由於當它不起做用時你一般不知道爲何，這就是爲何「你好，世界」的例子如此受歡迎。

那麼接下來你能夠學習些什麼了？

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程