{{}}的使用

在开始之前，我们先把之前的my-project,清理一下，让他更加干净。把App.vue修改为如下代码：

<template>
  <div></div>
</template>

<script>

export default {
}
</script>

<style>
</style>

OK，现在网页上一片空白了，非常干净。

文本输出

{{}}称之为Mustache用法，这是最为基本的数据绑定方法。在之前出现的代码中，我们已经在使用它了。我们不厌其烦的复制过来这部分代码：

<template>
    <div>{{val}}<div>
</template>
<script>
export default {
    data(){
        return {
            val:'text'
        }
    }
}
</script>

任何对val的修改，都会反映到div中。比如我们在mounted中编写

this.val = '你好vue'

那么div中的内容变成你好vue。

对象输出

有时候，我们可能需要把一个json对象输出到页面上，并且希望它是格式化的。在vue中通过{{}}进行输出最为简单不过了。

<template>
    <pre>{{json}}<pre>
</template>
<script>
export default {
    data(){
        return {
            json:{
                "name":"张珊",
                "age":25
            }
        }
    }
}
</script>