Vue.js 是一款优秀的前端框架，使用该框架可以方便地构建出高质量、可维护、可扩展的前端应用程序。本文将介绍 Vue.js 的常用命令和常用组件，帮助大家更好地学习和使用 Vue.js。
常用命令
安装
首先，我们需要安装 Vue.js。有两种安装方式：
- 使用 npm 安装：
npm install vue
- 使用 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
创建 Vue 实例
在安装好 Vue.js 后，我们需要创建一个 Vue 实例。可以这样编写代码：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})这里创建了一个 Vue 实例并将其挂载到一个 HTML 元素上（该元素的 id 为“app”）。其中，data 属性用于定义数据，message 就是我们自定义的数据。在实例中，我们可以直接使用该数据。
指令
在 Vue.js 中，
- v-bind 指令用于绑定属性
- v-on 指令用于绑定事件
- v-model 指令用于实现数据双向绑定
- v-if 和 v-show 指令用于控制元素的显示与隐藏
下面是一个例子：
-- -------------------- ---- -------
---- ---------
------ ------- -------
---- --------------------- -------
------- --------------------------------- ----------------
------ ------------------
---- ----------------------
---- -------------------------
------
--------
--- --- - --- -----
--- -------
----- -
-------- ------ ------
--------- ------------------------------------
----- ----
--
-------- -
-------------- ---------- -
------------ - ------ --------
-
-
---
---------生命周期钩子函数
Vue.js 的生命周期钩子函数可以用于在某个生命周期阶段执行相应的操作。Vue.js 支持的生命周期钩子函数有很多，比如：
- beforeCreate（在实例初始化之后、数据观测之前调用）
- created（在实例创建完成后立即调用）
- beforeMount（在挂载开始之前被调用）
- mounted（在挂载结束后调用）
- beforeUpdate（在数据更新之前调用）
- updated（在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用）
- beforeDestroy（在实例销毁之前调用）
- destroyed（在实例销毁之后调用）
下面是一个例子：
-- -------------------- ---- -------
---- ---------
------ ------- -------
------- ----------------------------------------------
------
--------
--- --- - --- -----
--- -------
----- -
-------- ------ -----
--
-------- -
----------------- ---------- -
----------------
-
--
------------- ---------- -
----------------------------
--
-------- ---------- -
-----------------------
--
------------ ---------- -
---------------------------
--
-------- ---------- -
-----------------------
--
------------- ---------- -
----------------------------
--
-------- ---------- -
-----------------------
--
-------------- ---------- -
-----------------------------
--
---------- ---------- -
-------------------------
-
---
---------计算属性
Vue.js 中的计算属性可以用于根据已有的数据计算出一个新值。这个新值在计算属性中定义，然后可以像普通的数据一样在模板中使用。这样可以在模板中保持简洁，而且方便复用。
下面是一个例子：
-- -------------------- ---- -------
---- ---------
------ -------- -------
------ --------------------
------ -------------------
------
--------
--- --- - --- -----
--- -------
----- -
---------- -------
--------- -----
--
--------- -
--------- ---------- -
------ -------------- - - - - --------------
-
-
---
---------父子组件通信
在 Vue.js 中，父子组件通信也很重要。Vue.js 提供了 $emit 和 $on 方法用于实现父子组件之间的通信。
下面是一个例子：
-- -------------------- ---- -------
---- --- ---
---- ---------
------ ------- -------
------ -------------------- ---------------------------------
------
---- --- ---
--------
---------------------- -
------ ----------
--------- ------- -
------- ----- -------- -
-------- ---------------------------------------- -
---------
-------- -
--------- ---------- -
-----------------------
-
-
---
--- --- - --- -----
--- -------
----- -
-------- ------ ------
------ -
--
-------- -
--------- ---------- -
-------------
-
-
---
---------常用组件
路由
Vue.js 提供了 vue-router 库用于实现路由功能。Vue.js 中的路由分为两种：
- 基于哈希的路由（适用于移动端 Web 应用）
- 基于 HTML5 History API 的路由（适用于 Web 应用）
下面是一个例子：
-- -------------------- ---- -------
---- ---- ---
----------
-----
------ ---------------- -------
------
-----------
---- ---- ---
--------
----- ------ - --- -----------
------- -
- ----- --------------- ---------- ------- -
-
---
---------
---- ---- ---
---- ---------
-----
------------ ----------------------- ---------------
------------ ----------------------- ---------------
------
---------------------------
------
--------
----- --- - --- -----
------
------------------
---------Axios
Axios 是一个基于 Promise 的 HTTP 库，可以用于发送异步请求。它支持浏览器和 Node.js，并且拥有许多强大的特性，比如拦截请求和响应、自动转换 JSON 数据等等。
下面是一个例子：
-- -------------------- ---- -------
------- ---------------------------------------------------------
--------
----------------------
------------------------ -
---------------------------
--
---------------------- -
-------------------
---
---------vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每个 Vuex 应用的核心就是 store（仓库）。"store" 就是一个容器，它包含着你的应用中大部分的状态（state）。
下面是一个例子：
-- -------------------- ---- -------
------- -------------------------------------------------------
--------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
--------------
-
-
---
--- -----
--- -------
------
-------- -
---------- ---------- -
--------------------------------
-
--
--------- -
------ ---------- -
------ ------------------------
-
-
---
---------
---- ---------
------ ----- -------
------- -----------------------------------------
------总结
Vue.js 是一个功能强大、易学易用的前端框架，它的常用命令和常用组件可以帮助我们更加高效地开发前端应用程序。希望本文能给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465a070968c7c53b064ee35