vue.js更改颜色

by Anoob Bava

通过Anoob Bava

如何使用Vue.js实现简单的标题更改应用程序 (How to implement a simple title change application using Vue.js)

Vue.js is a progressive JavaScript framework. It has a lot of features including components, rendering, and routing. The Vue vs React argument is competitive in nature. They both have pros and cons in their field.

Vue.js是一个渐进式JavaScript框架。 它具有很多功能，包括组件，渲染和路由。 Vue vs React的论点本质上是竞争性的。 他们俩在各自领域都各有利弊。

I created a simple JavaScript application in Vue using a CDN (content delivery network). The application has a title which will convert to upper case on clicking a button. I know it is a simple application. But we can learn many simple things through it, like:

我使用CDN(内容交付网络)在Vue中创建了一个简单JavaScript应用程序。 该应用程序的标题将在单击按钮时转换为大写。 我知道这是一个简单的应用程序。 但是我们可以通过它学习很多简单的东西，例如：

• CDN for VueVue的CDN
• Vue objectsVue对象
• linking an attribute to the Vue Object将属性链接到Vue对象
• defining a data property定义数据属性
• defining a method using Vue使用Vue定义方法
• calling the Vue method via listeners通过侦听器调用Vue方法

Okay, let's get our hands dirty!

好吧，让我们动手吧！

I am a big fan of diving the method to chunks, so we will follow the same approach here.

我非常喜欢将该方法应用于大块，因此在这里我们将采用相同的方法。

1. Create an HTML file and link Vue via CDN.创建一个HTML文件并通过CDN链接Vue。
2. Create a Vue object.创建一个Vue对象。
3. Link HTML template to the Vue object.将HTML模板链接到Vue对象。
4. Create a data property.创建一个数据属性。
5. Create a method in the Vue object.在Vue对象中创建一个方法。
6. Change the data when clicking a button.单击按钮时更改数据。

1.创建一个HTML文件并通过CDN链接Vue (1. Create an HTML file and link Vue via CDN)

Initially create a file called index.html. It is our core player. The index.html file contains both the HTML template part and the Vue object.

最初创建一个名为index.html的文件。 这是我们的核心参与者。 index.html文件包含HTML模板部分和Vue对象。

I am using Visual Studio Code here.

我在这里使用Visual Studio Code。

Now add the CDN to the index.html. We can use either the development or production version. But it will be good to use the development version for warning and errors. The entry for the development version of the CDN currently is:

现在将CDN添加到index.html。 我们可以使用开发版本或生产版本。 但是将开发版本用于警告和错误会很好。 CDN开发版本的条目当前为：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.创建一个Vue对象 (2. Create a Vue object)

Now what we need to create is the Vue object inside the index.html file. It is created under the script tag <script></script>.

现在我们需要创建的是index.html文件中的Vue对象。 它是在脚本标记<script> </ script>下创建的。

It can be created by:

可以通过以下方式创建：

new Vue();

The whole syntax is below:

整个语法如下：

<script>new Vue({el: ,

data: {

},

methods: {

}

});</script>

new Vue is an instance of Vue. We can access properties like el, data, methods etc to be with Vue. Properties will be explained below.

new Vue是new Vue的一个实例。 我们可以使用Vue访问诸如el，数据，方法等属性。 属性将在下面说明。

3.将HTML模板链接到Vue对象 (3. Link the HTML template to the Vue object)

As we know Vue has a property called the “el”. This property links the HTML template to the Vue object. In order to do that, all the HTML templates have to be under a single div with an id. For this demo, we can use an id of app. We have added the following to the index.html file:

众所周知，Vue具有称为“ el”的属性。 此属性将HTML模板链接到Vue对象。 为了做到这一点，所有HTML模板都必须在具有ID的单个div下。 对于此演示，我们可以使用app的id。 我们已将以下内容添加到index.html文件：

<div id='app'>

<h3> Welcome to title changer</h3>

</div>

Now, add the app id to the Vue object.

现在，将应用程序ID添加到Vue对象。

new Vue({

el: '#app',

});

So the link will be a success.

因此，链接将成功。

4.创建一个数据属性 (4. Create a data property)

Now we do not want the header “Welcome to title changer” to be static text. We need to be able to display the value from the Vue data property. To do that, Vue has a built-in property called “data.” We need to register that here and use the name in the HTML like below:

现在我们不希望标题“ Welcome to title changer”是静态文本。 我们需要能够显示Vue数据属性中的值。 为此，Vue具有一个称为“数据”的内置属性。 我们需要在这里注册并使用HTML中的名称，如下所示：

new Vue({

el: '#app',

data: {

tile: 'Welcome to title changer'

},

});

Now in the <h3> tag can be updated with the double curly braces like interpolation in Ruby. The value will be:

现在，可以在< h3>标签中使用双花括号(如Ruby中的插值)进行更新。 该值为：

{{title}}

5.在Vue对象中创建方法 (5. Create a method in Vue object)

Vue has a built-in property called the “methods”. This property will support the methods to be declared inside the Vue objects.

Vue具有一个称为“方法”的内置属性。 此属性将支持在Vue对象中声明的方法。

We can use ES6 syntax also. Let me explain them both here.

我们也可以使用ES6语法。 让我在这里解释它们。

methods: {

changeTitle: function() {

this.title = this.title.toUpperCase();

return this.title;

}

}

The ES6 format is:

ES6格式为：

methods: {

changeTitle() {

this.title = this.title.toUpperCase();

return this.title;

}

}

toUpperCase() is simply a JavaScript method which will convert a string to capital letters. An important point to be noted here is, we can access the data property using the this keyword. So the value which is declared in the data property can be accessed using this in the methods.

toUpperCase()只是一个JavaScript方法，它将字符串转换为大写字母。 这里要注意的重要一点是，我们可以使用this关键字访问data属性。 因此，可以在方法中使用this属性访问data属性中声明的值。

6.单击按钮时更改数据 (6. Change the data when clicking a button)

Now, what we do is simply call the method on clicking a button. Simple as that.

现在，我们要做的只是在单击按钮时调用方法。 就那么简单。

To do that, we need to create a button tag.

为此，我们需要创建一个按钮标签。

<button>click to change to upcase</button>

To link the button to the method, we need to use an event handler when clicking the button. Vue provides a built-in listener called v-on.

要将按钮链接到方法，我们需要在单击按钮时使用事件处理程序。 Vue提供了一个称为v-on的内置侦听器。

Here is the syntax:

语法如下：

v-on:click="call Action or Method"

We can combine with:

我们可以结合：

<button v-on:click="changeTitle">click to change to upcase</button>

Or we can use a short-hand syntax like below:

或者我们可以使用如下的简写语法：

<button @click="changeTitle">click to change to upcase</button>

That’s it. All done

而已。 全做完了

Before clicking the button, the HTML heading is below:

单击按钮之前，HTML标题如下：

After clicking, it is converted to upper case.

单击后，将转换为大写。

That’s all. Comment if you have any issues or questions. I have attached the Repo details below.

就这样。 如果您有任何问题或疑问，请发表评论。 我已在下面附上了回购详细信息。

github link. I will update with some advanced features in Vue in the coming lessons.

github链接 。 在接下来的课程中，我将更新Vue的一些高级功能。

翻译自: https://www.freecodecamp.org/news/implement-a-simple-title-change-website-using-vue-js-7492e049af7/

vue.js更改颜色