许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

事件处理 1、监听事件 什么是监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 【案例】 {代码...} 2、方法事件处理器 为什么要用方法事件处理器 因为许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。 【案例】 {代码...

fixed固定定位（参照物--浏览器窗口）---做 弹窗广告用到生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

浏览器兼容问题 1、什么是浏览器兼容 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。 2、浏览器兼容产生的原因 因为不同浏览器使用内核及所支持的HTML等网页语言标准不同； 以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。 最常见...

vue Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理它们：我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象...

在使用 v-if 控制元素的时候，我们需要将它添加到这个元素上去。然而如果要切换很多元素的时候，一个个的添加就太麻烦了。这时候就可以使用 < template > 将一组元素进行包裹，并在上面使用 v-if。最终的渲染结果不会包含 < template > 元素。

列表渲染 1、用 v-for 把一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名 {代码...} 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。 {代码...} 1.1、一个对象的 v-for {代码...}...

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。

如上，我们先给 .exp 一个边框，我们利用 v-bind 方法传入一个新的 class 属性 .newExp，设置一个蓝色的背景颜色。当我们在控制台修改 .newExp 的属性为 true 时，会给 div 添加一个蓝色的背景颜色。

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀==主要针对不同的阅览器==

条件渲染 1、v-if v-if指令就是插入节点或删除节点 1.1、在 <template> 中配合 v-if 条件渲染一整组 【案例】将下面3个以整组的形式显示出来 {代码...} 1.2、v-else 和 v-else-if v-if指令可以和v-esle连写 【案例】 {代码...} 1.4、用 key 管理可复用的元素 以下示例说明示例中的2个两个模板使用了相同的元素，如...

我们知道 js 里面有 if 判断语句是 if 和else if 和 else 配合使用，所以 vue 也为我们提供了一个 v-else-if 和 v-else 指令与 v-if 配合使用,但是 v-else-if 和 v-else 必须紧跟在 v-if 或者 v-else-if 元素之后。

class与style绑定 1、绑定HTML class 1.1、对象语法 如果数据属性 发生改变，class 列表将相应地更新。 【案例】 {代码...} 此外v-bind:class 指令也可以与普通的 class 属性共存。 【例如】 {代码...} 我们也可以直接绑定数据里的一个对象 【案例】 {代码...} 我们也可以在这里绑定返回对象的计算属性。这是一个常用且...

上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值 。我们也可以在对象中传入更多的属性来自由的切换class的值，不仅如此，v-bind还可以与普通的class共存。

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

选项卡 运行效果 原理分析和实现 1、动态切换class 2、v-show，根据表达式之真假值，切换元素的 display CSS 属性。 下面直接进入正题 完整代码 css部分 {代码...} HTML部分（视图） {代码...} JavaScript部分（模型） {代码...} 喜欢的可以点赞加收藏

vue.js 之 对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数，编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫做实例化 3 . 构造函数需要将其实例化后才会启用 var vm = new Vue({ //...}) 4 . Vue构造器要求实例化时需要传入一个选项对象 {代码...} {代码...} 如：{{msg}} 1）{{ms...

Vue实例 构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的： {代码...} 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。 {代码...} 所有的 Vue.js 组件其实都是被扩展的 Vue 实例。 属性与方法 每个 Vue 实例都会代理其 data 对象里所有...

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

每个 Vue 实例都会代理其 data 对象里所有的属性，这些被代理属性是响应的。也就是说值的任何改变都是触发视图的重新渲染。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

计算属性 1、计算属性（computed） a、基础例子 【案例】 {代码...} b、计算属性的缓存 vs method 方法 我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意...

vue.js vue.js 的构造 new Vue({}) new new MyComponent() 属性与方法 vue会代理其data对象里所有的属性 例如 data.a=vn.a vm.$id \vm.$data等 生命周期函数实例 (例如，实例需要配置数据观测(data observer)、编译模板、挂载实例到 DOM ，然后在数据变化时更新 DOM 。) ==钩子函数== *created（创建后）*mounted（载入...

模板语法 1、插值 a、文本 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值 我们在普通插值的时候无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新 【案例】 {代码...} 我们在使用 v-once指令的时候，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 【案例】...

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供...

vue是一套构建用户界面的渐进式框架，是mvvm框架的一种。vue采用了自底向上增量开发的设计，其核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目整合。

vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就...