首頁手記 Vue2 基礎知識入門教程

Vue2 基礎知識入門教程

標簽：

Vue.js

概述

本文介绍了Vue2的基础知识，包括基本概念、MVVM设计模式、组件化开发、双向数据绑定和虚拟DOM等特性。文章还详细讲解了Vue2的安装配置、基本语法、指令、生命周期以及路由和状态管理的使用方法。通过学习这些内容，开发者可以更高效地进行Vue项目开发。

Vue2 基础知识入门教程

Vue2 的基本概念

Vue.js 是一个轻量级的前端框架，最初由 Evan You 在 2014 年开发，旨在简化网页开发中的模板化和数据绑定。Vue 2 是 Vue 的第二个主要版本，它在性能和功能上都有显著提升。Vue 2 采用了组件化的设计理念，使得开发者可以更方便地管理和复用代码。

MVVM 模式

Vue 采用了 Model-View-ViewModel (MVVM) 的设计模式。MVVM 模式将视图层和数据模型层分离开来，通过一个 ViewModel 层来连接两层。

Model：代表应用程序中的数据和业务逻辑。
View：用户界面，负责呈现模型的状态。
ViewModel：负责将 Model 的状态映射到 View 上，并处理 View 的事件，最终更新 Model 的状态。

优势与特点

Vue 2 具有以下特点：

组件化开发：Vue 通过组件化的方法将复杂的应用程序分解为独立的、可复用的组件。
双向数据绑定：Vue 可以自动将 Model 的变化同步到 View，反之亦然。
虚拟 DOM：Vue 采用虚拟 DOM 来提高渲染效率，只在必要时更新 DOM。
轻量小巧：Vue 的核心库只有约 20KB 的大小，易于集成到项目中。

<div id="app">
  <input type="text" v-model="inputValue">
  <p>{{ inputValue }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      inputValue: 'Hello Vue!'
    }
  });
</script>

Vue2 的安装与配置

使用 CDN

Vue.js 可以通过 CDN 引入，适合简单的项目或快速学习：

<!DOCTYPE html>
<html>
<head>
  <title>Vue2 Quick Start</title>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/[email protected]/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>

使用 npm

对于大型项目，推荐使用 npm 来安装 Vue：

npm install [email protected]

然后在项目中引入 Vue：

import Vue from 'vue';

配置 Vue

Vue 的配置文件 vue.config.js 可以用来配置项目。例如，设置打包输出目录：

module.exports = {
  outputDir: 'dist',
};

Vue2 的基本语法

数据绑定

Vue 使用特殊的语法来绑定数据到 HTML 元素上，这使得元素的内容或属性能够根据数据的变化而变化。

双向绑定

<div id="app">
  <input type="text" v-model="inputValue">
  <p>{{ inputValue }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      inputValue: 'Hello Vue!'
    }
  });
</script>

单向绑定

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

模板语法

Vue 使用模板语法来描述数据如何与视图进行绑定。模板语法包括插值、指令、条件渲染、循环渲染等。

插值

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

指令

指令是 Vue 中的一个特殊的以 v- 开头的属性，它允许开发者在 DOM 元素上添加特殊行为。例如 v-bind 和 v-on。

<div id="app">
  <a v-bind:href="url">Learn Vue</a>
  <button v-on:click="clickHandler">Click me</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org/'
    },
    methods: {
      clickHandler: function() {
        alert('Button clicked');
      }
    }
  });
</script>

条件渲染

<div id="app">
  <p v-if="visible">Hello Vue!</p>
  <p v-else>Not visible</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      visible: true
    }
  });
</script>

循环渲染

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

计算属性与方法

计算属性

计算属性是基于数据依赖的计算，只有在相关的数据变化时才会重新计算。例如：

<div id="app">
  <p>Computed value: {{ computedValue }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      a: 1,
      b: 2
    },
    computed: {
      computedValue: function() {
        return this.a + this.b;
      }
    }
  });
</script>

方法

方法是普通的函数，它们可以在模板中通过 v-on 指令调用。例如：

<div id="app">
  <button v-on:click="increment">Increment</button>
  <p>{{ count }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment: function() {
        this.count++;
      }
    }
  });
</script>

Vue2 的指令

常用指令

v-bind

v-bind 用来动态绑定 HTML 属性：

<div id="app">
  <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageUrl" alt="Image">
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      imageUrl: 'https://vuejs.org/images/logo.png'
    }
  });
</script>

v-on

v-on 用于监听 DOM 事件：

<div id="app">
  <button v-on:click="handleClick">Click me</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    methods: {
      handleClick: function() {
        alert('Button clicked');
      }
    }
  });
</script>

v-if

v-if 用于条件性地渲染元素：

<div id="app">
  <p v-if="visible">Hello Vue!</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      visible: true
    }
  });
</script>

指令的高级用法

动态指令名

指令可以使用动态值：

<div id="app">
  <button v-bind:[attrName]="value">Click me</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      attrName: 'disabled',
      value: true
    }
  });
</script>

指令参数

指令可以接受参数：

<div id="app">
  <p>{{ fullName }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  });
</script>

Vue2 的组件

组件的基本使用

组件是 Vue 中最强大的特性之一，它们可以被当成独立的可复用的组件来开发。

<div id="app">
  <my-component></my-component>
</div>
<script>
  Vue.component('my-component', {
    template: '<p>Hello from my-component!</p>'
  });
  var app = new Vue({
    el: '#app'
  });
</script>

组件的通信

Props

Props 是组件间通信的一种方式，从父组件传值给子组件。

