计数器案例

原生js写法 vs Vue js 写法

image.png

  • 可以看出明显的区别

    • 原生js 是面向过程编程
    • vue 是面向业务编程
  • 我们通过vue,只需要编程对应业务逻辑,其他dom元素的操作都交给了Vue。大大提高开发效率。

Vue template 的编写方法

1. 使用 template 属性 直接编写

  • 就像上面计数器样,直接在 template 标签属性上编写 html 字符串。image.png

2. 通过 template 绑定 script 标签

  • 将 script 指定为 x-template 类型, 并将 script 标签的id,赋值给 template 属性
  • 	<div id="app"></div>
    
      <script type="x-template" id="why"> 
          <div>
              <h2>{{message}}</h2>
              <h2>{{counter}}</h2>
              <button @click="increment">+1</button>
              <button @click="decrement">-1</button>
          </div>  
      </script>
    
      <script src="../js/vue.js"></script>
      <script>
          Vue.createApp({
              template: '#why',
              data() {
                  return {
                      message: "Hello World!",
                      counter: 100
                  };
              },
              methods: {
                  increment() {
                      console.log(1);
                      this.counter ++;
                  },
                  decrement() {
                      this.counter --;
                  }
              }
          }).mount("#app");
      </script>
    

3. 通过 template 标签

  • 直接使用html中的template 标签,然后将 template 的 id 赋值给 template 属性
  • 	<template id="why"> // 标签内可以访问vue的内部属性、函数等
          <div>
              <h2>{{message}}</h2>
              <h2>{{counter}}</h2>
              <button @click="increment">+1</button>
              <button @click="decrement">-1</button>
          </div>  
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          Vue.createApp({
              template: '#why', // 绑定 标签
              data() {
                  return {
                      message: "Hello World!",
                      counter: 100
                  };
              },
              methods: {
                  increment() {
                      console.log(1);
                      this.counter ++;
                  },
                  decrement() {
                      this.counter --;
                  }
              }
          }).mount("#app");
      </script>