vue一阶段学习总结

vue阶段一

---

描述

该阶段是对vue的一个初步认识。
这个阶段的没有用到vue-cli脚手架，
而是通过js引入的方式实现。

在该阶段不会设计到复杂的操作，
只是对于基本指令的熟悉。

问题记录

1. 问题：methods中试图直接使用数据，失败
   解决：this.数据来调用vue数据，也可以作为函数的形参传递
2. 问题：使用双击事件没效果
   解决：双击事件是dblclick，不要忘了l

3.  .coral{background-color: coral;}
    
    <p v-html='message_4' :class='{"color":true}'>message_4</p>
   
    data:{
        message_4:'<b>this had been bold</b>',
        isshow:true,
        color:'coral'
    },
   

   这里错误的认为true则返回color的值，然而事实是直接返回了color本身,所以要把color改成coral
   所以class属性的表示方式:
   • 'color'
   • '"coral"'
   • 'isshow?color:""'
   • 'isshow?color:""'
   • '{coral:isshow}'
   • 'func()' 注意，这里的()不能省略,因为这里如果去掉它无法区别是否为变量
   • '["coral"]'或者'[color]'
   • 组合写法
     对于style
   • :style='{"border":color+" 1px solid"}' 用对象的模式，书写
   • :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" 多重置优先匹配前至后
   • :style="[baseStyles, overridingStyles]" 将样式对象绑定到样式

    data: {
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    }
   

4. v-for 如果带index，index一定是在后侧，否则顺序会反过来，并且是用小括号括起来
5. :class对象方式作为值时，在console进行app.test2.bold=true赋值是无效的，不能产生get和set
   但是貌似代码编写更改会有效，对于数组形式app.test2.push('bold')是生效的
6. console修改数组元素，不能用[]方式，vue.set方法不存在，应该是vue.$set方法，有$符号，set方法同样适用于class的对象写法修改
7. Vue.component()全局,components:{}. 作为组件的data是以方法的形式写的，并且需要return!父组件的方法子组件不能直接取到
8. 作为props传递，属性名字不能有-，因为如果有-，之后变量要用的话变量名带有-，出现变量名不能-的问题，当然强制有-的话，以abcDef命名方式接收
9. props,[]传递，内容要加''号，{}传递，不需要加''
10. $emit传值时，添加事件的元素必须时其组件的根，不能是兄弟组件接收，这不是父子关系，接收组件信息时，用$event接收即可
11. 对于transition动画时，如果拥有keep-alive，结构必须为transition>keep-alive>component
12. filter过滤器只能用于{{}}或者v-bind