Vue 基础知识

Vue.js 是一个流行的前端 JavaScript 框架,用于构建交互式的用户界面。可以使用它来向现有 HTML 页面添加交互性,或者逐步构建整个单页应用程序。Vue 提供了一种声明式的语法来描述用户界面,并且可以高效地更新和渲染 DOM 以响应数据更改。

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 中。

插值类型

描述及示例

文本插值

使用双大括号

{{}}

将变量插值到模板中。

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

HTML 插值

使用 v-html

指令将 HTML 内容插值到模板中。

<div id="app"> <p v-html="rawHtml"></p> </div>

2)指令(Directives)

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

指令

描述及示例

v-bind

用于绑定 HTML 属性。

示例如下:

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

v-model

用于双向数据绑定。

示例如下:

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

v-if

用于条件渲染。

示例如下:

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

v-for

用于列表渲染。

示例如下:

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

v-on

用于事件监听。

示例如下:

<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 实例有一系列的生命周期钩子函数,可以让我们在实例生命周期的不同阶段执行自定义逻辑。

钩子函数

说明

beforeCreate

实例初始化之后,

数据观测和事件配置之前调用。

created

实例已经创建,完成数据观测和事件配置,但 DOM 渲染还没开始。

beforeMount

在挂载开始之前被调用,相关的

render

函数首次被调用。

mounted

el 被新创建的 vm.$el替换,

并挂载到实例上之后调用。

beforeUpdate

数据更新时调用,

发生在虚拟 DOM 打补丁之前。

updated

由于数据更改导致的虚拟 DOM 重新渲染

和打补丁之后调用。

beforeDestroy

实例销毁之前调用。

实例仍然完全可用。

destroyed

实例销毁后调用。调用后,

所有的事件监听器被移除,

所有子实例也会被销毁。

activated

被 keep-alive 缓存的组件激活时调用。

deactivated

被 keep-alive 缓存的组件停用时调用。

errorCaptured

当捕获一个来自子孙组件的错误时被调用。

renderTracked

响应式依赖被追踪时调用。

renderTriggered

响应式依赖被触发时调用。

使用示例:

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 () {
 
  }
  }
});

推荐阅读
cjavapy编程之路首页