Vue

v-on基础 事件监听 在前端开发中，我们需要经常和用于交互 这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等 在Vue中如何监听事件呢？使用v-on指令 v-on介绍 作用：绑定

计算属性 为了解决的问题就是多次调用值计算的时候比较繁琐，我们定义计算属性，和methods一样的方式，在computed中定义方法，可以像属性一样调用该方法，有点像python中的静态方法的意思。

v-bind绑定style（一） 我们可以利用v-bind:style来绑定一些CSS内联样式。 在写CSS属性名的时候，比如font-size 我们可以使用驼峰式 (camelCase) fontS

v-bind绑定class（二） 绑定方式：数组语法 数组语法的含义是:class后面跟的是一个数组。 数组语法有下面这些用法：

v-bind绑定class（一） 很多时候，我们希望动态的来切换class，比如： 当数据为某个状态时，字体显示红色。 当数据另一个状态时，字体显示黑色。 绑定class有两种方式： 对象语法 数组语

v-bind介绍 前面我们学习的指令主要作用是将值插入到我们模板的内容当中。 但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。 比如动态绑定a元素的href属性 比如动态绑定img元素的

v-cloak(斗篷) 出现一种现象：当我们的从上倒下运行的代码比较慢的时候，js可能卡住，这样的话，在界面上会显示胡子语法{{message}},在js运行通畅的时候才会加载出来数据。 效果如下：

v-pre v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法 比如下面的代码： 第一个h2元素中的内容会被编译解析出来对应的内容 第二个h2元素中会直接显示{{mes

v-text v-text作用和Mustache比较相似：都是用于将数据显示在界面中 v-text通常情况下，接受一个string类型

v-html 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内

v-once 但是，在某些情况下，我们可能不希望界面随意的跟随改变 这个时候，我们就可以使用一个Vue的指令 v-once: 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的) 该

Mustache(大胡子)语法 如何将data中的文本数据，插入到HTML中呢？ 我们已经学习过了，可以通过Mustache语法(也就是双大括号)。 Mustache: 胡子/胡须. 我们可以像下面这

wedstorm中设置模板 作用： 简化代码 步骤： file ---> settings Editor--->live template 在html中选择添加vue模板 在下面编写vue模板 在模板

Vue的生命周期 生命周期：事务从诞生到消亡的整个过程 vue的生命周期 官网原图： 汉化改进版 简化版本

创建Vue实例传入的options 你会发现，我们在创建Vue实例的时候，传入了一个对象options。 这个options中可以包含哪些选项呢？ 详细解析： https://cn.vuejs.org

Vue中的MVVM 什么是MVVM呢？ 通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科) https://zh.wikipedia.org/wiki/MVVM 维基百科的官方

案例：计数器 案例效果如下： 现在，我们来实现一个小的计数器 点击 + 计数器+1 点击 - 计数器 -1 这里，我们又要使用新的指令和属性了 新的属性：methods，该属性用于在Vue对象中定义方

Vue列表展示 现在，我们来展示一个更加复杂的数据：数据列表。 比如我们现在从服务器请求过来一个列表 希望展示到HTML中。 HTML代码中，使用v-for指令 该指令我们后面会详细讲解，这里先学会使

Vuejs初体验 我们来做我们的第一个Vue程序，体验一下Vue的响应式 代码做了什么事情？ 我们来阅读JavaScript代码，会发现创建了一个Vue对象。 创建Vue对象的时候，传入了一些opti

认识Vuejs 为什么学习Vuejs 我相信每个人学习Vue的目的是各不相同的。 可能你的公司正要将原有的项目使用Vue进行重构。 也可能是你的公司新项目决定使用Vue的技术栈。 当然，如果你现在正在