Vue 基础点

• 1 什么是 Vue？

 比JQuery用起来更加精简的前端框架

• 2 Vue 中的监听事件

1. 在 js 里为 Vue 对象的数据设置为 clickNumber
2. methods 新建 count 方法
3. v-on:click 添加事件处理
4. v-on 可以缩写为 @
5. 事件修饰符 阻止冒泡 .stop， 点击事件添加 v-on:click.stop
6. 事件修饰符 优先触发 .capture
7. 事件修饰符 只有自己能触发，子元素无法触发.self
8. 事件修饰符 只能提交一次 .once
9. 事件修饰符 阻止提交 .prevent ?

 

  
一共点击了  {{clickNumber}}次
   
  点击

  

• 3 Vue 中的条件语句

1. 同样要在js中设置数据
2. methods 中添加方法
3. 元素中 添加v-if 标签

  切换隐藏显示
  
 默认这一条是看得见的
     

• v-for Vue循环语句

1 index用法 *** 通过如下方式可以获取遍历下标

data:   {
    heros:data
}

    {{hero.name}}
    {{hero.hp}}
   

• 4 v-bind 做属性绑定

通过v-bind进行属性绑定
http://Google.com
简写 v-bind:href  可以简写成 :href

• 5 v-model 双向绑定

修饰符
.lazy 加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了
.number
.trim trim 去掉前后的空白

     
    hero name: 
    提交数据
     

    

双向绑定是数据与视图的双向绑定，当 数据发生变化 视图也会跟着改变，传统的方式需要先获取标签再更改数据，是单向绑定。

• 6 computed计算属性

* 1 computed 和 methods 的区别
 computed 是有缓存的，  这样如果是复杂计算，就会节约不少时间。 而methods每次都会调用

*2 也可以通过watch 监听属性来设置 

• 7 自定义指令
  像 v-if, v-bind, v-on 以外, 开发者还可以开发 自定义的指令

1 .简单例子
2 .带参数的自定义指令

1. 使用Vue.directive 来自定义
2. 第一个参数就是 指令名称 xart
3. el 表示当前的html dom对象
4. 在方法体力就可以通过 innerHTML style.color 等方式操控当前元素了
 
Vue.directive('xart', function (el) {
    el.innerHTML = el.innerHTML + ' ( x-art ) '
    el.style.color = 'pink'
})

使用方式：
 好好学习，天天向上 

v-xart=“xxx” 这个xxx。 此时xxx是一个json对象，所以就可以通过.text, .color取出对应的值出来。
 
Vue.directive('xart', function (el,binding) {
    el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
    el.style.color = binding.value.color
})
视图上用就传递个json 对象进去
 好好学习，天天向上