VUE的使用及常用代码和命令使用教程

本文链接：https://blog.csdn.net/weixin_52578852/article/details/146498639

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它易于上手，且功能强大，适合构建单页应用（SPA）和复杂的用户界面。以下是一个 Vue.js 的使用教程，涵盖基本概念、常用代码和命令。

1. 安装 Vue.js

安装：

你可以通过多种方式安装 Vue.js：

CDN：直接在 HTML 文件中引入 Vue.js 的 CDN 链接。

NPM：使用 Node.js 的包管理器 npm 安装 Vue.js。

Vue CLI：使用 Vue 官方提供的命令行工具快速搭建项目。

1.1 使用 CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1.2 使用 NPM

npm install vue

1.3 使用 Vue CLI

npm install -g @vue/cli
vue create my-project

2. 基本概念

2.1 Vue 实例

每个 Vue 应用都是通过创建一个 Vue 实例开始的。
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
在 HTML 中：
<div id="app">
  {{ message }}
</div>

2.2 数据绑定

Vue 使用双大括号 {{ }} 进行文本插值，也可以使用 v-bind 指令绑定 HTML 属性。
<div id="app">
  <p>{{ message }}</p>
  <p v-bind:title="message">Hover me!</p>
</div>

2.3 事件处理

使用 v-on 指令监听 DOM 事件。

<div id="app">
  <button v-on:click="sayHello">Click me</button>
</div>

var app = new Vue({
  el: '#app',
  methods: {
    sayHello: function () {
      alert('Hello Vue!');
    }
  }
});

2.4 条件渲染

使用 v-if 和 v-else 进行条件渲染。

<div id="app">
  <p v-if="seen">Now you see me</p>
  <p v-else>Now you don't</p>
</div>

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

2.5 列表渲染

使用 v-for 指令渲染列表。

<div id="app">
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
});

2.6 表单输入绑定

使用 v-model 指令实现表单输入和应用状态之间的双向绑定。
<div id="app">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

3. 组件化

Vue 组件是 Vue.js 的核心概念之一。组件可以扩展 HTML 元素，封装可重用的代码。

3.1 全局组件

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
});

在 HTML 中：

<div id="app">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

3.2 局部组件

var Child = {
  template: '<div>A custom component!</div>'
};

var app = new Vue({
  el: '#app',
  components: {
    'my-component': Child
  }
});

在 HTML 中：

<div id="app">
  <my-component></my-component>
</div>

4. 生命周期钩子

Vue 实例有一系列的生命周期钩子，可以在不同阶段执行自定义逻辑。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function () {
    console.log('Vue instance created');
  },
  mounted: function () {
    console.log('Vue instance mounted');
  },
  updated: function () {
    console.log('Vue instance updated');
  },
  destroyed: function () {
    console.log('Vue instance destroyed');
  }
});

5. 常用指令

v-bind：动态绑定 HTML 属性。

v-model：实现表单输入和应用状态之间的双向绑定。

v-if / v-else：条件渲染。

v-for：列表渲染。

v-on：事件监听。

v-show：根据条件显示或隐藏元素（通过 CSS 的 display 属性）。

6. 计算属性和侦听器

6.1 计算属性

计算属性是基于它们的依赖进行缓存的，只有在依赖发生变化时才会重新计算。
var app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

6.2 侦听器

侦听器用于观察和响应 Vue 实例上的数据变动。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    reversedMessage: ''
  },
  watch: {
    message: function (newVal) {
      this.reversedMessage = newVal.split('').reverse().join('');
    }
  }
});

7. 路由（Vue Router）

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页应用。

7.1 安装 Vue Router
npm install vue-router

7.2 基本使用

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app');

在 HTML 中：

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

8. 状态管理（Vuex）

Vuex 是 Vue.js 的状态管理库，用于集中管理应用的所有组件的状态。

8.1 安装 Vuex
npm install vuex

8.2 基本使用

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

Vue.use(Vuex);

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

const app = new Vue({
  store,
  computed: {
    count () {
      return this.$store.state.count;
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment');
    }
  }
}).$mount('#app');

在 HTML 中：

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">Increment</button>
</div>

9. 常用插件和工具

Vue Devtools：浏览器扩展，用于调试 Vue 应用。

Axios：用于发送 HTTP 请求。

Vuetify：Material Design 组件库。

Element UI：基于 Vue 的桌面端组件库。

10. 常用命令

10.1 Vue CLI 命令

创建新项目：
vue create my-project
启动开发服务器：
npm run serve
构建生产环境代码：
npm run build
运行单元测试：
npm run test:unit
运行端到端测试：
npm run test:e2e