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"></div>
    <script src="./lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        template:`
            <h2>{{message}}</h2>
            <ul>
              <h2>电影列表</h2>
              // 遍历
              <li v-for = "item in movies">{{item}}</li>
            </ul>
        `,
        data(){
          return {
            message:"你好啊!Vue",
            movies:["大话西游","星际穿越","盗梦空间","少年派"]
          }
        }
      })
      app.mount("#app")
    </script>

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

   <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>

声明式和命令式

声明式编程和命令式编程思想的区别

MVVM模型

data属性

Vue2 和 Vue3响应式原理

  Vue2使用的是属性描述符 Object.defineProperty(obj,"name",{get(){},set(){})
  Vue3使用的是proxy newProxy(obj,{get(){},set(){}})

methods属性

问题二：this到底指向什么？

其他属性