前端 Vue 基础知识

I. Vue.js 简介

A. Vue.js 是什么

Vue.js 是一款流行的 JavaScript 框架，用于构建交互式 Web 界面。它采用了 MVVM（Model-View-ViewModel）架构模式，将用户界面和数据分离，提高了代码的可维护性和可测试性。

B. Vue.js 的历史

Vue.js 由中国开发者尤雨溪于2014年开始开发，2016年正式发布第一个稳定版本。自发布以来，Vue.js 已经成为了当今 Web 开发中最受欢迎的前端框架之一。

C. Vue.js 的优势

Vue.js 具有以下优势：

• 轻量级：Vue.js 的核心库只有 20KB 左右，不仅体积小，运行速度也很快。
• 可组件化：Vue.js 支持组件化开发，这使得代码更加模块化、可复用、易于维护。
• 数据驱动：Vue.js 使用单向数据绑定机制，将数据和视图分离，提高了代码的可维护性和可测试性。
• 面向对象：Vue.js 采用了 MVVM 架构模式，将业务逻辑与视图分离，降低了代码的耦合度。

II. Vue.js 基础

A. Vue.js 核心概念

1. 模板语法

Vue.js 的模板语法类似于 Mustache，使用双括号 {{}} 来绑定数据。

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

2. 生命周期钩子

Vue.js 组件有一些生命周期钩子函数，可以在组件的不同阶段执行相应的操作。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  },
  created: function () {
    console.log('created')
  },
  beforeMount: function () {
    console.log('beforeMount')
  },
  mounted: function () {
    console.log('mounted')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')
  },
  updated: function () {
    console.log('updated')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy')
  },
  destroyed: function () {
    console.log('destroyed')
  }
})

3. 计算属性和监视

Vue.js 提供了计算属性和监视机制，可以自动更新数据。

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

4. 组件

Vue.js 的组件化机制使得代码更加模块化、易于维护。

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    props: {
      title: String,
      items: Array
    }
  }
</script>

B. Vue.js 实例

1. 创建 Vue.js 实例

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

2. 数据与方法

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    sayHello: function () {
      alert(this.message)
    }
  }
})

3. 生命周期

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  },
 created: function () {
    console.log('created')
  },
  beforeMount: function () {
    console.log('beforeMount')
  },
  mounted: function () {
    console.log('mounted')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')
  },
  updated: function () {
    console.log('updated')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy')
  },
  destroyed: function () {
    console.log('destroyed')
  }
})

C. 模板语法

1. 插值

Vue.js 的插值语法可以将数据绑定到 HTML 中。

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

2. 指令

指令是 Vue.js 扩展 HTML 的一种方式，常用的指令有 v-if、v-for、v-bind 和 v-on 等。

<div id="app">
  <p v-if="show">{{ message }}</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <input v-bind:value="message" v-on:input="updateMessage">
  <button v-on:click="sayHello">Say Hello</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    show: true,
    items: ['item1', 'item2', 'item3']
  },
  methods: {
    sayHello: function () {
      alert(this.message)
    },
    updateMessage: function (event) {
      this.message = event.target.value
    }
  }
})

3. 过滤器

Vue.js 的过滤器可以对数据进行格式化。

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'hello vue.js!'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

4. 缩写

Vue.js 提供了一些常用的指令缩写，方便开发。

<div id="app">
  <p v-show="show">{{ message }}</p>
  <input :value="message" @input="updateMessage">
  <button @click="sayHello">Say Hello</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    show: true
  },
  methods: {
    sayHello: function () {
      alert(this.message)
    },
    updateMessage: function (event) {
      this.message = event.target.value
    }
  }
})

III. Vue.js 组件

A. 组件的基本概念

组件是 Vue.js 中的一个重要概念，可以将一个页面拆分成多个组件，提高代码的可维护性和可重用性。

B. 组件的定义方式

Vue.js 组件有三种定义方式：全局组件、局部组件和单文件组件。

1. 全局组件

Vue.component('my-component', {
  template: '<div>My Component</div>'
})

2. 局部组件

new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>My Component</div>'
    }
  }
})

3. 单文件组件

<template>
  <div>My Component</div>
</template>

<script>
  export default {
    name: 'MyComponent'
  }
</script>

C. 组件通信

1. 父子组件通信

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

<template>
  <div>
    <h2>{{ title }}</h2>
    <my-child-component :items="items"></my-child-component>
  </div>
