第二课 数据绑定， 指令， 事件

示例代码：https://gist.github.com/huahua029/efbd989216d3701eca610521a6763138

2.1.1 vue实例和数据绑定

1.
通过构造函数 Vue 就可以创建一个 Vue 的根实例， 并启动 Vue 应用---入口

var app ＝new Vue({
    el:'',
    data:{
  } }
)

2. 必不可少的一个选项就是 el 。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。 也可以是css语法
3. 通过 Vue 实例的 data 选项， 可以声明应用内需要双向绑定的数据。 建议所有会用到的数据都预先在 data 内 声明， 这样不至于将数据散落在业务逻辑中， 难以维护。 也可以指向一个已经有的变量
4. 挂载成功后， 我们可以通过
   app.$el来访问该元素。

• 访问vue实例的属性，app.$el
• 直接data元素的属性， app.msg

2.1.2 生命周期钩子

jquery---$(document).ready()

• created 实例创建完成后调用， 此阶段完成了数据的观测等， 但尚未挂载， $el 还不可用。 需要初始化处理一些数据时会比较有用， 后面章节将有介
  绍． ----还未挂载
• mounted el 挂载到实例上后调用， 一般我们的第一个业务逻辑会在这里开始 。 相当于 $(document).ready()---刚刚挂载
  *beforeDestroy 实例销毁之前调用。 主要解绑一些使用 addEventListener 监听的事件等。

2.1.3 文本插值和表达式

语法： 使用双大括号（ Mustache 语法） “｛｛｝ ｝ ”是最基本的文本插值方法， 它会自动将我们双向绑定的数据实时显示出来，

用法
在｛ ｛ ｝ ｝ 中， 除了简单的绑定属性值外， 还可 以使用 JavaScript 表达式进行简单的运算 、 三元运算等
---实例
Vue .js 只支持单个表达式， 不支持语句和流控制。

{{ 6+6 *3}}---可以进行简单的运算 

{{ 6<3 ? msg :a}}---可以用三元运算符 

{{if(6>3){}}}-----注意： 文本插值的形式， 其中不能书写表达式,支持单个表达式

{{var a = 6}}--也是多行表达式----var a ;a = 6;
〈 ！ 一这是语旬， 不是表达式 一〉
{ { var book = ’ Vue . js 实战 ’ ｝ ｝
〈 ！ 一不能使用流控制， 要使用三元运算 一〉
{{ if (ok) return msg ))

第二课的2.2小节

过滤器

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添加选项 filters 来设置过滤器：{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和第三个参数

指令和事件

指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们快速完成DOM操作。循环渲染。显示和隐藏
本节目标 v-text , v-html , v-bind , v-on
v­-text:—————­解析文本 和{{ }} 作用一样
v­-html:————— 解析html
v­-bind—————–v­-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、class 等,本节只介绍基本章节，后面章节会更加深入详细讲述
v-­on——————它用来绑定事件监听器

v-­on具体介绍
在普通元素上， v­on 可以监听原生的 DOM 事件，除了 click 外，还有
dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据

vue中用 到的所有方法都定义在methods中
两个按钮，点击同时加数字？？？？思考

语法糖

语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 ， 从而更加方便程
序开发。
v-bind ——> : (冒号)
v-on ——> @