Hello Vue: Vue快速入門教程

RdouTyping 發(fā)布于2019-08-26 12:18 / 985人閱讀

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡(jiǎn)單的模板語(yǔ)法以聲明方式將數(shù)據(jù)呈現(xiàn)給。到目前為止，它看起來(lái)并沒(méi)有太大的不同。如果我們點(diǎn)擊下拉菜單，我們會(huì)得到兩個(gè)選擇或。在下拉菜單中選擇不同的選項(xiàng)，上面的文本也將相應(yīng)的發(fā)生變化。

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

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

ps: 框架的名稱在技術(shù)上是“Vue.js”，有些地方甚至?xí)薷陌姹咎?hào)以獲得“Vue.js 2”，但大多數(shù)人只是在常用中使用“Vue”。本教程側(cè)重于語(yǔ)言，并未涵蓋更重要的Vue-cli等高級(jí)主題，但應(yīng)該在以后會(huì)有介紹。

讓我們開(kāi)始吧!

Hello, world!

首先，讓我們先來(lái)了解一下開(kāi)始使用Vue是多么容易。我們將從流行的“hello，world”應(yīng)用程序的Vue實(shí)現(xiàn)開(kāi)始。




  Clash
  
  
  


  
  
    {{ m1 }}

我們做了什么

首先，在文檔中，我們給它標(biāo)題。但是寫(xiě)標(biāo)題是一個(gè)不該被遺忘的好習(xí)慣。

接下來(lái)，我們從CDN加載Vue庫(kù)。當(dāng)你開(kāi)始使用時(shí)，你可能會(huì)切換到npm（這是Vue的[推薦安裝方法]（https://vuejs.org/v2/guide/in...）），但CDN是最簡(jiǎn)單和最便攜的方式。

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

的元素。


  {{ m1 }}

Vue的核心是能夠使用簡(jiǎn)單的模板語(yǔ)法以聲明方式將數(shù)據(jù)呈現(xiàn)給DOM。

