vue 将字符串最后一个字符给替换_前端Vue项目#2

最新推荐文章于 2023-06-30 12:39:03 发布

weixin_39874795

最新推荐文章于 2023-06-30 12:39:03 发布

阅读量1.3k

点赞数

文章标签： vue 将字符串最后一个字符给替换 vue调用const

在第一部分，我们已经成功学习了如何用script标签将Vue添加到index，html，并且设置了我们的第一个响应器，今天我们就来学习一下如何让用户更改输入这个属性！

首先，我们打开我们的index.html，保证我们的代码是下面的样子（和第一个章节一样）

<html>
    <head>
        <title>Vue</title>
    </head>
    <body>
        <h1>Hello!</h1>
        <div id="app">
          <p> {{ Property }}</p>
        </div>

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

        <script>
          const app = new Vue({
            el: '#app',
            data: {
              Property: 'I am your first Vue.app'
            }
          });
        </script>
    </body>
</html>

为了更好地展示Vue的特性，我们来学习如何如何对用户的事件做出反应，我们来添加一个button来改变Property的值。

在div内容添加以下代码

  <hr>
  <button v-on:click="Property = 'The button has been clicked'">Click me</button>

此时打开浏览器,按我们的button，你会发现我们的Property发生了改变。

这里发生了什么呢？v-on指令在button标签内，指令是一个Vue可以理解的HTML参数。在这里我们告诉了Vue用户点击button的时候，Property内容变成The button has been clicked，这只是一个内联声明来改变我们属性的值。

这里简单说一下v-on[eventname]可以被@代替，换句话说

  <button v-on:click="Property = 'The button has been clicked'">Click me</button>
    <button @click="Property = 'The button has been clicked'">Click me</button>

这两个可以替换，大多数情况下我们使用@ [eventname]

接下来我们来学习以下methods，让我们将按钮调用设置为一个函数，该函数将执行一些非常简单的操作，它将通过将一个随机数附加到一个字符串来更改Property的值。

删除我们之前的button标签替换成

<button @click="buttonClicked">Click me</button>

在这里我们发现click内容中有buttonClicked调用我们的函数，注意这里不用（），因为我们不向函数传递任何参数时，我们可以省略。

接下来的内容关键一点请认真，Vue中有一个专门存放函数的地方，我们称作methods，这个位置在我们之前的new Vue（{}）中，我们接下来创建method：{}属性存放我们的buttonClicked函数。

复制粘贴一下代码

<script> 
  const app = new Vue({
    el: '#app',
    data: {
      Property: 'I am your first Vue.app'
    },
    methods: { // 1
      buttonClicked() { // 2
        const newText = 'The new value is: ' + Math.floor( Math.random() * 100); // 3
        this.Property = newText; // 4
      }
    }
  });
</script>

在代码块中我已经用1234写好步骤了，第二步我们创建了函数buttonClicked，第三步使用const 创建常量newText，第四步值得注意的是我们用this指代Vue实例，还是我之前说的，在本教程中你只需要掌握最基础的内容。

打开我们的index.html文件，点击按钮，你会发现其中的值会发生改变。

到目前为止，我们也仅仅接触了Vue.js最表面的事情，随着学习的深入，你会发现这些小组块组合在一起能够成为下一个应用程序的核心。

附上之上的全部代码

<html>
    <head>
        <title>Vue</title>
    </head>
    <body>
        <h1>Hello!</h1>
        <div id="app">
          <p> {{ Property }}</p>
          <hr>
          <button @click="buttonClicked">Click me</button>
        </div>

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

        <script> 
            const app = new Vue({
              el: '#app',
              data: {
                Property: 'I am your first Vue.app'
              },
              methods: { // 1
                buttonClicked() { // 2
                  const newText = 'The new value is: ' + Math.floor( Math.random() * 100); // 3
          
                  this.Property = newText; // 4
                }
              }
            });
          </script>
    </body>
</html>

我们下一章节再见啦！

weixin_39874795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 将字符串最后一个字符给替换_前端Vue项目#2

在第一部分，我们已经成功学习了如何用script标签将Vue添加到index，html，并且设置了我们的第一个响应器，今天我们就来学习一下如何让用户更改输入这个属性！首先，我们打开我们的index.html，保证我们的代码是下面的样子（和第一个章节一样）<html> <head> <title>Vue</title> ...
复制链接

扫一扫