Vue.js 实例学习笔记

Vue.js 是一款流行的前端框架，其简单易用、灵活性强等特点受到了广泛的欢迎。本次学习笔记将介绍 Vue.js 的基本使用和实例演示。

安装

Vue.js 可以通过 CDN 引入，也可以通过 npm 安装。下面是通过 npm 安装 Vue.js 的命令：

Copy Code
npm install vue

安装完成后，在项目中引入 Vue.js：

htmlCopy Code
<script src="./node_modules/vue/dist/vue.js"></script>

或者在 JavaScript 文件中使用：

javascriptCopy Code
import Vue from 'vue'

基本用法

Vue.js 的基本用法包括模板语法、指令和组件等。

模板语法

Vue.js 的模板语法可以将数据和 DOM 进行绑定，从而实现动态渲染。模板语法使用双大括号进行绑定，例如：

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

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

以上代码将在页面中渲染出 "Hello, Vue!"。

指令

Vue.js 的指令用于扩展模板语法，实现更多的交互和数据绑定功能。例如 v-bind 可以绑定 HTML 属性：

htmlCopy Code
<div id="app">
  <img v-bind:src="imageSrc">
</div>

javascriptCopy Code
var app = new Vue({
  el: '#app',
  data: {
    imageSrc: 'image.png'
  }
})

以上代码将渲染出一张图片，其 src 属性绑定到 Vue 实例中的 imageSrc 数据上。

组件

Vue.js 的组件可以将页面拆分成多个独立的模块，提高代码的可维护性和可复用性。例如：

htmlCopy Code
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello, Component!',
      content: 'This is a Vue.js component.'
    }
  }
}
</script>

以上代码定义了一个组件，并在模板中使用。

实例演示

下面是一个简单的实例演示，使用 Vue.js 实现一个待办事项列表。

Copy Code
<!-- HTML -->
<div id="app">
  <h2>Todo List</h2>
  <ul>
    <li v-for="(item, index) in items" :key="index" v-bind:class="{ completed: item.completed }">
      <input type="checkbox" v-model="item.completed">
      {{ item.content }}
    </li>
  </ul>
  <div>
    <input type="text" v-model="newItem">
    <button v-on:click="addItem">Add</button>
  </div>
</div>

javascriptCopy Code
// JavaScript
var app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    items: [
      { content: 'Task 1', completed: false },
      { content: 'Task 2', completed: true }
    ]
  },
  methods: {
    addItem: function () {
      this.items.push({
        content: this.newItem,
        completed: false
      })
      this.newItem = ''
    }
  }
})

以上代码将渲染出一个待办事项列表，用户可以添加新的待办事项，并标记已完成的任务。