vue一些属性

Vue

重点

:is="'login'" 组件名称login是一个字符串 需要加上''因为:绑定的属性不加''的话会当成变量去data里面找

1. emulateHTTP（布尔值）（vue-resource） 默认值为:false,当值为true是，用HTTP的POST方式PUT，PATCH，DELETE等请求，并设置请求头字段HTTP_Method_Override为原始请求方法。

   如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

   如果服务器无法处理PUT，PATCH和DELETE的请求。可以启用enulateHTTP。 启用之后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实例的HTTP方法

   作者：sponing

   链接：https://www.jianshu.com/p/8d66070eac20

2. emulateJSON(布尔值) 默认值为：false,当值为true并且data为对象时，设置请求头Content-Type的值为application/x-www-form-urlencoded

   如果服务器无法处理编码为application/json的请求，可以启用emulateJSON选项。启用之后，请求会以application/x-www-form-urlencoded为MIME type，就像普通的HTML表单一样。

3. vue动画使用

   1. 使用过渡类名（有进入及出去，适合显示隐藏，需要配合v-if）

   .v-enter,//进入前
    .v-leave-to {//离开后 只需要入场动画 可以把v-leave-to删掉
    opacity: 0;
    transform: translateX(150px);
    }
    .v-enter-to,
    .v-leave {
    //同原始状态，一般不需要设置
    }
    /* v-enter-active 【入场动画的时间段】 /
    / v-leave-active 【离场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
    transition: all 0.8s ease;
    }
    
    
   这是一个H3
    
    ​
    ​
    ​
    ​
    
      
    
       
   使用animate.css（有进入及出去，适合显示隐藏，需要配合v-if）
    ​
    
      
    
   
    
   这是一个H3
    
   
   
   3.  使用钩子函数（适合做半场动画，自动回起始点的，需要用v-if）
   
   
    
    
    
    
   
    
    
   ​
    
   
   4.  使用原生css3 控制类名 不需要v-if 适合元素一直显示在界面上 如左右滑动
   
   
   ​
   
    
    
   这是一个H3
   
   
   ​
   
   5.  使用原生animate.css方法 适合抖一下 不需要v-if
   
   
    
    
    
   这是一个H3
    
   ​
    
    
   
   6.  使用transition-group 创建列表动画 可实现创建淡入 删除淡出同时列表上滑
   
   
   //appear 可实现加载完成淡出效果
    
   
    {{item.id}} --- {{item.name}}
    
   
   ​
   
   7.  使用路由的子component也可以加上transition标签，使用方法和v-if一样，使用watch监控$route改变tansition的name属性可以根据路由改变，实现和手机APP一样的左右滑动
   
   
    
   
   ​
   data () {
    return {
    activeDirection: 'left'
    }
    },
   watch: {
    $route (newVal, oldVal) {
    if (newVal.meta.actNum < oldVal.meta.actNum) {//在route的mate中自定义一个属性用来判断是该左滑还是右滑
    this.activeDirection = 'right'
    } else {
    this.activeDirection = 'left'
    }
    }
   },
   
   
   
   

4. component定义定义组件是为了给组件对象起一个名字 以便直接使用，如果使用路由则不需要起名字 直接把组件对象放进去就行了

   let header = {
    template: '#tmpl'
    }
    Vue.component('mycom3', header) //使用
    {path: '/', header} //router直接使用组件对象

5.  //是不用路由直接切组件的坑 改变comName的值即可
     //用路由的坑

6. watch: {
    lastname: function(newval, oldval) {//用于监控数据改变并调用函数‘lastname’是省略this的数据调用
    this.fullname = this.firstname + '-' + newval
    },
    '$router.path': function() {} //同样可以监控路由变动 是省略this的数据调用
    },
    computed: {
    'fullname': function() {
    return this.firstname + '-' + this.lastname
    }
    }

7. watch主要用于监控数据变动调用函数；computed主要用于需要计算的data数据；method主要用于业务逻辑

8. 设置动画的时候，position：absolute很可怕，要加上width100% height100% 不然容易出问题

   出问题了先去掉posa试一下

   .v-enter-active,
    .v-leave-active {
    transition: all 0.5s ease;
    width: 100%;
    position: absolute;
    overflow: hidden;
    }

9. data: () => {
    return {
    newsList: ''
    }
    },//这样子可以是可以 但是 注意 箭头函数不会改变this指向而外部没有vue对象 一定要用fun的方式才能在里面的到this中的vue对象 data（）{} 或者data：function（）{} 

10. v-model绑定checkbox的时候，不加value值 可以输出boolean，多个checkbox且 加上value 可以把勾上的value输出到数组

11. v-model绑定raido的时候，只能加value，输出选定的value

12. 用v-model给子组件双向绑定 子组件里面里面需要props接收value（爸爸传过来的）属性，同时定义一个方法 在方法里面$emit触发input事件（爸爸传过来的）！！但是如果子组件里面要用到value可以添加model{}设置成自定义的

 const Comp = {
 model: {
 prop: 'value1',
 event: 'change'
 },
 template: `
 

 

 
 
 `,
 props: ['value1'],
 methods: {
 inputHandle (e) {
 this.$emit('change', e.target.value)
 }
 }
 }

13. 由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

14. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

15. 当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
 data: {
 items: ['a', 'b', 'c']
 }
 })
 vm.items[1] = 'x' // 不是响应性的
 vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
 Vue.set(vm.items, indexOfItem, newValue)
 // Array.prototype.splice
 vm.items.splice(indexOfItem, 1, newValue)

Tip:Vue.set()在methods中也可以写成this.$set()

14. vuecomponent可以正常使用v-for循环
     
    
      is="todo-item"
     v-for="(todo, index) in todos"
     v-bind:key="todo.id"
     v-bind:title="todo.title"
     v-on:remove="todos.splice(index, 1)"
     
       
     
        
    
     
     ​
     //这里is="todo-item"用的就是这个组件 用li做包裹省的解析错误

15. 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

 Submit

// ...
methods: {
 warn: function (message, event) {
 // 现在我们可以访问原生事件对象
 if (event) event.preventDefault()
 alert(message)
 }
}

16. v-model也有事件修饰符

17. .lazy可以从默认的input事件变成change事件

18. .number可以强制转数字

19. .trim可以切前后空格

20. prop和component可以实现驼峰和短划线自动互转，自定义属性不行 推荐都使用短划线

​
this.$emit('my-event')

vue-router

1. //route : 路由信息对象，只读对象
    ​
    //操作 路由跳转
    this.route.params.name;
    this.age = this.$route.params.age;
    
      
    
   作者：mf_717714
    来源：CSDN
    原文：https://blog.csdn.net/mf_717714/article/details/81945218
    版权声明：本文为博主原创文章，转载请附上博文链接！

2. {
    path: '/login/:id',//这样传参提交过去在parmas里面
    component: Login,
    name: 'login',
    props: true
    }
    //还可以这样子传参 传过去也在parmas
    
   //！！！！重点 通过parmas传过去的参数可以设置 props：true 子组件中在props：['id']接收， 可以不调用$route 达到解耦的目的
    //query中的也可以
    props(route) {
    return {id: route.query.id}
    }
    ​

3. vue组件内部也有router钩子函数，当同一个组件通过参数来渲染时（如商品详情页），可以用watch监视id变化实现刷新，但是比较复杂且不能阻止跳转，推荐使用组件内部的beforeRouterUpdate（to， from， next）钩子函数，可以阻止跳转。注意 在组件直接更新的时候 他的mounted不会触发 所以在mounted可能会出现问题