2020.06.20

布满荆棘的人生 2023-02-19 13:28 2阅读 0赞

### vue ###

*  前端渐进式框架

##### 指令 #####

1.  文本 \{ \{\}\} ，v-text , v-model
2.  条件渲染 v-if v-else-if v-else v-show
3.  事件 @/v-on：事件名，$event事件参数
4.  属性v-bind / :属性名
5.  表单 v-model 修饰符.number .lazy

###### 参数对象 ######

1.  el指定模板
2.  data指定数据
3.  methods 存储方法
4.  computed 计算属性 从现有数据计算新数据
5.  watch 监听 handel 处理函数 deep深度监听，
6.  filters 管道，过滤 常用数据格式化
7.  directives 自定义指令

directives: { 
                        img: { 
                            inserted(e, binding) { 
                                console.log(e, binding);
                                //随机色
                                let color = Math.floor(Math.random() * 1000000);
                                e.style.backgroundColor = "#" + color;
                                var img = new Image();
                                img.src = binding.value;
                                img.onload = () => { 
                                    e.append(img);
                                };
                            },
                        },
                    },

##### 修饰符 #####

1.  事件修饰符

*  stop 阻止冒泡
 *  once 执行一次
 *  prevent 阻止默认事件

1.  按键修饰符

*  enter
 *  esc
 *  down left right top

###### 获取DOM ######

this.$refs.name

###### 动画 ######

*  transition组件
 *  类 v-enter-active v-enter v-enter-to v-leave-active v-leave v-leave-to

##### 组件 #####

*  全局组件

Vue.component("Counter", { 
                    template: `<div> <button @click="btn()">点我</button> </div>`,
                    methods: { 
                        btn() { 
                            console.log(this);
                        },
                    },
                });

*  局部组件 需在父组件注册
 *  props 父传子

data() { 
                        return { 
                            num: 1,
                        };
                    },
                    created() { 
                        this.num = this.count;
                    },
                    props: { 
                        count: { 
                            type: Number,
                            default: 0,
                        },// 指定传入数据的默认值和类型
                    },

*  子传父 this.$emit(‘name’,\{\})