如何从 Vue 组件访问值？答案

【问题标题】：How can I access the value from a Vue component?如何从 Vue 组件访问值？
【发布时间】：2019-02-05 06:38:34
【问题描述】：

我正在尝试使用 Laravel 制作我的作品集。我对 Laravel 很陌生。我认为通过在其中制作一个迷你项目将使我熟悉 Laravel。最近发现Laravel对Vue.js有依赖

我尝试包含 jQuery 库，因为我对 Vue 一点也不熟悉。但这并不顺利。然后我开始搜索 Vue.js，但找不到太多。

经过大量努力，我制作了以下 Vue 组件：

var trialEle = new Vue({
    el: '#trialEle',
    data: {
        working: 'yes'
    }
});

然后我尝试通过以下标记访问工作的价值：

<div id="trialEle">
    <h1>Is this working: {{working}}</h1>
</div>

但我不知道我错过了什么，因为我经常遇到这个错误：

更新：

正如@Chamara 在下面的答案中所建议的，我已将{{working}} 更改为@{{working}}，现在没有错误屏幕了。

但我仍然无法从我的 Vue 组件中访问 working 的值。

在页面上显示如下：

Is this working: {{working}}

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

你需要制作一个单独的 Vue 组件，然后将它导入到一个通用的 js 文件中，例如：main.js，在你的 Laravel 视图中导入main.js，然后你就可以使用它了，例如 Example.vue将包含 template 视图代码 main.js 将具有渲染数据的 Vue 代码并最终在视图中使用它，如 <Example :title="I am awesome"></Example>
感谢 @user10415043 的回答，但我只是从 Vue JS 更改为 jQuery，因为学习 Vue 变得越来越困难，因为所有教程都是付费的。

【解决方案1】：

{{}} 是blade 中的内置语法，如果您需要在blade 文件中使用vue {{}}，则需要将@ 放在{{}} 的前面。所以像这样@{{working}}。 Blade 中的@ 将其作为语法忽略。

【讨论】：