一、v-for

<tr v-for="item in list" :key="item.id">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.ctime }}</td>
    <td>
        <a href="">删除</a>
    </td>

</tr>
var vm = new Vue({
  el: '#app',
  data:{
    list:[
      { id: 1, name: '奔驰', ctime:  new Date()},
      { id: 2, name: '宝马', ctime:  new Date()}
   ]
  }
});

二、添加

  xx.push()

三、数组中的查找

  xx.some(参数1)

  在.some()中,如果return true,就会终止这个数组的后续循环

  .findIndex()    快速找到索引

  forEach()循环

  forEach smoe filter findIndex  这些都是属于数组的新方法、都会对数组中的每一项进行遍历,执行相关操作

  forEach 没有办法被终止 some findIndex 可以通过return true 来终止

  filter 可以把查询到的组成一个新数组

  .includes(要包含的字符串) 如果包含返回true 不包含返回false

四、过滤器

  过滤器只能在 插值表达式 和 v-bind 中使用

  过滤器调用时的格式        {{ name(原内容) | nameope(过滤的表达式) }}  ==》过滤后的内容

  定义过滤器   Vue.filter('过滤器的名称',function(){要对传过来的数据做什么处理})

Vue.filter('msgFormat',function(data){

            return data.replace('i','you')
})
<p> {{ msg | msgFormat }} </p>

  定义私有过滤器

filters: {   //定义私有过滤器 
                dateFormat: function(dateStr,pattern){
                    var dt = new Date(dateStr);

                    var y = dt.getFullYear()
                    var m = dt.getMonth() + 1
                    var d = dt.getDate()

                    return `${y}-${m}-${d}`
                }

            }

 五、定义指令

  1.定义全局指令

  Vue.directive(‘xx’,{})      参数2是个对象,这个对象身上有一些指令相关的函数

  使用指令时要用  v-xx

  

Vue.directive('focus',{  
            bind:function(el){   //在内存中调用
                // 在每个函数中第一个参数永远是el ,表示被绑定的指令的元素
                
            },   //每当指令绑定到元素上的时候,会立即执行这个  bind 函数 只执行一次    el为绑定的元素
            inserted:function(){    //在页面中调用
          el.focus()
},  //表示元素插入到 dom 中的时候 会执行
            updated:function(){}    //当 vnode 更新的时候,会执行,可能会触发多次
        })

  2.钩子函数参数

    el:所绑定的元素

    binding: 

       name:指令名称  

 

       value: 指令的绑定值

       oldValue:

       expression: 绑定值的字符串形式

       arg: 传给指令的参数

       modifiers:

    vnode:

    oldVnode:

  3.私有指令

directives:{
                'fontweight': {
                    bind: function(el,binding){
                        el.style.fontWeight = binding.value
                    }
                }
            }

  4、函数简写

  如果执行操作只需要在 bind 和 update 中执行 可以用函数简写

 六、vue实例的生命周期

  生命周期钩子:相当于生命周期函数、生命周期事件

  生命周期函数分类:

    创建期间的生命周期函数:

 

  

beforeCreate(){
                // 这是我们遇到的第一个生命周期函数,表示实例被完全创造出来会执行他
                // 在beforecreate 生命周期执行的时候, date 和 methods 中的数据 都还没初始化
},
created(){
                // 这是我们遇到的第二个生命周期函数
                // 这是 date 和 methods 已经初始化
},
beforeMount(){
                // 这是遇到的第三个生命周期函数,表示 模板已经在内存中完成了,但是还未把 模板渲染到页面中去
                // 在 beforemount 执行的时候,页面的元素,还没有被真正的替换过来,只是之前写的一些模板字符串
},
mounted(){
                // 这是遇到的第四个生命周期函数,表示 内存中的模板,已经真实的挂到页面中去,用户已经可以看到渲染好的页面
                // mounted 是实例创建期间的最好一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例就静静的躺在内存中一动不动
         //如果要通过某些插件操作页面上的dom节点,最早要在 mounted 中进行
          //主要执行完了 mounted 就表示整个vue 实例已经初始化完毕,此时,组建已经脱离初始化阶段,进入到运行阶段

}

  

    运行期间的生命周期函数:

      运行期间的生命周期函数只有  beforUpdate 和 updated。这两个事件,会根据 date 数据的改变,有选择的 触发 0次 到 多次

      

beforeUpdate(){
                // 这时候,表示 我们的界面还没有被更新,数据肯定被更新了
                // 当执行 beforeUpdate 的时候,页面中显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和最新数据保持同步
            },
            updated(){
                // 事件执行时,页面和 date 数据已经保持同步了
            }

 

    销毁期间的生命周期函数:

      当执行 beforeDestroy 钩子函数的时候,vue实例就已经从运行阶段,进入到了销毁阶段

      当执行 beforeDestroy 的时候,实例身上所有的 data 和所有的 methods 已经过滤器 、指令 都处于可用状态,此时还没有真正执行销毁过程

      当执行 destroyed 函数的时候,组件已经完全销毁

七、vue中发送ajax请求

  除了 vue-resource 之外,还可以使用 axios 的第三方包  实现数据的请求

  引入 vue-resource.js  需放在vue.js之后

  1.this.$http.get(url,[option]).then(successCallback,errorCallback)

  2.this.$http.post(url,[body(发送给服务器的数据)],[options]).then(successCallback,errorCallback)   手动发起的post 默认没有表单格式

    通过 post 方法的第三个参数,设置 提交的内容类型 为普通表单数据格式  emulateJSON:true

  3.this.$http.jsonp('url').then()

  jsonp 由于浏览器的安全性限制,不允许跨域请求

      原理:动态创建 script 标签    script 标签不受端口限制