Vue 基础知识

1、Vue.js 的核心概念

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心概念和功能使得前端开发更加灵活和高效。

1）响应式数据

Vue.js 使用了响应式数据绑定的概念，通过将数据与 DOM 元素绑定，实现数据的自动更新。

2）模板语法

Vue.js 使用基于 HTML 的模板语法，将 DOM 绑定到 Vue 实例的数据。

3）指令

指令（Directives）是特殊的 HTML 属性，提供了在 DOM 上添加特殊行为的能力。例如，v-bind 用于动态绑定属性，v-on 用于监听事件。

4）计算属性和侦听器：

计算属性可以基于响应式依赖进行复杂的数据计算，侦听器允许你在数据变化时执行异步或开销较大的操作。

5）组件化

Vue.js 鼓励通过组件化构建用户界面，每个组件都是一个独立的 Vue 实例，可以包含自己的模板、数据、方法等。

2、 Vue 实例

Vue.js 应用的核心是 Vue 实例，它是一个 Vue 对象，包含了你所需的组件、数据、方法等。

// 创建一个 Vue 实例
var app = new Vue({
  el: '#app', // 绑定到 id 为 app 的 DOM 元素上
  data: {
    message: 'Hello Vue!' // 数据对象，包含需要响应式更新的数据
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

3、Vue 模板语法

Vue 使用了基于 Mustache 的模板语法，用双大括号{{ }}进行数据绑定。

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

1）插值（Interpolation）

插值语法可以将变量渲染到 HTML 中。

2）指令（Directives）

指令是带有 v- 前缀的特殊属性，用于对 DOM 进行响应式操作。

<div id="app">
 <a v-bind:href="url">链接</a>
 </div>

<div id="app">
 <input v-model="message"
  placeholder="编辑我">
  <p>{{ message }}</p>
</div>

<div id="app">
 <p v-if="seen">现在你看到我了</p>
</div>

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

<div id="app">
 <button v-on:click="reverseMessage">
 反转消息</button>
 </div>

4、Vue 组件

Vue 组件可以封装可复用的代码块，每个 Vue 组件都是一个 Vue 实例，具有自己的模板、数据和行为。

<!-- 定义一个名为 todo-item 的新组件 -->
<template>
  <li>{{ todo.text }}</li>
</template>

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

5、Vue 路由和状态管理

1）Vue Router

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

// 安装路由插件
npm install vue-router

// 在 Vue 实例中使用路由
import VueRouter from 'vue-router';

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

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

2）Vuex

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

// 安装 Vuex
//npm install vuex

// 创建一个 store
import Vuex from 'vuex';

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

6、Vue.js 的生命周期钩子

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

使用示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function () {
    // 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
    console.log('beforeCreate')
  },
  created: function () {
    // 实例创建完成后被立即调用，这时候 data 已经被 observed，但是挂载阶段还没开始
    console.log('created')
  },
  mounted: function () {
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数
    console.log('mounted')
  },
  methods: {
    reverseMessage: function () {
 
  }
  }
});