<div id="app">
  <my-component value="Hello from parent"></my-component>
</div>
<script>
  Vue.component('my-component', {
    props: ['value'],
    template: '<p>{{ value }}</p>'
  });
  var app = new Vue({
    el: '#app'
  });
</script>

$emit

$emit 用于触发自定义事件，并传递数据给父组件。

<div id="app">
  <my-component v-on:custom-event="handleEvent"></my-component>
</div>
<script>
  Vue.component('my-component', {
    template: '<button v-on:click="triggerEvent">Click me</button>',
    methods: {
      triggerEvent: function() {
        this.$emit('custom-event', 'Hello from child');
      }
    }
  });
  var app = new Vue({
    el: '#app',
    methods: {
      handleEvent: function(value) {
        alert(value);
      }
    }
  });
</script>

插槽（slot）

插槽用于将内容传递到组件内部。

<div id="app">
  <my-component>
    <template v-slot:default>
      <p>Hello from slot</p>
    </template>
  </my-component>
</div>
<script>
  Vue.component('my-component', {
    template: `
    <div>
      <slot></slot>
    </div>
    `
  });
  var app = new Vue({
    el: '#app'
  });
</script>

Vue2 的生命周期

Vue 的生命周期描述了组件从创建到销毁的各个阶段。

生命周期钩子

Vue 组件在创建和销毁过程中会触发一系列的钩子，例如 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed。

钩子应用场景

beforeCreate：此时尚未初始化 data 和 computed，仅可用于访问 props 和 methods。
created：此时 data 和 props 已准备好。
beforeMount：此时 template 还未编译，DOM 还未挂载。
mounted：此时 template 已编译，DOM 已挂载，可使用 this.$el 访问元素。
beforeUpdate：此时 data 还未更新，DOM 尚未更新。
updated：此时 data 已更新，DOM 已更新。
beforeDestroy：此时组件即将销毁，进行一些清理工作。
destroyed：此时组件已销毁。

示例

<div id="app">
  <my-component></my-component>
</div>
<script>
  Vue.component('my-component', {
    template: `<div>{{ message }}</div>`,
    data: function() {
      return {
        message: 'Hello Vue!'
      };
    },
    beforeCreate: function() {
      console.log('beforeCreate: Component is being created, data and computed not available.');
    },
    created: function() {
      console.log('created: Component created and ready.');
    },
    beforeMount: function() {
      console.log('beforeMount: Component compiled, but not mounted to DOM yet.');
    },
    mounted: function() {
      console.log('mounted: Component compiled and mounted to DOM.');
    },
    beforeUpdate: function() {
      console.log('beforeUpdate: Component data is about to update.');
    },
    updated: function() {
      console.log('updated: Component data has updated.');
    },
    beforeDestroy: function() {
      console.log('beforeDestroy: Component is being destroyed.');
    },
    destroyed: function() {
      console.log('destroyed: Component has been destroyed.');
    }
  });
  var app = new Vue({
    el: '#app'
  });
</script>

Vue2 的路由与状态管理

Vue Router 的基本使用

Vue Router 是 Vue 官方的路由库，用于实现单页面应用的路由功能。

安装 Vue Router

npm install [email protected]

基本配置

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

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

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

路由组件示例

<div id="app">
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</div>

Home.vue 组件

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      message: 'Hello Home'
    };
  }
};
</script>

About.vue 组件

<template>
  <div>
    <h1>About Page</h1>
    <p>Welcome to the About page!</p>
  </div>
</template>
<script>
export default {
  name: 'About',
  data() {
    return {
      message: 'Hello About'
    };
  }
};
</script>

Vuex 的基本概念与使用

Vuex 是 Vue 官方的状态管理库，用于管理应用的全局状态。

安装 Vuex

npm install [email protected]

基本配置

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

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

使用 Vuex

<div id="app">
  <button v-on:click="increment">Increment</button>
  <p>{{ $store.state.count }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    methods: {
      increment: function() {
        this.$store.commit('increment');
      }
    }
  });
</script>

示例

<div id="app">
  <button v-on:click="increment">Increment</button>
  <p>{{ count }}</p>
</div>
<script>
  import Vue from 'vue';
  import Vuex from 'vuex';

  Vue.use(Vuex);

  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    }
  });

  new Vue({
    el: '#app',
    store,
    data: {
      count: store.state.count
    },
    methods: {
      increment() {
        this.$store.commit('increment');
        this.count = this.$store.state.count;
      }
    }
  });
</script>

通过以上介绍，您可以了解到 Vue2 的基础概念、语法、组件、生命周期、路由和状态管理等各方面的知识。掌握这些基本知识后，您可以更高效地进行 Vue 项目开发。希望这篇文章对您有所帮助！

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

牧羊人nacy

手記
篇

粉絲

6

獲贊與收藏

26

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

Pandas 入門教程

25個小節 19564 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue2 基礎知識入門教程

MVVM 模式

优势与特点

使用 CDN

使用 npm

配置 Vue

数据绑定

双向绑定

单向绑定

模板语法

插值

指令

条件渲染

循环渲染

计算属性与方法

计算属性

方法

常用指令

v-bind

v-on

v-if

指令的高级用法

动态指令名

指令参数

组件的基本使用

组件的通信

Props

$emit

插槽（slot）

生命周期钩子

钩子应用场景

示例

Vue Router 的基本使用

安装 Vue Router

基本配置

路由组件示例

Home.vue 组件

About.vue 组件

Vuex 的基本概念与使用

安装 Vuex

基本配置

使用 Vuex

示例

閱讀免費教程