方式一：template模板

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13.     <div id="app"></div>
  15.     <template id="my-app">
  16.             <!-- 这里会显示为：Hello World -->
  17.       <h2>{{message}}</h2>
  18.             <!-- 相当于<h2>Hello World</h2> -->
  19.     </template>
  21.     <script src="https://unpkg.com/vue@next"></script>
  22.     <script>
  23.         const App = {
  24.             template: '#my-app',
  25.             data() {
  26.                 return {
  27.                     message: "Hello World",
  28.                     counter: 100,
  29.                     isShow: true
  30.                 }
  31.             },
  32.             methods: {
  33.                 getReverseMessage() {
  34.                     return this.message.split(" ").reverse().join(" ");
  35.                 },
  36.                 toggle() {
  37.                     this.isShow = !this.isShow;
  38.                 }
  39.             }
  40.         }
  42.         Vue.createApp(App).mount('#app');
  43.     </script>
  44. </body>
  46. </html>

方式二：render函数

使用h函数来编写渲染的内容

方式三：通过.vue文件中的template（SFC）

假设这是项目中的一个叫 App.vue 的文件，这种也叫SFC，single-file components (单文件组件)。

这种方式是后续最常用的方式，也是web工程模块化写代码的方式，通过webpack、Vue Cli、Vite等打包工具构架的项目都是通过这样的方式编写。

  1. <template>
  2.   <h2>这里编写html</h2>
  3.   <hello-world></hello-world>
  4.   <h2>{{countVue2}}</h2>
  5.     <button @click="add">点我+1</button>
  6.     <h2>{{countVue3}}</h2>
  7.   <button @click="reduce">点我-1</button>
  8. </template>
  10. <script>
  11.   // 这里写JavaScript
  12.   import HelloWorld from './HelloWorld.vue';
  13.   import {ref} from 'vue';
  15.   export default {
  16.     components: {
  17.       HelloWorld
  18.     },
  19.     data() {  // 这是vue2写法
  20.       return {
  21.         countVue2: 0,
  22.       }
  23.     },
  24.     methods: { // 这是vue2写法
  25.             add(){
  26.         this.countVue2 += 1;
  27.       }
  28.     },
  29.     setup(){ // 这是vue3写法，data、methods等可以融入一起写
  30.       let countVue3 = ref(0)
  32.       const reduce = () => {
  33.           countVue3.value -= 1
  34.       }
  36.       return {
  37.         countVue3,
  38.         reduce,
  39.       }
  40.     }
  41.   }
  42. </script>
  44. <style scoped>
  45.   /* 这里是css样式 */
  46.   h2 {
  47.     color: red;
  48.   }
  49. </style>

通过 webpack 编写Vue可以查看 Webpack

======================

Vue 中处理template

image.png

Vue文件的版本

image.png
打开我们项目下node_modules文件夹，找到vue，打开dist（这是Vue源码打包好的文件夹）文件夹，里面可以看到很多版本。
image.png image.png
常见的就是上面的这些版本。

.runtime 版本（仅运行时）

加上.runtime 的版本，就是runtime compilation版本，这种版本不包含对template属性进行编译，因此也会更小一点。

运行时+编译器

不加.runtime 的版本，运行时+编译器版本，这种版本会稍大一点，因为包含了对template属性的编译。

.prod版本

加上.prod 的版本，就是production版本，就是生产环境下用的版本，这种版本都是经过代码压缩丑化（去掉空格换行符、替换变量名等）的版本，体积较小，但完全看不懂。

======================

VS-Code对SFC的支持

插件一：Vetur，从Vue2开发就一直在使用的VSCode支持Vue的插件，比较稳的插件，但对Vue3部分实验中的特性支持不是很好；

插件二：Volar，官方推荐的插件（后续会基于Volar开发官方的VSCode插件），但目前还不是很好用，少了很多提示，还需要完善