Vue语法 Mustache 和 Options API

vue 中封装了很多 API 方便开发，vue3.x 中更推荐使用 Composition API

为了能够看懂 vue2.x 等使用 Options API 开发的项目，我们先了解学习 Options API

• *.vue 文件中的 js部分

  <script>
  export default {
    name: "App",
    data(){
      return {
         //存放页面变量
          }
      },
     methods:{
      //存放页面的函数方法
      },
     computed:{
   	  //处理一些计算
     },
     watch:{
  	    //监听属性
    }
  }
  </script>
  

  像 data methods computed 等 API 为 Options API

• 那怎么将变量里的数据展示在页面上呢，我们使用 {{}} 双花括号的方式来展示数据

  我们将项目中的 App.vue 中的内容全部删掉，其他文件先不动

  <template>
      <div id="App">
          <div>{{ message }}</div>
      </div>
  </template>
  <script>
  export default {
      name: 'App',
      data() {
          return {
              message: 'hello vue',
          };
      },
  };
  </script>
  <style></style>
  

  在项目文件夹所在终端启动项目 npm run serve

  在浏览器中我们可以看到我们的message中的内容显示出来了。