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

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

字符串反转

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显式地指定双向绑定，这使得子组件的数据修改会回传给父组件。