vue笔记

Vue学习笔记

版本是：vue2

安装

使用 npm 安装 Vue：

npm install vue  # 注意vue版本默认可能是3 或者安装脚手架 npm install  -g  @vue-cli@版本号 

或者通过 CDN 引入：

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

核心组成部分

Vue 2 的核心组成部分包括：

• 模板语法：Vue 使用模板语法来声明应用的视图。
• 组件系统：Vue 允许开发者把页面拆分成可重用的组件。
• 响应式系统：Vue 提供了一个响应式系统来追踪数据的变化，并在变化发生时更新页面。
• 指令：Vue 提供了一系列指令，如 v-if、v-for、v-bind、v-on 等，用于操作 DOM。
• 生命周期函数：Vue 组件有一些生命周期函数，如 created、mounted、updated、destroyed 等，用于在组件的不同阶段执行代码。

代码例子

下面是一个简单的 Vue 示例：

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

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

这个示例定义了一个名为 app 的 Vue 实例，它把一个包含 {{ message }} 的 div 元素挂载到 id 为 app 的元素上，并且定义了一个数据属性 message，它的初始值为 'Hello, Vue!'。

当 Vue 实例的数据发生改变时，页面上的内容也会相应地更新。

常见使用代码

条件渲染

使用 v-if 指令来根据条件渲染一个元素：

<div v-if="isShow">This is a div.</div>

循环渲染

使用 v-for 指令来循环渲染一个列表：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

绑定属性

使用 v-bind 指令来动态绑定一个属性：

<img v-bind:src="imageUrl">

或者使用简写：

<img :src="imageUrl">

监听事件

使用 v-on 指令来监听一个事件：

<button v-on:click="doSomething">Click me</button>

或者使用简写：

<button @click="doSomething">Click me</button>

计算属性

使用计算属性来根据数据动态计算出一个值：

<div>{{ fullName }}</div>

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

常见模块和使用方法

vue-router

注意:vue3在使用某些模块可能依然存在不兼容的情况，实际使用请尽量锁定模块的版本

Vue Router 是 Vue 官方的路由管理器，它可以帮助我们在单页面应用中管理路由，实现组件之间的切换。

安装：

npm install vue-router

使用：

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

vuex

Vuex 是 Vue 官方的状态管理库，它可以帮助我们在应用中管理共享状态。

安装：

npm install vuex

使用：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

axios

Axios 是一个基于 Promise 的 HTTP 库，它可以帮助我们在应用中发送 HTTP 请求。

安装：

npm install axios

使用：

import axios from 'axios'

axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

Element UI

Element UI 是一套基于 Vue 2.0 的桌面端组件库，它包含了各种常用组件，如按钮、表单、对话框等。

安装：

npm install element-ui

使用：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

以上是一些常见的 Vue 模块和使用方法，还有很多其他的模块和插件可以用来扩展 Vue 应用的功能，具体可以参考官方文档。