国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Hello Vue: Vue快速入門教程

Pines_Cheng / 2893人閱讀

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

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

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

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

讓我們開始吧!

Hello, world!

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




  Clash
  
  
  


  
  

    
{{ m1 }}
我們做了什么

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

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

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

的元素。


  
{{ m1 }}

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

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

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

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

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

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

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

增加交互性

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




  Clash
  
  
  


  
  

    
{{ m1 }}

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

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

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)容，然后在兩行文本中的一行和兩個按鈕標(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)我們改變m1的值時，顯示的文本被改變，當(dāng)我們改變btext的值時，按鈕文本被改變。沒有什么需要做的了。這也發(fā)生在我們的第一個例子中，但我們沒有看到，因?yàn)槲覀冎皇菍⑽谋玖粝铝顺跏贾怠?/p>

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

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

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

添加Kendo UI組件

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

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

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

我們還在部分添加了一個

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




  
{{ m2 }}

  
Singer:

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

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

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

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

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

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

下一步

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

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

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

Vuejs.org

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

Scrimba9個互動截屏視頻來學(xué)習(xí)Vue

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113773.html

相關(guān)文章

  • Hello Vue: Vue快速入門教程

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

    RdouTyping 評論0 收藏0

  • Hello Vue: Vue快速入門教程

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

    DoINsiSt 評論0 收藏0

  • 快速入門 - Vue2 Tutorials (一)

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

    djfml 評論0 收藏0

  • Vue快速入門

    摘要：的目標(biāo)是通過盡可能簡單的實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。結(jié)果更改檢測現(xiàn)在是響應(yīng)式的不是響應(yīng)式的對于已經(jīng)創(chuàng)建的實(shí)例，不能動態(tài)添加根級別的響應(yīng)式屬性。 Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。 vue單文件組件 export default { mixins: [], comments: { // 引入局部組件 ...

    stdying 評論0 收藏0

  • vue.js快速入門

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

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<