Vue是一个非常流行的JavaScript框架，它可以帮助你构建复杂的前端应用程序。

在Vue中，你可以使用各种数据绑定技术来显示和处理数据。但有些时候，你可能需要在Vue模板中使用外部变量。这个时候，你可以使用Vue的计算属性或者将变量注入Vue实例。

其中，使用计算属性可能更适合简单的情况，而将变量注入Vue实例则更适合处理复杂的数据。

// 使用计算属性
<template>
<div>
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>

在上面的代码中，我们定义了一个计算属性reversedMessage，它会将message变量的值反转并返回。在Vue模板中，我们可以像普通变量一样使用它。

// 将变量注入Vue实例
<template>
<div>
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
</template>
<script>
const myVariable = 'Hello!'
export default {
data() {
return {
message: this.myVariable
}
},
created() {
this.reversedMessage = this.message.split('').reverse().join('')
}
}
</script>

在上面的代码中，我们将myVariable变量注入Vue实例，并将它赋值给message。在Vue实例被创建时，我们还查询了message变量的值，并将它反转后赋值给了reversedMessage。在Vue模板中，我们可以像普通变量一样使用message和reversedMessage。

无论哪种方法，使用外部变量都可以帮助我们更好地构建复杂的应用程序。希望这篇文章可以帮助你更好地理解Vue的数据绑定技术。