为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Vue学习：从零开始的Vue.js入门教程

Vue学习：从零开始的Vue.js入门教程

标签：
Vue.js
概述

Vue.js的学习是一个循序渐进的过程，涵盖了从环境搭建到组件化开发的各种基础和高级功能。本文详细介绍了Vue.js的安装配置、基本语法、数据绑定及路由与状态管理等内容，并通过实战演练和部署项目，帮助开发者掌握Vue.js的实践应用。

Vue.js简介与环境搭建
什么是Vue.js

Vue.js 是一个渐进的JavaScript框架，用于构建用户界面。Vue.js 强调简单易用，同时提供丰富功能。与Angular等其他框架相比，Vue.js 更易于上手，同时提供了强大的数据绑定和组件系统。Vue.js 由尤雨溪（Evan You）于2014年2月发布，从那时起就受到了开发者的欢迎。

Vue.js 主要特点如下：

  • 轻量级：体积小，易于集成和扩展。
  • 易于学习：语法简单，易于上手。
  • 组件化：组件化开发模式，有助于代码复用。
  • 双向数据绑定：数据与视图双向绑定，简化了数据更新的逻辑。
  • 响应式系统：改变数据，视图自动更新。
  • 虚拟DOM：提高了性能，减少了直接操作DOM的开销。
  • 生态系统丰富：有大量的插件和库可供选择。
Vue.js的安装与配置

安装Vue.js有多种方法，这里介绍两种常用的方法：使用script标签引入CDN，和使用npm。

使用CDN

在HTML文件中引入Vue.js可以通过在<head>标签中添加以下代码来实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue.js学习</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
</body>
</html>

使用npm

首先安装Node.js和npm，然后通过npm来安装Vue.js。

npm install vue

使用npm安装Vue.js后，可以在项目中通过import来引入Vue.js。

import Vue from 'vue';
创建第一个Vue应用

创建一个简单的Vue应用可以分为以下几个步骤：

  1. 设置HTML文件结构。
  2. 引入Vue.js。
  3. 创建Vue实例。
  4. 设置视图和数据绑定。

示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue.js学习</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    });
  </script>
</body>
</html>

在这个示例中，Vue实例绑定了#app元素，data对象包含一个属性message。当Vue实例被创建后，它会把data.message的值渲染到页面上。

基本语法与数据绑定
模板语法

Vue.js 使用一种称为模板的HTML扩展语法，用于在HTML模板中绑定数据。Vue.js 模板语法主要由插值、指令和事件处理器组成。

插值

插值用于在HTML中显示数据，最基本的插值形式是{{ }}。例如：

<div id="app">
  <p>{{ message }}</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

指令

指令是特殊形式的属性，以v-开头。Vue.js 提供了一些内置指令，比如v-if、v-for等。例如：

<div id="app">
  <p v-if="seen">现在你看到我了</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
});

事件处理器

事件处理器用于响应用户输入，比如点击按钮。例如：

<div id="app">
  <button v-on:click="reverseMessage">反转消息</button>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});
数据绑定

Vue.js 的数据绑定有两种类型：属性绑定和事件绑定。

属性绑定

属性绑定可以通过v-bind指令实现。例如：

<div id="app">
  <span>{{ count }}</span>
  <button v-on:click="count++">增加计数器</button>
</div>
var app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
});

事件绑定

事件绑定可以通过v-on指令实现。例如上面事件处理器的例子。

计算属性与侦听器

计算属性

计算属性是基于数据依赖关系进行缓存的属性。计算属性依赖于数据的变化，如果数据不变，计算属性将不会重新计算。

<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;
    }
  }
});

侦听器

侦听器用于观察属性的变化，可以自定义处理逻辑。

