Vue3初始

Vue3

Vue3简介

• 是一套用于构建用户见面的渐进式JavaScript框架

• vue3的引用方式：

  • CDN（需联网）CDN相当于镜像仓库，可能这个源码距离你的位置比较远，响应比较慢，但是它有许多镜像仓库在各个地方，从距离你最近的给你响应资源：“"

• 创建Vue实例

  1. 通过createApp的方式创建一个新的应用实例

  2. 将这个创建好的应用挂在至需要的元素，在这个元素之中局部有效

  3. <script>
           //1.创建vue实例
           const app = Vue.createApp({
             //属性
             //template模板属性
             //template: `<p></p>`,
             //组件数据--data--函数--数据必须通过return返回出来
             data: function () {
               return {
                 msg: "hello vue",
               };
             },
           });
     
           //2.挂载
           app.mount("#app");
         </script>
     

• Vue组件常用属性

  1. template：组件模板属性

     template: `<p>Hello World</p>`
     

  2. data组件数据属性：data将在挂在的元素之中，都可以取到data 中的数据，data本身是一个函数，并且该函数在vue3必须返回一个对象，而vue2则不强求。

     data: function () {
               return {
                 msg: "hello vue",
               };
             },
     

  3. methods组件方法属性：methods属性是一个对象，通常我们会在这个对象中定义许多方法，方法之间用逗号隔开，在方法中可以使用this.属性名来引用对应的data中的数据

     //方法
             methods: {
               shanchu(e) {
                 this.names.splice(e, 1);
                 if (this.names.length == 0) this.count = false;
               },
             },
     

模板语法

1.Mustache双大括号–插值语法

• 前面说了在vue挂在的元素之中可以通用data中的属性，及可以通过{{属性名}}，来取值，并且data中数据改变，这个值也会进行更改
• 当然，插值语法中不仅仅是显示data中的属性，也可以是JavaScript的表达式

2.属性绑定

• 基础属性绑定
  • 语法格式 v-bing:属性名称=“属性值” v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
  • 语法糖写法 :属性名称=“属性值”。
• class绑定 v-bind:class=“属性值”
• style绑定 v-bind:class=“属性值”

3.事件绑定

• 语法格式

  • v-on:事件名称=“方法名称”
  • 语法糖写法 @事件名称=“方法名称”

• 无参

  • 如果该方法不需要额外参数，那么方法后的（）可以不添加参数，但是如果方法本身中就有参数，那么会默认将原生事件event参数传递进方法里面。

• 有参

  • 如果需要同事传入某个参数，同事需要event时，可以通过$event传入事件。

• if语句

  • v-if：当v-if=“x”,x为真，则渲染数据，否则不渲染
  • v-else:必须与v-if配合使用，当v-if中为否时，显示，反之亦然

• template元素

  • template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最中template不会被渲染出来

• v-ifv-show的区别

  • 用法上的区别：v-show是不支持template;v-show不可以和v-else起使用;
  • 本质的区别：v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过csst的display属性来进行切换;v-if当条件为false时,其对应的原生压根不会被渲染到DOM中;

• v-for指令

  • 遍历数组：v-for=“item in数组;v-for=”(item,index) in数组";
  • 遍历对象：v-for=“itemin对象”;v-for=“(val,key,index) in对象”

• 数组更新检测

  • push()：数组中最后位置添加新元素值；
  • pop()：数组中首位置添加新元素值;
  • shift()：删除数组中最后一个元素值;
  • unshift()：删除数组中第个元素值;
  • splice()：数组元素操作添加/删除;
    • 删除元素：splice(起始位置，数量）；
    • 添加元素：splice(起始位置，0，新元素）；
  • sort()：数组排序；
  • reverse()：数组反转；
  • join()：添加；