2020.06.20

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 阻止默认事件

2. 按键修饰符

• 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’,{})