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 中。
插值类型 | 描述及示例 |
文本插值 | 使用双大括号
将变量插值到模板中。
|
HTML 插值 | 使用 指令将 HTML 内容插值到模板中。
|
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 () {
}
}
});