Vue的基础语法

认识Vue

目前Vue在前端处于什么地位？

如何使用Vue呢？

方式一：CDN引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

方式二：下载和引入

Vue初体验

◼ 案例体验一：动态展示Hello World数据

      <div id="app"></div>
      <script src="./lib/vue.js"></script>
      <script>
        const app = Vue.createApp({
          // 插值语法:
          template:`<h2>{{title}}</h2> <span>{{message}}</span>`,
          data:function(){
            return {
              title:"Hello Vue",
              message:"你好啊!Vue"
            }
          }
        })
        app.mount("#app")
      </script>

◼ 案例体验二：展示列表的数据

```javascript

◼ 案例体验三：计数器功能实现

   <div id="app">
     <button @click = "sub">-</button>
     <span>当前计数:{{counter}}</span>
     <button @click = "sum">+</button> 
   </div>
   <script src="./lib/vue.js"></script>
   <script>
     const app = Vue.createApp({
       // 当template里面有内容会自动替换<div id="app">里面的内容
       // 当没有写template时会自动渲染<div id="app">里面的内容
       // template : ``,
       data(){
         return {
           counter:0
         }
       },
       // 可以将对象中的方法绑定到模板上
       methods:{
         sub:function(){
       //可以使用this关键字来直接访问data中返回对象中的属性
           this.counter--
         },
         sum:function(){
           this.counter++
         }
       }
     })
     app.mount("#app")
   </script>