vue腳手架vue數據交互

Vue.js is a JavaScript library for building user interfaces. Last year, it started to become quite popular among web developers. It’s lightweight, relatively easy to learn, and powerful.

Vue.js是用于構建用戶界面JavaScript庫。 去年，它開始在Web開發人員中變得非常流行。 它輕巧，易于學習且功能強大。

In the three minutes that Medium says it will take you to read this article, you’ll be equipped to start building basic Vue apps. With each segment, I’ve also included an interactive Scrimba screencast, where you can watch me explain the concepts and play around with the code yourself.

在Medium說的三分鐘內，您將需要閱讀本文，您將具備開始構建基本的Vue應用程序的能力。 在每個部分中，我還包括一個互動式Scrimba截屏，您可以在其中觀看我講解概念并親自使用代碼。

Let’s jump into it.

讓我們跳進去。

模板語法和數據 (Template syntax and data)

At the core of Vue.js is a straightforward template syntax which looks like this:

Vue.js的核心是簡單的模板語法，如下所示：

<div id="myApp">  {{ message }}  
</div>

Pair that with the following JavaScript snippet:

將其與以下JavaScript代碼段配對：

var myApp = new Vue({  el: '#myApp',  data: {  message: 'Hello world!'  }  
})

And it’ll result in Hello world! being rendered on the page.

它將進入Hello World！ 在頁面上呈現。

The el: #myApp part tells Vue to render the app inside the DOM element with the id of myApp. The data object is where you place you the data you want to use in your app. We’ve added only one key here, message, which we’re referencing to in our HTML like this: {{ message }}.

el: #myApp部分告訴Vue使用myApp的ID在DOM元素內渲染應用程序。 data對象是放置要在應用程序中使用的數據的位置。 我們在此處僅添加了一個鍵message ，它在我們HTML中是這樣引用的： {{ message }} 。

Vue takes care of linking the data object to the DOM, so if the data changes, the page will be updated as well.

Vue負責將data對象鏈接到DOM，因此，如果數據發生更改，頁面也將被更新。

This is called declarative rendering. You simply specify what you want to update, and Vue takes care of how to do it.

這稱為聲明式渲染。 您只需指定要更新什么 ，Vue公司需要照顧怎么辦呢。

You can change the data can by doing this:

您可以通過執行以下操作來更改數據罐：

myApp.message = 'Some new value';

Here is a screencast which explains this exact concept:

這是一個截屏視頻，解釋了這個確切的概念：

指令 (Directives)

The next concept you’ll need to learn is directives. Directives are HTML attributes that are prefixed with v-, which indicates that they apply reactive behavior to the rendered DOM.

您需要學習的下一個概念是指令。 指令是帶有v-前綴HTML屬性，指示它們將React式行為應用于呈現的DOM。

Let’s say we only want to render something if a condition is true, and hide it if it’s false. Then we’ll use v-if.

假設我們只想在條件為true時渲染某些內容，而在條件為false時隱藏它。 然后，我們將使用v-if 。

In the HTML, it looks like this.

在HTML中，它看起來像這樣。

<div id="app">  <p v-if="seen">Now you see me</p>  
</div>

And some JavaScript:

還有一些JavaScript：

var app = new Vue({  el: '#app',  data: {  seen: true  }  
})

This will result in rendering out the Now you see me paragraph if seen in data is true. To hide the paragraph, you can set seen to false, like this:

如果在data seen的是真實的，這將導致呈現“ 立即看到我”段落。 要隱藏該段落，可以將seen設置為false，如下所示：

app.seen = false;

app.seen = false;

Here is a screencast explaining the same concept:

這是解釋相同概念的截屏視頻：

There are many other directives, like v-for, v-on, v-bind and v-model.

還有許多其他指令，例如v-for ， v-on, v-bind和v-model 。

處理用戶輸入 (Handling user input)

Another core directive you need to learn is v-on. It will hook up an event listener to the DOM element, so that you can handle user input. You specify the type of event after the colon. So v-on:click will listen for clicks.

您需要學習的另一個核心指令是v-on 。 它將事件監聽器連接到DOM元素，以便您可以處理用戶輸入。 您可以在冒號后面指定事件的類型。 因此， v-on:click將監聽點擊。

<div id="app">  <button v-on:click="myClickHandler">Click me!</button>  
</div>

myClickHandler refers to the key with the same name in the methods object. Needless to say, that’s the object where you place your app’s methods. You can have as many methods as you want.

myClickHandler在methods對象中引用具有相同名稱的鍵。 不用說，這就是放置應用程序方法的對象。 您可以根據需要使用多種方法。

var app = new Vue({  el: '#app',  methods: {  myClickHandler: function () {  console.log('button clicked!');  }  }  
})

This will result in button clicked being logged to the console when clicking the button.

這將導致按鈕單擊單擊按鈕時被記錄到控制臺。

Here is a screencast explaining the concept:

這是解釋此概念的截屏視頻：

綁在一起 (Tying it all together)

Now let’s create an example where we’re using both data and methods, tying together what we’ve learned up until now.

現在，讓我們創建一個示例，在此示例中，我們同時使用data和methods ，將到目前為止所學的知識聯系在一起。

<div id="app">  <p>{{ message }}</p>  <button v-on:click="changeMessage">Click me!</button>  
</div>

And the JavaScript:

和JavaScript：

var app = new Vue({  el: '#app',  data: {  message: 'Start message'  },  methods: {  changeMessage: function () {  this.message = 'The message has changed!'  }  }  
})

Initially, it’ll display out Start message on the page, however after the click it’ll display This message has changed instead.

最初，它將在頁面上顯示開始消息 ，但是單擊后將顯示此消息已更改 。

The this ?keyword refers to the Vue instance, the one we’ve called app. It is on this instance that our data lives, so we can refer to the message data through this.message.

this關鍵字引用Vue實例，我們將其稱為app 。 正是在這種情況下，我們的數據才得以生存，因此我們可以通過this.message引用message數據。

Check out this screencast explaining the concept.

查看此截屏視頻，以解釋概念。

And by that, you should know enough Vue.js to get started creating simple apps.

這樣一來，您應該了解足夠的Vue.js才能開始創建簡單的應用程序。

In the next tutorial, you’ll learn how to create Vue components. So be sure to follow this publication if you liked this article.

在下一個教程中，您將學習如何創建Vue組件。 因此，如果您喜歡本文，請確保遵循該出版物。

翻譯自: https://www.freecodecamp.org/news/learn-basic-vue-js-crash-course-guide-vue-tutorial-e3da361c635/

vue腳手架vue數據交互