vue.js入门经典练习

1.创建一个简单的Vue实例，然后在页面上显示一个Hello World消息。

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
});

2.创建一个包含一个按钮的Vue实例，点击按钮时，在页面上显示一个随机数。

<div id="app">
  <button @click="generateRandomNumber">Generate Number</button>
  <p>{{ randomNumber }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    randomNumber: null
  },
  methods: {
    generateRandomNumber() {
      this.randomNumber = Math.floor(Math.random() * 100);
    }
  }
});

3.创建一个包含一个输入框和一个按钮的Vue实例，当用户在输入框中输入内容并点击按钮时，在页面上显示输入的内容。

<div id="app">
  <input v-model="inputText" type="text">
  <button @click="displayInputText">Display Text</button>
  <p>{{ displayedText }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    inputText: '',
    displayedText: ''
  },
  methods: {
    displayInputText() {
      this.displayedText = this.inputText;
    }
  }
});

4.创建一个包含一个列表和一个输入框的Vue实例，当用户在输入框中输入内容并点击按钮时，将输入的内容添加到列表中。

<div id="app">
  <input v-model="inputText" type="text">
  <button @click="addToList">Add to List</button>
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    inputText: '',
    list: []
  },
  methods: {
    addToList() {
      this.list.push(this.inputText);
      this.inputText = '';
    }
  }
});

5.创建一个包含一个计数器的Vue实例，包括增加和减少按钮，点击按钮时，增加或减少计数器的值。

<div id="app">
  <button @click="incrementCounter">+</button>
  <p>{{ counter }}</p>
  <button @click="decrementCounter">-</button>
</div>

new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    incrementCounter() {
      this.counter++;
    },
    decrementCounter() {
      this.counter--;
    }
  }
});

希望可以帮助更多入门的小伙伴快速掌握并提高自身编程水平！