<div id="app">
  <p>{{ message }}</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`);
    }
  }
});
指令与事件处理
常用的Vue指令

Vue.js 提供了一些常用的指令，比如v-for、v-if、v-bind等。

v-for

v-for 用于遍历数组或对象。

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>
var app = new Vue({
  el: '#app',
  data: {
    items: ['foo', 'bar', 'baz']
  }
});

v-if

v-if 用于条件渲染。

<div id="app">
  <p v-if="seen">现在你看到我了</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
});

v-bind

v-bind 用于绑定属性。

<div id="app">
  <a v-bind:href="url">跳转</a>
</div>
var app = new Vue({
  el: '#app',
  data: {
    url: 'http://www.example.com'
  }
});
事件绑定与处理

事件绑定可以绑定在元素上，通过v-on指令实现。

<div id="app">
  <button v-on:click="increment">点击我</button>
</div>
var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      this.count++;
    }
  }
});
表单绑定

表单绑定用于处理表单元素的数据绑定。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
组件化开发
创建组件的基本步骤

组件是独立的、可复用的Vue实例。创建组件的基本步骤如下：

  1. 定义组件。
  2. 注册组件。
  3. 使用组件。

示例代码

<div id="app">
  <my-component></my-component>
</div>
Vue.component('my-component', {
  template: '<div>这是我的组件</div>'
});

new Vue({
  el: '#app'
});
属性(prop)与插槽(Slot)

属性

属性是传递给组件的自定义数据。

<div id="app">
  <my-component message="Hello, World!"></my-component>
</div>
Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

new Vue({
  el: '#app'
});

插槽

插槽用于自定义组件内部的结构。

<div id="app">
  <my-component>
    <template v-slot:header>
      <h1>自定义头部</h1>
    </template>
    <div>自定义内容</div>
    <template v-slot:footer>
      <p>自定义底部</p>
    </template>
  </my-component>
</div>
Vue.component('my-component', {
  template: `
    <div>
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  `
});

new Vue({
  el: '#app'
});
组件的通信与复用

子组件向父组件通信

子组件通过$emit方法向父组件传递数据。

<div id="app">
  <child-component @child-event="handleChildEvent"></child-component>
</div>
Vue.component('child-component', {
  template: '<button v-on:click="sendEvent">发送事件</button>',
  methods: {
    sendEvent: function() {
      this.$emit('child-event', '子组件数据');
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    handleChildEvent: function(data) {
      console.log(data);
    }
  }
});

父组件向子组件通信

父组件通过props向子组件传递数据。

<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

new Vue({
  el: '#app',
  data: {
    parentMessage: '父组件数据'
  }
});
VueRouter与状态管理
路由的基本概念

VueRouter 用于实现前端路由，可以管理不同的视图、组件等。路由的基本概念包括路径、组件、导航等。

VueRouter的安装与配置

安装VueRouter：

npm install vue-router

配置VueRouter：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

示例代码

<div id="app">
  <router-link to="/">主页</router-link>
  <router-link to="/about">关于</router-link>
  <router-view></router-view>
</div>
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});
Vuex状态管理库的使用

Vuex 是专门为Vue.js设计的状态管理模式。它提供了集中式的状态管理，使应用的状态管理更加方便。

安装Vuex

npm install vuex

配置Vuex

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

使用Vuex

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">增加计数器</button>
</div>
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});
import Vue from 'vue';
import { mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
项目实战与部署
小项目实战演练

创建一个简单的在线购物车应用。

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }} - ${{ item.price }}
      <button @click="addItemToCart(item)">加入购物车</button>
    </li>
  </ul>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  </div>
</div>
var app = new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '产品1', price: 10 },
      { id: 2, name: '产品2', price: 20 },
      { id: 3, name: '产品3', price: 30 }
    ],
    cart: []
  },
  methods: {
    addItemToCart(item) {
      this.cart.push(item);
    }
  }
});

更多项目实战案例

<div id="app">
  <!-- 更多项目实战案例的组件代码 -->
</div>
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});
项目打包与部署

使用vue-cli脚手架创建项目，并使用npm run build打包。

vue create my-project
cd my-project
npm run build

打包后的文件在dist目录下，可以将这些文件部署到任何静态服务器，例如GitHub Pages、Netlify等。

常见问题与解决方法

常见问题

  • 数据不更新
  • 组件通信问题
  • 路由不工作

解决方法

  • 数据不更新：确保数据绑定正确且数据依赖关系正确。
  • 组件通信问题：使用props和$emit实现组件间通信。
  • 路由不工作：检查路由配置是否正确，确保路由组件已经注册。

示例代码

<div id="app">
  <router-view></router-view>
</div>
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});
<div id="app">
  <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
</div>
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>',
  methods: {
    sendEvent: function() {
      this.$emit('child-event', '子组件数据');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentMessage: '父组件数据'
  },
  methods: {
    handleChildEvent: function(data) {
      console.log(data);
    }
  }
});

总结，Vue.js 是一个功能强大且易于使用的前端框架，适合构建各种复杂应用。通过以上内容，你可以学习到从基础到高级的各种知识点，并且可以动手实战，完成实际项目。

点击查看更多内容
发表于 2024.10.30 21:24， 共 78 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

三国纷争

JAVA开发工程师
手记
篇
粉丝
51
获赞与收藏
178

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消