</template>

<script>
  import MyChildComponent from './MyChildComponent.vue'

  export default {
    name: 'MyParentComponent',
    components: {
      MyChildComponent
      },
    data() {
      return {
        title: 'Parent Component',
        items: ['item1', 'item2', 'item3']
      }
    }
  }
</script>

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

<script>
  export default {
    name: 'MyChildComponent',
    props: {
      items: Array
    }
  }
</script>

2. 子父组件通信

子组件可以通过 $emit 向父组件发送事件。

<template>
  <div>
    <input v-model="message">
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
  export default {
    name: 'MyChildComponent',
    data() {
      return {
        message: ''
      }
    },
    methods: {
      sendMessage() {
        this.$emit('message', this.message)
      }
    }
  }
</script>

<template>
  <div>
    <my-child-component @message="handleMessage"></my-child-component>
  </div>
</template>

<script>
  import MyChildComponent from './MyChildComponent.vue'

  export default {
    name: 'MyParentComponent',
    components: {
      MyChildComponent
    },
    methods: {
      handleMessage(message) {
        alert(message)
      }
    }
  }
</script>

D. 组件生命周期

Vue.js 组件有一些生命周期钩子函数，在组件的不同阶段执行相应的操作。

<template>
  <div>
    <h2>{{ title }}</h2>
    <my-child-component :items="items"></my-child-component>
  </div>
</template>

<script>
  import MyChildComponent from './MyChildComponent.vue'

  export default {
    name: 'MyParentComponent',
    components: {
      MyChildComponent
    },
    data() {
      return {
        title: 'Parent Component',
        items: ['item1', 'item2', 'item3']
      }
    },
    beforeCreate() {
      console.log('parent beforeCreate')
    },
    created() {
      console.log('parent created')
    },
    beforeMount() {
      console.log('parent beforeMount')
    },
    mounted() {
      console.log('parent mounted')
    },
    beforeUpdate() {
      console.log('parent beforeUpdate')
    },
    updated() {
      console.log('parent updated')
    },
    beforeDestroy() {
      console.log('parent beforeDestroy')
    },
    destroyed() {
      console.log('parent destroyed')
    }
  }
</script>

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

<script>
  export default {
    name: 'MyChildComponent',
    props: {
      items: Array
    },
    beforeCreate() {
      console.log('child beforeCreate')
    },
    created() {
      console.log('child created')
    },
    beforeMount() {
      console.log('child beforeMount')
    },
    mounted() {
      console.log('child mounted')
    },
    beforeUpdate() {
      console.log('child beforeUpdate')
    },
    updated() {
      console.log('child updated')
    },
    beforeDestroy() {
      console.log('child beforeDestroy')
    },
    destroyed() {
      console.log('child destroyed')
    }
  }
</script>

IV. Vue.js 路由

A. 路由的基本概念

Vue.js 路由是指通过 URL 来进行页面之间的跳转。

B. Vue.js 路由的实现

Vue.js 路由可以通过 vue-router 这个插件来实现。

1. 安装 vue-router

npm install vue-router

2. 定义路由

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

export default router

3. 使用路由

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

4. 路由传参

可以通过在路由路径中添加参数来实现路由传参。

const routes = [
  { path: '/user/:id', component: User }
]

在组件中可以通过 $route.params 来获取传递的参数。

<template>
  <div>
    <h2>User {{ $route.params.id }}</h2>
  </div>
</template>

5. 嵌套路由

可以通过嵌套路由来实现组件之间的嵌套关系。

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

在组件中可以通过 <router-view> 标签来实现子路由的渲染。

<template>
  <div>
    <h2>Parent</h2>
    <router-view></router-view>
  </div>
</template>

6. 路由守卫

路由守卫可以在路由跳转时执行一些操作，比如验证用户是否有权限访问该页面。

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // 验证用户是否有权限访问该页面
  if (to.meta.requiresAuth) {
    if (auth.loggedIn()) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

export default router

可以在路由定义中添加 meta 属性来指定路由是否需要验证权限。

const routes = [
  {
    path: '/user/:id',
    component: User,
    meta: { requiresAuth: true }
  }
]

C. Vue.js 路由的实例

下面是一个完整的 Vue.js 路由实例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

  const app = new Vue({
    el: '#app',
    router,
    data() {
      return {
        title: 'Vue.js Router Demo'
      }
    }
  })
</script>