Php 通过json_从HTML编码填充Vue实例数据

作为一个学习练习，我正在将一个超级简单的AngularJS应用程序迁移到Vue 2中，并且在尝试迁移当前驻留在ngInit中的一些代码时遇到了麻烦

我有一个PHP后端，它将一个对象传递给视图，该视图被有效地处理为

<div ng-init="user = <?php echo json_encode($user); ?>" 

但也有人建议，像这样的道具应该只针对不可变的数据，而且$user会有一点变化，我猜这样做是错误的

我现在得到了下面的结果——这不起作用，因为当通过开发工具检查时，它显示用户未定义

因此，我的php模板有：

<div :setUser="<?php echo json_encode($user); ?>"

我的javascript有：

window.App = new Vue({

    el: '#app',

    props: ['setUser'],

    data: {
        user: null
    },

    mounted() {
        this.user = this.setUser; // also tried JSON.parse(this.setUser);
    }
}

然而，正如前面提到的，无论何时检查，用户总是未定义的，不确定我做错了什么

如果您想要小提琴，这里有一个：

如果您正在更改父项中的setUser，并且希望在数据变量中获得更改后的setUser，则必须在setUser上放置一个监视程序，并在中设置数据变量，如下所示：

window.App = new Vue({

    el: '#app',

    props: ['setUser'],

    data: {
        user: null
    },

    mounted() {
        this.user = this.setUser; // also tried JSON.parse(this.setUser);
    },
    watch: {
      setUser: function(newVal) {
        this.user = newVal
      }
    } 
}

您也可以看看这个。

如果您正在更改父项中的setUser，并且希望在数据变量中获得更改的setUser，则必须在setUser上设置一个监视程序，并在中设置数据变量，如下所示：

window.App = new Vue({

    el: '#app',

    props: ['setUser'],

    data: {
        user: null
    },

    mounted() {
        this.user = this.setUser; // also tried JSON.parse(this.setUser);
    },
    watch: {
      setUser: function(newVal) {
        this.user = newVal
      }
    } 
}

您也可以看看这一点。

道具用于向组件传递数据，由于您没有编写组件，因此无法传递任何道具。据我所知，没有内置的方法可以让您从HTML初始化，相反，您应该从内部使用ajax调用来检索数据。Vue已经有了一个很好的包来处理这个问题：

如果您真的想从HTML初始化，可以编写自己的：

然后像这样使用它：

<div v-init:user="{name: 'fooBar'}">

这里是JSFiddle:

道具用于向组件传递数据，由于您没有编写组件，因此无法传递任何道具。据我所知，没有内置的方法可以让您从HTML初始化，相反，您应该从内部使用ajax调用来检索数据。Vue已经有了一个很好的包来处理这个问题：

如果您真的想从HTML初始化，可以编写自己的：

然后像这样使用它：

<div v-init:user="{name: 'fooBar'}">

---

以下是JSFIDLE:

我不会说我在更改任何东西，我想将它设置为加载时不会为用户更改的东西。我也没有任何关于父对象的概念——我想我所做的只是试图根据html中的一些JSON内容为属性设置一个默认值attribute@Owen可以创建小提琴吗？我不会说我在更改任何东西，我想将它设置为加载状态，用户永远不会更改。我也没有任何关于父对象的概念——我想我所做的只是试图根据html中的一些JSON内容为属性设置一个默认值attribute@Owen可以创建一个小提琴吗？谢谢你提醒我关于组件的信息-我不知道。但是我更愿意沿着建议的指令路线走，而不是为了返回用户名和基本元数据而过度设计ajax调用，这纯粹是出于显示的原因。应用程序不够复杂，不足以保证额外的http文件：考虑到它在视图中已经有数据，如果是出于显示目的，那么您可能会使用组件，这是Vue的首选方法，但它完全取决于您正在做什么以及您使用数据的目的，这里有一个组件的例子：它的功能比这个稍多，所以如果没有一种本地方法可以在不给数据定义分配全局变量的情况下做到这一点，那么使用自定义指令让我非常高兴。不太喜欢使用JS生成的模板tbh-我们的团队做了大量的数字标记/搜索，因此有了与我们的工具集（如google tag manager）配合良好的解决方案，它无法处理花哨的JS模板来瞄准目标，所以DOM魔法越少越好：感谢关于组件信息的提示-不知道这一点。但是我更愿意沿着建议的指令路线走，而不是为了返回用户名和基本元数据而过度设计ajax调用，这纯粹是出于显示的原因。应用程序不够复杂，不足以保证额外的http文件：考虑到它在视图中已经有数据，如果是出于显示目的，那么您可能会使用组件，这是Vue的首选方法，但它完全取决于您正在做什么以及您使用数据的目的，这里有一个组件的例子：它的功能比这个稍多，所以如果没有一种本地方法可以在不给数据定义分配全局变量的情况下做到这一点，那么使用自定义指令让我非常高兴。不太喜欢使用JS生成的模板tbh-我们的团队做了大量的数字标记/搜索，因此有了与我们的工具集（如google tag manager）配合良好的解决方案，它无法处理花哨的JS模板来瞄准目标，所以DOM越少越好：D

<div v-init:user="{name: 'fooBar'}">