Vue组件内通过函数修改data变量失败、合并代码后空白页问题咨询

1. 点击自定义函数无效果的问题 #

原因 #

你在Add方法中错误使用prova.count++修改状态：prova是你注册的全局组件名，不是当前触发点击事件的组件实例，自然无法访问到组件内部的count属性。
Vue组件的实例方法中，this指向当前组件实例本身，直接通过this就能访问到data里定义的所有响应式属性。

修复后的组件代码 #

Vue.component('prova', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<div><button v-on:click="Add">You clicked me {{ count }} times.</button></div>',
    methods:{
        Add: function(){
           // 替换为this访问当前实例的count属性
           this.count++;
        }
    }
});

2. 组件与Vue实例代码合并后页面空白的问题 #

原因 #

你原来的new Vue代码写在HTML的#prova节点内部，执行时DOM已经完成了#prova节点的渲染，Vue可以正常找到挂载目标。如果把这段代码合并到Prova.js中，而Prova.js是在head标签中引入的，JS执行时body内的DOM节点还没渲染，Vue找不到el配置对应的#prova节点，挂载失败就会导致页面空白。

修复方案二选一： #

• 方案1：把合并后的JS文件引入位置从head移到body标签的末尾，确保所有DOM节点渲染完成后再执行JS代码
• 方案2：在合并后的JS中，把new Vue的逻辑包裹在DOM加载完成的回调中，示例：

// 组件定义代码放这里
Vue.component('prova', {
  // 组件配置同上
})

// 等DOM全部加载完成后再挂载Vue实例
document.addEventListener('DOMContentLoaded', function() {
  new Vue({
    el: "#prova",
  })
})

内容的提问来源于stack exchange，提问作者Matteo Pagliarello