likes
comments
collection
share

Vue.js基础

作者站长头像
站长
· 阅读数 4

简介

Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。Vue 的核心库只关注视图层,易于上手,同时也能够配合其他库或现有项目使用。Vue.js 的设计目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装

Vue.js 可以通过多种方式安装,包括直接在 HTML 文件中使用 <script> 标签引入,使用包管理工具如 npm 或 Yarn,或者通过 Vue CLI 脚手架项目。

直接在 HTML 中使用

在你的 HTML 文件中,通过 <script> 标签直接引入 Vue.js 的 CDN 链接。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Example</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        // 在 Vue.js 中,一个应用实例是通过 `new Vue()` 创建的
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

使用 npm 或 Yarn

如果你正在使用模块打包工具,可以通过 npm 或 Yarn 安装 Vue.js。

npm install vue
# 或者
yarn add vue

然后,在你的 JavaScript 文件中引入并使用 Vue.js:

import Vue from 'vue';
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue with npm/Yarn!'
    }
});

使用 Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 实现的项目脚手架。
  • 通过 @vue/cli@vue/cli-service-global 实现的零配置原型开发。

安装 Vue CLI:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个新的 Vue.js 项目:

vue create my-project

进入项目目录并运行开发服务器:

cd my-project
npm run serve
# OR
yarn serve

核心概念

模板语法

Vue.js 使用基于 HTML 的模板语法,允许你声明式地将 DOM 绑定到底层 Vue 实例的数据。模板语法主要有以下几种:

  • 文本插值{{ message }} 用于在 HTML 中输出 Vue 实例的数据。
  • 属性绑定<img :src="image"> 使用冒号表示属性值是一个 JavaScript 表达式。
  • 事件绑定<button @click="doSomething"> 监听 DOM 事件并在触发时执行 JavaScript 代码。

响应式数据

Vue 实例的 data 选项是一个对象,Vue 会递归将 data 的属性转换为 getter/setter,从而使数据对象的属性能够响应数据变化。

var data = {
    message: 'Hello Vue!'
};

var vm = new Vue({
    data: data
});

指令(Directives)

Vue.js 提供了一些内置的指令,如 v-modelv-ifv-for 等,用于执行常见的任务。

  • v-model:在表单元素上创建双向数据绑定。
  • v-if/v-else:条件性地渲染元素。
  • v-for:基于源数据多次渲染一个元素或模板。

组件

Vue 应用是由组件树组成的,每个组件实例都有自己的作用域。一个组件可以包含 HTML、CSS 和 JavaScript。

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>这是个待办项</li>'
});

new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 1, task: '学习 Vue.js' },
      { id: 2, task: '阅读文档' }
    ]
  }
});

结语

Vue.js 是一个灵活且强大的框架,适合构建各种规模的应用。通过理解其核心概念和使用方式,你可以快速上手并构建出高效、可维护的前端应用。