Vue方法函数备案

文章已经发布在个人博客，不断进行更新欢迎收藏订阅，或者提出批评意见。

有一些方法函数可能并不经常使用，但是遇到特定场景需要的时候却想不起来，所以需要把平时碰到的这些方法和函数进行备案，在需要的时候可以查询。

1. 字符串反转
2. Todos
3. 复选表单
4. 动态选项，用 v-for 渲染
5. 指令实例属性
6. 对象字面量
7. MVVM 数据绑定
8. 利用v-if或者v-show进行条件判定
9. Directive
10. 动态组件
11. 使用script或template标签
12. 使用props
13. 使用script或template标签

字符串反转

reverseMessage: function () {
    this.msg = this.msg.split('').reverse().join('')
}

Todos

    
    

        

            {{todo.text}}
            X
        
    

复选表单

    
    Jack
    
    John
    
    Mike
    

    Checked names: {{checkedNames}}

动态选项，用 v-for 渲染

    
        
            {{option.text}}
        
    
    

    Selected: {{selected}}

指令实例属性

对象字面量

MVVM 数据绑定

{{msg}}

 

利用v-if或者v-show进行条件判定

    

        输入您的姓名:
        欢迎点击
        退出登录
    

    

        登录用户:
        登录密码:
        登录
    

Directive

对 Todo List 输入的内容进行校验（表单校验）。基本逻辑就在在 bind 阶段的时候就绑定事件，然后根据 update 时候传入的 minlength 值来进行判断。

Directive 基本结构如下：

Vue.directive("minlength", {
    bind: function () {
    },
    update: function (value) {
    },
    unbind: function () {
    }
});

Vue.directive("minlength", {
    bind: function () {
        var self = this,
            el = this.el;
        el.addEventListener("keydown", function (e) {
            if (e.keyCode === 13) {
                if (el.value.length < self.minlength) {
                    e.preventDefault();
                }
            }
        });
        var submit = el.parentNode.querySelector("button,[type='submit']");
        submit.disabled = true;
        el.addEventListener("keyup", function (e) {
            submit.disabled = (el.value.length < self.minlength);
        })
    },
    update: function (value) {
        this.minlength = parseInt(value);
    },
    unbind: function () {

    }
});

动态组件

    Home
    Posts
    Archive
    

    

var vm = new Vue({
    data: {
        currentView: "home"
    },
    components: {
        home: {
            template: `
Home
`
        },
        posts: {
            template: `
Posts
`
        },
        archive: {
            template: `
Archive
`
        }
    }
}).$mount('#app');

document.getElementById('home').onclick = function () {
    vm.currentView = "home";
};
document.getElementById('posts').onclick = function () {
    vm.currentView = "posts";
};
document.getElementById('archive').onclick = function () {
    vm.currentView = "archive";
};

使用script或template标签

使用script标签

使用template标签

使用props

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

props基础示例

// 将父组件数据通过已定义好的props属性传递给子组件

    

如果我们想使用父组件的数据，则必须先在子组件中定义props属性，也就是props: [‘myName', ‘myAge']这行代码。

注意：在子组件中定义 prop时，使用了 camelCase命名法。由于HTML特性不区分大小写， camelCase的 prop用于特性时，需要转为 kebab-case（短横线隔开）。例如，在 prop中定义的 myName，在用作特性时需要转换为 my-name。

在父组件中使用子组件时，通过以下语法将数据传递给子组件：

prop的绑定类型

单向绑定

1. 修改了子组件的数据，没有影响父组件的数据。
2. 修改了父组件的数据，同时影响了子组件。

prop默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态。

双向绑定

可以使用.sync显式地指定双向绑定，这使得子组件的数据修改会回传给父组件。