Hello Vue: Vue快速入門教程

Pines_Cheng 發布于2019-08-29 16:29 / 2887人閱讀

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡單的模板語法以聲明方式將數據呈現給。到目前為止，它看起來并沒有太大的不同。如果我們點擊下拉菜單，我們會得到兩個選擇或。在下拉菜單中選擇不同的選項，上面的文本也將相應的發生變化。

Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。希望通過此教程能夠成為你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，如果你感興趣可以深入學習下去。

本教程針對的是第一次使用Vue資源管理器。我將向您展示如何使用Vue創建一個簡單的示例，然后我將添加一些交互性和UI組件，最后添加更多功能和Kendo UI組件。雖然本教程演示非常基礎，但它概述了使用Vue添加特性和功能的所有關鍵元素。擴展演示代碼并交換更復雜的組件非常容易。我的例子，如Vue本身，是可擴展的。

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

讓我們開始吧!

Hello, world!

首先，讓我們先來了解一下開始使用Vue是多么容易。我們將從流行的“hello，world”應用程序的Vue實現開始。




  Clash
  
  
  


  
  
    {{ m1 }}

我們做了什么

首先，在文檔中，我們給它標題。但是寫標題是一個不該被遺忘的好習慣。

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

首先，讓我們跳到文檔。在這里，我們有一個

的元素。


  {{ m1 }}

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

跳回到文檔，我們看到一些代碼在通過設置事件監聽器加載DOM時觸發。如果你來自jQuery世界，這就像$（document）.ready（）`,但在這里沒有jQuery。

接下來，我們有我們的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"）。

當我們運行它時，我們得到：

這很簡單，但不是很有用。但是，它確實讓我們了解如何設置Vue應用程序。到目前為止，它看起來并沒有太大的不同。但是這里發生了一些有趣的事情，我們還沒有看到。我們將探討下一個例子中的內容。

增加交互性

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




  Clash
  
  
  


  
  
    {{ m1 }}

在標記中，我們添加了按鈕。這是一個基本按鈕，我們通過附加調用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的值時，按鈕文本被改變。沒有什么需要做的了。這也發生在我們的第一個例子中，但我們沒有看到，因為我們只是將文本留下了初始值。

我們看到文字“You got to let me know”，按鈕標有“go”。正如任何經典朋克的粉絲都知道的那樣，如果你去“There will be trouble”并且文字也會為此改變。同時，決定留下來，我們唯一的選擇是“stay"”，我們將按鈕上的標簽更改為“stay"”。

如果您現在單擊“stay”，則文本將更改為“It will be double”。

你可以來回點擊，然后決定你的文本顯示。

添加Kendo UI組件

為了簡單起見，我在這里使用了一個基本的下拉組件，但如果你想添加一個網格或圖表或其他更復雜的組件，那么這個過程就大致相同了。此外，它有點長，所以我將列出下面每個部分的添加內容，并在GitHub上列出完整的代碼。

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

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

我們還在部分添加了一個

元素。在這里，您會看到一些新文本以及元素：



  {{ m2 }}
  Singer:

在這里，您可以看到我們已經指定了實際標簽的數據源（文本項數組），調用文本字段的內容，調用返回的值，最后我們告訴它如何處理具體行動。在這種情況下，它是@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（）一起傳遞。

我們的應用現在看起來像這樣：

我們仍然有原始的“hello，world”文本和按鈕，但現在我們也看到了新的詞和下拉列表。如果我們點擊下拉菜單，我們會得到兩個選擇：“Mick”或“Joe and Joe”。

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

下一步

現在你已經看到了開始使用Vue是多么容易，下一步是什么？

在這個小例子之后你可以找到各種各樣的方向。但是在這里你有一個實際的工作示例，交互性和所有連接的Kendo UI組件。如果您之前沒有使用過Vue，那么這可以超越基本的“hello，world”示例，這些示例是需要確保你具備所有設置和工作的基礎知識。從一個復雜的例子開始，從來沒有什么幫助，因為當它不起作用時你通常不知道為什么，這就是為什么“你好，世界”的例子如此受歡迎。

那么接下來你可以學習些什么了？

Vuejs.org

學習Vue 2：在Laracasts上一步一步

Scrimba9個互動截屏視頻來學習Vue

GPU云服務器云服務器 vue教程 vue入門教程 vue基礎教程 vue視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113773.html

Hello Vue: Vue快速入門教程

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡單的模板語法以聲明方式將數據呈現給。到目前為止，它看起來并沒有太大的不同。如果我們點擊下拉菜單，我們會得到兩個選擇或。在下拉菜單中選擇不同的選項，上面的文本也將相應的發生變化。 Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。希望通過此教程能夠成為你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，...

RdouTyping 2019-08-26 12:18 評論0 收藏0
Hello Vue: Vue快速入門教程

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡單的模板語法以聲明方式將數據呈現給。到目前為止，它看起來并沒有太大的不同。如果我們點擊下拉菜單，我們會得到兩個選擇或。在下拉菜單中選擇不同的選項，上面的文本也將相應的發生變化。 Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。希望通過此教程能夠成為你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，...

DoINsiSt 2019-08-02 11:18 評論0 收藏0
快速入門 - Vue2 Tutorials (一)

摘要：在這個組件里面有一些鏈接列表，和，這些列表直接使用編寫按照傳統的寫法，如果我們需要往里面添加鏈接的時候，每次我們都得添加和標簽。所以修改如下這樣我們就把數據和視圖分開了，模板里面的代碼也簡潔了很多，不再需要寫很多重復的代碼。 Vue 的官方文檔對 Vue 介紹非常詳細，但官方文檔使用在 HTML 中引入 vue 的方式進行講解，而實際項目中一般使用腳手架如 vue-cli 初始化項目...

djfml 2019-08-20 17:47 評論0 收藏0
Vue快速入門

摘要：的目標是通過盡可能簡單的實現響應的數據綁定和組合的視圖組件。結果更改檢測現在是響應式的不是響應式的對于已經創建的實例，不能動態添加根級別的響應式屬性。 Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。 vue單文件組件 export default { mixins: [], comments: { // 引入局部組件 ...

stdying 2019-08-22 16:47 評論0 收藏0
vue.js快速入門

摘要：的核心庫只關注視圖層，并且非常容易學習，同時擁有非常容易上手的中英文都有提供快速入門準備地址地址沒錯就只需要這兩個就可以開發了是核心文件，在這里只是為了提高開發效率而引用的，是可選的。專門存儲一些數據的屬性，數據一定是對象格式。 **關于前陣子的文章錯誤有點多所以從新修改了并添加了一些在官方腳手架vue-cli開發時需要注意的事項，Vue.js是一個輕巧、高性能、可組件化的MVVM庫。...

dantezhao 2019-08-20 13:46 評論0 收藏0