从0开始学Vue

从0开始学Vue的完整攻略

Vue是一个流行的JavaScript框架，用于开发现代Web应用程序。如果你想完全掌握Vue，以下是从0开始学Vue的完整攻略。以下步骤将帮助您开始学习Vue并掌握Vue的基础知识。

步骤1: 学习前提

在学习Vue之前，您需要具备以下先验知识：

• 基本的HTML和CSS知识
• 基本的JavaScript语法

如果您还没有掌握这些知识，建议先学习这些基础知识。

步骤2: 安装Vue

首先，您需要安装Vue。有两种典型的方式来安装Vue：

2.1 通过CDN引用Vue

这是最简单的方式。您可以通过在HTML页面中引入CDN链接来引入Vue：

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

2.2 通过npm安装Vue

您也可以通过npm安装Vue。要安装Vue，可以运行以下命令：

npm install vue

这将从npm存储库中下载Vue并安装到您的项目中。

步骤3: 创建Vue实例

在学习Vue之前，您需要了解Vue实例。Vue实例是Vue应用程序的入口点。您可以通过Vue构造函数创建Vue实例。下面是一个简单的Vue实例示例：

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

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

示例中，我们创建了一个Vue实例，并在HTML代码中使用双括号语法渲染消息。

步骤4: Vue指令

Vue指令是Vue中的一个重要概念，用于扩展HTML元素的功能。Vue指令以“v-”为前缀。例如，v-if和v-for等指令是Vue中的常用指令。

下面是一个简单的v-if指令示例：

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <button @click="toggleMessage()">Toggle Message</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    showMessage: true
  },
  methods:{
    toggleMessage:function(){
      this.showMessage = !this.showMessage;
    }
  }
})

在这个示例中，我们使用v-if指令根据条件显示或隐藏消息。

步骤5: 计算属性和监听器

Vue中有两个常用的属性：计算属性和侦听器。计算属性用于计算派生数据，而侦听器用于监听Vue实例中的数据变化。

下面是一个计算属性和侦听器的示例：

<div id="app">
  <p>{{ reversedMessage }}</p>
  <input v-model="message" />
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message: function(val){
      console.log(`message changed to ${val}`)
    }
  }
})

在这个示例中，我们定义了一个计算属性reversedMessage，用于将message反转，并且也定义了一个监听器来输出message属性的变化。

步骤6: 组件

Vue中的组件是Vue应用程序的构成部分。组件是可重用的，可以在多个Vue实例中使用。

下面是一个简单的计时器组件示例：

<div id="app">
  <my-timer></my-timer>
</div>

Vue.component('my-timer', {
  data: function(){
    return {
      seconds: 0
    }
  },
  template: '<div>{{ seconds }} seconds elapsed</div>',
  created: function () {
    var self = this;
    setInterval(function () {
      self.seconds += 1;
    }, 1000);
  }
})

var app = new Vue({
  el: '#app'
})

在这个示例中，我们定义了一个计时器组件，并在Vue实例中使用它。

示例1: 简单的todo list

下面是一个简单的todo列表示例：

<div id="app">
  <h1>Todo List</h1>
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.done">{{ todo.text }}
    </li>
  </ul>
  <input v-model="newTodo" @keyup.enter="addTodo">
</div>

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'learn Vue', done: false },
      { text: 'build a todo app', done: false }
    ],
    newTodo: ''
  },
  methods:{
    addTodo:function(){
      this.todos.push({ text: this.newTodo, done: false });
      this.newTodo = '';
    }
  }
})

在这个示例中，我们创建了一个简单的todo列表，包括添加todo和标记todo完成等功能。

示例2: 简单的计算属性

下面是一个简单的计算属性示例：

<div id="app">
  <input v-model="firstName" placeholder="first name">
  <input v-model="lastName" placeholder="last name">
  <p>Full name: {{ fullName }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: ''
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在这个示例中，我们定义了一个计算属性fullName，用于将firstName和lastName组合成完整的姓名并且使用v-model指令绑定数据的双向绑定功能来实现输入框的输入。