vue入门_vue入门案例

vue入门_vue入门案例

Vue.js是一款流行的JavaScript框架，它可以帮助开发者构建交互性强、易于维护的Web应用。如果你是一名前端开发者，那么学习Vue.js将是您事业发展的一大利器。为您介绍Vue.js的入门案例，帮助您快速掌握这个框架的基本概念和使用方法。

一、Vue.js入门案例：Hello World

我们来看一个Vue.js的入门案例：Hello World。这个案例非常简单，但是可以帮助您了解Vue.js的基本用法。在这个案例中，我们将创建一个Vue实例，并将它绑定到一个HTML元素上。代码如下：

1. 创建Vue实例

在Vue.js中，我们使用Vue构造函数来创建Vue实例。在这个案例中，我们创建了一个Vue实例，并将它绑定到一个HTML元素上。

    // 创建Vue实例
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello World!'
      }
    })

2. 绑定数据

在Vue.js中，我们可以使用data选项来定义Vue实例的数据。在这个案例中，我们定义了一个message属性，它的值为’Hello World!’。

    // 定义数据
    data: {
      message: 'Hello World!'
    }

3. 显示数据

在Vue.js中，我们可以使用双花括号语法来显示数据。在这个案例中，我们将message属性的值显示在HTML页面上。

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

二、Vue.js入门案例：计数器

现在，我们来看一个稍微复杂一些的Vue.js入门案例：计数器。在这个案例中，我们将创建一个计数器，用户可以点击按钮来增加或减少计数器的值。代码如下：

1. 定义计数器

在Vue.js中，我们可以使用data选项来定义Vue实例的数据。在这个案例中，我们定义了一个count属性，它的值为0。

    // 定义数据
    data: {
      count: 0
    }

2. 实现增加和减少计数器的功能

在Vue.js中，我们可以使用methods选项来定义Vue实例的方法。在这个案例中，我们定义了两个方法：increment和decrement，它们分别用于增加和减少计数器的值。

    // 定义方法
    methods: {
      increment: function() {
        this.count++;
      },
      decrement: function() {
        this.count--;
      }
    }

3. 显示计数器的值

在Vue.js中，我们可以使用双花括号语法来显示数据。在这个案例中，我们将count属性的值显示在HTML页面上，并且为它绑定两个按钮，用于增加和减少计数器的值。

    <div id="app">
      <p>{{ count }}</p>
      <button v-on:click="increment">+</button>
      <button v-on:click="decrement">-</button>
    </div>

三、Vue.js入门案例：ToDo List

我们来看一个更加复杂的Vue.js入门案例：ToDo List。在这个案例中，我们将创建一个ToDo List，用户可以添加、编辑和删除任务。代码如下：

1. 定义任务列表

在Vue.js中，我们可以使用data选项来定义Vue实例的数据。在这个案例中，我们定义了一个tasks属性，它的值为一个包含三个任务的数组。

    // 定义数据
    data: {
      tasks: [
        { id: 1, title: '任务1', completed: false },
        { id: 2, title: '任务2', completed: true },
        { id: 3, title: '任务3', completed: false }
      ]
    }

2. 实现添加任务的功能

在Vue.js中，我们可以使用methods选项来定义Vue实例的方法。在这个案例中，我们定义了一个方法：addTask，它用于向任务列表中添加新的任务。

    // 定义方法
    methods: {
      addTask: function(title) {
        var newTask = {
          id: Date.now(),
          title: title,
          completed: false
        };
        this.tasks.push(newTask);
      }
    }

3. 实现编辑和删除任务的功能

在Vue.js中，我们可以使用v-for指令来遍历任务列表，并使用v-model指令来实现双向数据绑定。在这个案例中，我们为每个任务添加编辑和删除按钮，用户可以使用它们来编辑和删除任务。

    <ul>
      <li v-for="task in tasks">
        <input type="checkbox" v-model="task.completed">
        <input type="text" v-model="task.title">
        <button v-on:click="removeTask(task)">删除</button>
      </li>
    </ul>

4. 显示任务数量

在Vue.js中，我们可以使用计算属性来计算任务数量。在这个案例中，我们定义了一个计算属性：remaining，它用于计算未完成的任务数量。

    // 定义计算属性
    computed: {
      remaining: function() {
        var count = 0;
        for (var i = 0; i < this.tasks.length; i++) {
          if (!this.tasks[i].completed) {
            count++;
          }
        }
        return count;
      }
    }

5. 显示任务过滤器

在Vue.js中，我们可以使用计算属性和v-on指令来实现任务过滤器。在这个案例中，我们定义了三个过滤器：all、active和completed，它们分别用于显示所有任务、未完成的任务和已完成的任务。

    <ul>
      <li v-for="task in filteredTasks">
        <input type="checkbox" v-model="task.completed">
        <input type="text" v-model="task.title">
        <button v-on:click="removeTask(task)">删除</button>
      </li>
    </ul>
    <div>
      <button v-on:click="filter = 'all'">全部</button>
      <button v-on:click="filter = 'active'">未完成</button>
      <button v-on:click="filter = 'completed'">已完成</button>
    </div>

6. 完整代码

下面是完整的ToDo List代码：

    <div id="app">
      <input type="text" v-model="newTask">
      <button v-on:click="addTask(newTask)">添加</button>
      <ul>
        <li v-for="task in filteredTasks">
          <input type="checkbox" v-model="task.completed">
          <input type="text" v-model="task.title">
          <button v-on:click="removeTask(task)">删除</button>
        </li>
      </ul>
      <div>
        <button v-on:click="filter = 'all'">全部</button>
        <button v-on:click="filter = 'active'">未完成</button>
        <button v-on:click="filter = 'completed'">已完成</button>
      </div>
      <p>{{ remaining }} 个任务未完成</p>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          tasks: [
            { id: 1, title: '任务1', completed: false },
            { id: 2, title: '任务2', completed: true },
            { id: 3, title: '任务3', completed: false }
          ],
          newTask: '',
          filter: 'all'
        },
        methods: {
          addTask: function(title) {
            var newTask = {
              id: Date.now(),
              title: title,
              completed: false
            };
            this.tasks.push(newTask);
            this.newTask = '';
          },
          removeTask: function(task) {
            var index = this.tasks.indexOf(task);
            this.tasks.splice(index, 1);
          }
        },
        computed: {
          remaining: function() {
            var count = 0;
            for (var i = 0; i < this.tasks.length; i++) {
              if (!this.tasks[i].completed) {
                count++;
              }
            }
            return count;
          },
          filteredTasks: function() {
            if (this.filter === 'all') {
              return this.tasks;
            } else if (this.filter === 'active') {
              return this.tasks.filter(function(task) {
                return !task.completed;
              });
            } else if (this.filter === 'completed') {
              return this.tasks.filter(function(task) {
                return task.completed;
              });
            }
          }
        }
      });
    </script>

通过这三个Vue.js入门案例，我们学习了Vue.js的基本用法，包括创建Vue实例、绑定数据、显示数据、定义方法、使用指令、计算属性和过滤器等。这些知识点是Vue.js开发的基础，希望可以帮助您快速掌握它们。如果您想深入学习Vue.js，可以继续阅读Vue.js的官方文档，或者参考一些优秀的Vue.js教程和案例。