vue脚手架vue数据交互_学习Vue：3分钟的交互式Vue JS教程

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;

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组件。因此，如果您喜欢本文，请确保遵循该出版物。