本文链接：https://blog.csdn.net/m0_70246756/article/details/135264400

构建用户界面它基于JavaScript框架，html，css和JavaScript构建，并提供了一套声明式，组件化的编程模型，帮助开发者高效地开发用户界面。提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API

特点：

简洁，数据驱动，组件化，轻量，快速，模块友好

基础：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

// 第一步：引入vue.js

<script src="../js/vue.js"></script> </head> <body>

// 第二步：创建根节点

<div id="app">

</div>

<script>

// 第三步：初始化vue实例，绑定根节点

var app= new Vue({

el: "#app",

data: {

msg: "第一个vue实例!",

}) </script> </body></html>

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，对象（Object）的形式，函数（Function）的形式。

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例

常用指令：

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，写在事件之后，用“.”号连接，如“v-on:click.once”表示点击事件只触发一次。

事件修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件
.capture	添加事件监听器时使用事件捕获模式
.self	将事件绑定到该元素本身，只有自身才能触发
.once	事件只触发一次

键盘事件的修饰符：在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：

.enter	监听enter回车键的触发
.tab	监听tab键的触发
.up、.down 、.left、 .right	监听上、下、左、右键的触发
ctrl	监听ctrl键的触发
。。。。。。

计算属性 computed

一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：

下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>{{reverseMsg}}</p></div>

new Vue({

el:'#app',

data:{

msg:'hello'

computed:{

reverseMsg(){