跳回到文檔，我們看到一些代碼在通過(guò)設(shè)置事件監(jiān)聽(tīng)器加載DOM時(shí)觸發(fā)。如果你來(lái)自jQuery世界，這就像$（document）.ready（）`,但在這里沒(méi)有jQuery。

接下來(lái)，我們有我們的Vue代碼，這里所做的就是設(shè)置“m1”的內(nèi)容：

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

我們從這里開(kāi)始使用Vue（）函數(shù)創(chuàng)建一個(gè)新的Vue實(shí)例。有了這個(gè)，我們傳遞它配置。在這里，我們只在數(shù)據(jù)部分設(shè)置m1的初始值。（稍后會(huì)詳細(xì)介紹。）我們還告訴它我們想要使用哪個(gè)元素，el："＃sg1"類似于document.getElementById（"＃sg1"）。

當(dāng)我們運(yùn)行它時(shí)，我們得到：

這很簡(jiǎn)單，但不是很有用。但是，它確實(shí)讓我們了解如何設(shè)置Vue應(yīng)用程序。到目前為止，它看起來(lái)并沒(méi)有太大的不同。但是這里發(fā)生了一些有趣的事情，我們還沒(méi)有看到。我們將探討下一個(gè)例子中的內(nèi)容。

增加交互性

接下來(lái)，我們添加一個(gè)按鈕。




  Clash
  
  
  


  
  
    {{ m1 }}

在標(biāo)記中，我們添加了按鈕。這是一個(gè)基本按鈕，我們通過(guò)附加調(diào)用staygo（）的偵聽(tīng)器定義了一個(gè)單擊事件的動(dòng)作，并且我們?yōu)榘粹o文本設(shè)置了一個(gè)名為“btext”的占位符。

回到代碼中，我們?cè)谂渲弥刑砑恿艘粋€(gè)方法屬性。在其中，我們定義了staygo（）以匹配按鈕中的那個(gè)。這是它變得有趣的地方。

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

我們還在數(shù)據(jù)區(qū)域添加了文本，為按鈕提供了初始標(biāo)簽。在該方法中，我們基本上看到按鈕上的內(nèi)容，然后在兩行文本中的一行和兩個(gè)按鈕標(biāo)簽之一之間切換。

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

這里發(fā)生的有趣的事情是我們現(xiàn)在已經(jīng)鏈接了數(shù)據(jù)和DOM，我們的應(yīng)用程序是被動(dòng)的。當(dāng)我們改變m1的值時(shí)，顯示的文本被改變，當(dāng)我們改變btext的值時(shí)，按鈕文本被改變。沒(méi)有什么需要做的了。這也發(fā)生在我們的第一個(gè)例子中，但我們沒(méi)有看到，因?yàn)槲覀冎皇菍⑽谋玖粝铝顺跏贾怠?/p>

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

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

你可以來(lái)回點(diǎn)擊，然后決定你的文本顯示。

添加Kendo UI組件

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

首先，我們?cè)跇?biāo)題中添加了一個(gè)部分，以引入Kendo UI樣式，基本庫(kù)和此組件的庫(kù)：

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

我們還在部分添加了一個(gè)

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



  {{ m2 }}
  Singer:

在這里，您可以看到我們已經(jīng)指定了實(shí)際標(biāo)簽的數(shù)據(jù)源（文本項(xiàng)數(shù)組），調(diào)用文本字段的內(nèi)容，調(diào)用返回的值，最后我們告訴它如何處理具體行動(dòng)。在這種情況下，它是@change，它在選擇被更改時(shí)觸發(fā)（不僅僅是選中，而是實(shí)際更改為其他選擇）并且我們已經(jīng)定義了onChange（）。您可以觸發(fā)許多其他事件，還可以設(shè)置大量其他參數(shù)來(lái)控制DropDownList組件的行為。有關(guān)這方面的更多信息，請(qǐng)查看DropDownList組件的文檔。

現(xiàn)在，回到腳本，我們?yōu)檫@個(gè)新部分添加了新代碼：

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）個(gè)數(shù)據(jù)項(xiàng)：一個(gè)用于文本，“m2”，第二個(gè)是實(shí)際由DropDownList組件使用的數(shù)組。最后，我們有一個(gè)方法，在DropDownList組件中更改選擇時(shí)調(diào)用，該方法根據(jù)選擇設(shè)置文本“m2”，與e.sender.value（）一起傳遞。

我們的應(yīng)用現(xiàn)在看起來(lái)像這樣：

我們?nèi)匀挥性嫉摹癶ello，world”文本和按鈕，但現(xiàn)在我們也看到了新的詞和下拉列表。如果我們點(diǎn)擊下拉菜單，我們會(huì)得到兩個(gè)選擇：“Mick”或“Joe and Joe”。

在下拉菜單中選擇不同的選項(xiàng)，上面的文本也將相應(yīng)的發(fā)生變化。

下一步

現(xiàn)在你已經(jīng)看到了開(kāi)始使用Vue是多么容易，下一步是什么？

在這個(gè)小例子之后你可以找到各種各樣的方向。但是在這里你有一個(gè)實(shí)際的工作示例，交互性和所有連接的Kendo UI組件。如果您之前沒(méi)有使用過(guò)Vue，那么這可以超越基本的“hello，world”示例，這些示例是需要確保你具備所有設(shè)置和工作的基礎(chǔ)知識(shí)。從一個(gè)復(fù)雜的例子開(kāi)始，從來(lái)沒(méi)有什么幫助，因?yàn)楫?dāng)它不起作用時(shí)你通常不知道為什么，這就是為什么“你好，世界”的例子如此受歡迎。

那么接下來(lái)你可以學(xué)習(xí)些什么了？

Vuejs.org

學(xué)習(xí)Vue 2：在Laracasts上一步一步

Scrimba9個(gè)互動(dòng)截屏視頻來(lái)學(xué)習(xí)Vue