一篇文章带你搞懂VUE基础知识

一篇文章带你搞懂VUE基础知识攻略

简介

Vue.js 是一个轻量级的渐进式 JavaScript 框架，用于构建交互式的前端用户界面。本文的目的是通过简单易懂的方式，帮助初学者快速了解 Vue.js 的基础知识。

前置知识

• HTML 基础知识
• JavaScript 基础知识

安装

Vue.js 可以通过 CDN 直接引入，也可以通过 NPM 安装。

CDN 引入

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

NPM 安装

npm install vue

基本语法

插值表达式

Vue.js 使用双花括号 {{ }} 进行插值表达式的渲染。例如，

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

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

在浏览器中，会显示 Hello, Vue!。

指令

指令是以 v- 开头的特殊属性，用于控制元素和 DOM 的渲染。例如，

<div id="app">
  <p v-if="showMessage">This is a message.</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    showMessage: true
  }
})

在浏览器中，只有在 showMessage 为真的情况下才会显示 This is a message.。

计算属性

计算属性是根据当前状态返回值的属性。例如，

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

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

在浏览器中，会显示 John Doe。

事件处理器

事件处理器是用于响应 HTML 这类元素的事件的方法。例如，

<div id="app">
  <button v-on:click="showMessage = !showMessage">Toggle message</button>
  <p v-if="showMessage">This is a message.</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    showMessage: false
  }
})

在浏览器中，可以通过点击按钮来切换 This is a message. 是否显示。

示例

TODO List

<div id="app">
  <h1>TODO</h1>
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.completed">
      <span v-bind:class="{ 'completed': todo.completed }">{{ todo.title }}</span>
    </li>
  </ul>
  <form v-on:submit.prevent="addTodo">
    <input type="text" v-model="newTodo" placeholder="Add a new todo...">
  </form>
</div>

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { title: 'Learn Vue', completed: true },
      { title: 'Build something awesome', completed: false },
      { title: 'Share with the world', completed: false }
    ],
    newTodo: ''
  },
  methods: {
    addTodo: function() {
      if (this.newTodo) {
        this.todos.push({ title: this.newTodo, completed: false })
        this.newTodo = ''
      }
    }
  }
})

在浏览器中，可以添加、删除、修改任务，并且有任务完成标记。

简单计算器

<div id="app">
  <input type="number" v-model="number1">
  <select v-model="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="number" v-model="number2">
  <button v-on:click="calculate">Calculate</button>
  <p>{{ result }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
    operator: '+',
    result: 0
  },
  methods: {
    calculate: function() {
      switch(this.operator) {
        case '+':
          this.result = parseInt(this.number1) + parseInt(this.number2)
          break;
        case '-':
          this.result = parseInt(this.number1) - parseInt(this.number2)
          break;
        case '*':
          this.result = parseInt(this.number1) * parseInt(this.number2)
          break;
        case '/':
          this.result = parseInt(this.number1) / parseInt(this.number2)
          break;
      }
    }
  }
})

在浏览器中，可以通过输入数字和运算符来计算结果。

结尾

Vue.js 是一款非常强大的前端框架，本文介绍的只是 Vue.js 的一小部分基础知识。文中代码都可以在浏览器中直接操作，帮助读者更好地学习 Vue.js。