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 ?

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
 
<div id="div1">
  <div>一共点击了  {{clickNumber}}次</div>   
  <button v-on:click="count">点击</button>
</div>
  
<script>
new Vue({
      el: '#div1',
      data: {
          clickNumber:0
      },
      methods:{
          count: function(){
              this.clickNumber++;
          }
      }
    })
</script>

• 3 Vue 中的条件语句

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="div1">
  <button v-on:click="toggle">切换隐藏显示</button>
  <div v-if="show"> 默认这一条是看得见的</div>     
</div>
<script>
    
new Vue({
      el: '#div1',
      data: {
          show:true
      },
      methods:{
          toggle: function(){
              this.show=!this.show;
          }
      }
    }) 
</script>

• v-for Vue循环语句

1 index用法 *** 通过如下方式可以获取遍历下标 <tr v-for="hero,index in heros">

data:   {
    heros:data
}
<tr v-for="hero in heros">
    <td>{{hero.name}}</td>
    <td>{{hero.hp}}</td>
</tr>   

• 4 v-bind 做属性绑定

通过v-bind进行属性绑定
<a v-bind:href="page">http://Google.com</a>
简写 v-bind:href  可以简写成 :href

• 5 v-model 双向绑定

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

<div id="div1">
     
    hero name: <input v-model="name" >
    <button @click="doClick" >提交数据</button>
     
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data:{
        name:"teemo"
      },
      methods:{
          doClick:function(){
              alert(this.name);
          }
      }
    })
    
</script>
双向绑定是数据与视图的双向绑定，当 数据发生变化 视图也会跟着改变，传统的方式需要先获取标签再更改数据，是单向绑定。

• 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'
})

使用方式：<div v-xart> 好好学习，天天向上 </div>

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 对象进去
<div v-xart="{color:'red',text:'best learning video'}"> 好好学习，天天向上 </div>