浅谈Vue的双向绑定
1、v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来操作页面 DOM 的更新。 基本用法接下来我们将详细介绍 v-model 在不同表单元素上的使用。
2、再进一步分析，双向绑定是一个发布订阅模式，在 vue 中，依赖是通过 Object.defineProperty 中的 get 进行收集，也就是当读取属性的时候。
3、 v-bind是单向绑定，用法是在后边写上冒号，例如，msg是定义的变量，当msg的值更新后会更新到input控件；v-model是双向绑定，当控件的值发生改变时，msg的值也会进行更新，例如。
4、我们开发常用vue的双向绑定，他双向绑定究竟是怎么实现的呢？其实是用到了Object.defineProperty，下面我们就先了解一下它包含的属性方法。
5、可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。
vue.js框架中,下面绑定表达式无效的是
1、Vue.js是通过数据驱动的， Vue. js实例化对象将DOM和数据进行绑定，一旦绑定，和数据将保持同步，每当数据发生变化，DOM也会随着变化。 ViewModel是Vue.js的核心，它是 Vue.js的一个实例。
2、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vue.js 是构建客户端应用程序的框架。
3、在Vue.js中，模板表达式中可以使用一些基本的运算符和表达式来对变量进行处理和计算。例如，可以使用加减乘除、取模、三目运算符等等。
彻底理解vue双向数据绑定
Vue 主要通过以下 4 个步骤来实现数据双向绑定的：实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。
vue双向数据绑定是通过 数据劫持 结合 发布订阅模式 实现的，数据和视图同步，即数据发生变化，视图跟着变化，视图变化，数据也随之发生改变 核心：Object.defineProperty()参数： obj ：要定义属性的对象。
v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来操作页面 DOM 的更新。
于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model=name和{{name}}有两个对应的订阅者，各自管理自己的地方。
可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。
Dep是Observer与Watcher之间的纽带，也 可以认为Dep是服务于Observer的订阅系统 。Watcher订阅某个Observer的Dep，当Observer观察的数据发生变化时，通过Dep通知各个已经订阅的Watcher。
第六节:Vue指令:v-bind动态属性绑定
通过 v-bind 指令给 DOM 元素动态绑定 Class 和 Style，一般用于根据不同数据状态切换元素样式的场景下。我们可以通过数组和对象的两种形式绑定元素的 Class。
v-bind：给元素绑定属性。v-on：给元素绑定事件。v-html：给元素绑定数据，且该指令可以解析html标签。v-text：给元素绑定数据，不解析标签。v-model：数据双向绑定。v-for：遍历数组。
data中创建一个属性i。 li注册一个click事件并把$index的值传进去，在这个事件中把i赋值为$index。
v-bind：用于绑定属性，通过v-bind：绑定过的属性，可以直接在属性值写表达式。可以简写为：v-on：用于绑定事件，通过v-on：绑定过的事件，可以指定vue实例定义的方法。
v-show：根据表达式之真假值，切换元素的display CSS 属性。v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 0 以上必须需配合key值使用。v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。
vue动态绑定class
1、通过 v-bind 指令给 DOM 元素动态绑定 Class 和 Style，一般用于根据不同数据状态切换元素样式的场景下。我们可以通过数组和对象的两种形式绑定元素的 Class。
2、系统bug，网络问题。系统bug是vue动态绑定软件系统出现了问题导致class改变字体颜色不生效，等待官方修复即可。网络问题是自身设备连接的网络出现较大波动，导致vue动态绑定class改变字体颜色不生效，更换网络重新打开即可。
3、动态绑定class 1 ：class={active：activeIndex==0} active是类名，当activeIndex==0为true时，active起作用。
4、因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
Vue绑定class与绑定内联样式--v-bind
因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
通过 v-bind 指令给 DOM 元素动态绑定 Class 和 Style，一般用于根据不同数据状态切换元素样式的场景下。我们可以通过数组和对象的两种形式绑定元素的 Class。
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
data中创建一个属性i。 li注册一个click事件并把$index的值传进去，在这个事件中把i赋值为$index。
innerText无法解释html格式 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。
绑定方式是使用对象 v-bind：class={ }。对象{ }由键值对构成，键是类名，值是布尔值。如下所示：可以把对象绑定成一个 methods，或使用 computed 计算属性。