Vue3学习 Day01

创建第一个vue项目

1.安装node.js

cmd输入node查看是否安装成功

2.vscode开启一个终端,配置淘宝镜像

修改为淘宝镜像源

npm config set registry https://registry.npmmirror.com

输入如下命令创建第一个Vue项目

3.下载依赖,启动项目

访问5173端口

第一个Vue项目的目录结构

我们先打开main.ts,这是我们vue工程的入口文件

在这里创建vue程序,并把它挂载到id为app的标签下(ps:这里的App.vue是我们的根组件)

再打开index.html

这里将main.js引入,并挂载了app程序到这里。

最后打开App.vue,也就是我们的根组件

先不看其他编码的细节,我们可以大胆猜测HelloWorld.vue被挂到App.vue里面,证实了它是根组件。

简单验证

Hello.vue

html 复制代码
<template>
    <h1>{{ msg }}</h1>
</template>
    
<script lang="ts" setup>
    let msg="Hello"
</script>
    
<style>
    
</style>

App.vue

html 复制代码
<template>
<Hello></Hello>
<h1>{{msg}}</h1>
<Hello></Hello>
</template>

<script lang="ts" setup>
    import Hello from './components/Hello.vue';//引入Hello.vue
    let msg="App"
</script>

<style>
</style>

setup概述

setup语法糖

setup函数有一个语法糖,可以让我们把setup函数从script里面独立出去

html 复制代码
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据(注意:此时的name、age、tel都不是响应式数据)
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意:此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意:此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

Vue的生命周期

setup函数会在beforeCreate函数前调用

响应式数据

基本类型的响应式数据

只能用ref

html 复制代码
<template>
<!--     alt+shift+a 注释 -->
    <h1>{{ msg }}</h1>
    <!-- 在template中,不用age.value 会自动帮我们 .value -->
    <h1>年龄{{ age }}</h1>
    <button @click="f1">点我年龄+1</button>
</template>
    
<script lang="ts" setup name="Hello">
    import { ref } from 'vue';
    let msg="Hello"
    let age=ref(18)//用ref包裹,让他成为响应式数据

    function f1(){
        age.value+=1 //在script中,需要age.value才能得到它的值
    }
</script>

在js中操作数据需要 .value 在模板中不需要

对象类型的响应式数据

可用reactive,也可用ref

reactive

html 复制代码
    //对象类型的直接用reactive包起来即可
    let s1=reactive({
        id:"1",
        name:"张三",
        age:"28",
        sex:"男",
        classroom:"3"
    })

    //取值不需要 .value
    function changeS1Name(){
        s1.name="张十三"
    }

ref

仍需要 .value

由下图可知,ref实现响应式对象的底层还是使用了reactive

ref和reactive的区别

html 复制代码
<template>
    <ul>
        <li>品牌:{{ car1.brand }}</li>
        <li>价格:{{ car1.price }}</li>
    </ul>
    <button @click="f1">ref改变</button>
    <br>
    <ul>
        <li>品牌:{{ car2.brand }}</li>
        <li>价格:{{ car2.price }}</li>
    </ul>
    <button  @click="f2">reactive改变1</button>
    <button  @click="f3">reactive改变2</button>
</template>

<script  lang="ts" setup>
    import { ref,reactive } from 'vue';
    //选中shift+ (
    let car1=ref({
        brand:"雪佛兰",
        price:666
    })


    let car2=reactive({
        brand:"奔驰",
        price:123
    })

    function f1(){
        car1.value={
            brand:"宝马",
            price:987
        }
    }//可以

    function f2(){
        car2={
            brand:"宝马",
            price:987
        }
/*        car2.brand="wda" */ 
    }//失效  无法获得Car的响应式对象,要改整体只能成员属性一个个地改

    function f3(){
        Object.assign(car2,{brand:"宝马",price:987})
    }//这样可以,直接分配一个新对象给car2

</script>

解构响应式对象

如果我们要处理一个有很多成员的响应式对象,且我们只希望对其中几个成员进行修改,那么就可以对其进行解构

html 复制代码
<template>
姓名<h1>{{name }}</h1>
<br>
年龄<h1>{{ age }}</h1>
<br>
性别<h1>{{ sex }}</h1>
其他我们不想实时修改的属性<h1>{{ person.others }}</h1>

<button @click="changeMsg">修改</button>
</template>

<script lang="ts" setup>
    import { reactive,toRefs,toRef} from 'vue';
    let person=reactive({
        name:"张胜男",
        age:22,
        sex:"女",
        others:"其他属性..."
    })
    //将解构出来的成员编程ref响应式对象
    let {name,age}=toRefs(person)//解构多个
    let sex=toRef(person,"sex")//解构单个

    function changeMsg(){
        //因为解构出来的是ref对象,所以要 .value
        name.value="李四";
        age.value=99;
        sex.value="男"
    //此时页面可以变化
        console.log(name,age,sex);
    }

/*     let {name,age}=person
    let sex=person.sex
    function changeMsg(){
        name="李四";
        age=99;
        sex="男"
        
        //    李四,99,男
        //    但是页面上的姓名和年龄并没有改变
        //    这是因为解构出来的成员并不是响应式的
        
        console.log(name,age,sex);
    } */

</script>

计算属性

模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

它的格式如下:

html 复制代码
    const 我们要计算的属性=computed(function(){
        ...
        return  计算结果
    })

案例

html 复制代码
<template>
姓<input v-model="xing">
<br>
名<input v-model="ming">
<br>
姓名<span>{{ name }}</span>
</template>


<script lang="ts" setup>
    import { computed,ref } from 'vue';
    let xing=ref("yang")
    let ming=ref("wei")
    let name=computed(function (){
        return xing.value.slice(0,1).toUpperCase()+xing.value.slice(1)+"-"+ming.value
    })


</script>


<style>
span{
    border: 1px solid red;
}
</style>

计算属性优于函数调用的地方在于它有缓存机制,刷新页面时函数会重新计算,计算属性检查调用的变量的值,没有变动的话直接返回上次计算的结果。

此外,计算属性的值是只读的

要对他实现可读可写要在computed函数里面提供get和set方法

html 复制代码
<template>
姓<input v-model="xing">
<br>
名<input v-model="ming">
<br>
姓名<span>{{ name }}</span>
<br>
<button @click="changeValue">对计算属性的直接写操作会调用set方法,并且值会给到set方法的形参,但是还是得通过更改调用的变量值才能复写</button>
</template>


<script lang="ts" setup>
    import { computed,ref } from 'vue';
    let xing=ref("yang")
    let ming=ref("wei")
    let name=computed({
        get(){
            return xing.value.slice(0,1).toUpperCase()+xing.value.slice(1)+"-"+ming.value
        },
        set(val){
            let[str1,str2]=val.split("-")
            xing.value=str1
            ming.value=str2
        }
    })
    function changeValue(){
            name.value="Li-si"
    }
</script>

对计算属性的直接写操作会调用set方法,并且值会给到set方法的形参,但是还是得通过更改调用的变量值才能复写

tips

1.快捷键

alt+shift 多行写

alt+shift+a 注释

shift+( 用()包裹

2.别名插件

引入一个拓展插件,让Hello.vue被引入App.vue的时候可以起别名

在vite.config.js中引入

3.v-model(适用表单元素)和v-bind(适用表单属性)

数据绑定方向

  • v-model :是双向数据绑定 。它不仅能够将 Vue 实例中的数据渲染到页面上,还能够监听用户的输入,并将用户输入的数据更新回 Vue 实例中的数据。这种双向绑定特别适用于表单元素,如 <input><select><textarea>
  • v-bind :是单向数据绑定。它主要用于将 Vue 实例中的数据绑定到 HTML 元素的属性上,但不会自动将用户输入的数据更新回 Vue 实例。虽然通过配合事件处理可以实现双向绑定,但 v-bind 本身只负责单向的数据流。

适用范围

  • v-model:主要用于表单控件或自定义组件的双向数据绑定。它会自动根据控件类型(如文本、单选按钮、复选框、选择框等)选择正确的方法来更新元素。
  • v-bind :几乎可以用于绑定任何 HTML 元素的属性,包括但不限于 classstylehrefsrc 等。此外,它还可以用于绑定表达式和 HTML 内容(尽管绑定 HTML 内容时需要使用不同的语法)。
相关推荐
新中地GIS开发老师20 小时前
WebGIS和WebGL的基本概念介绍和差异对比
学习·arcgis·webgl
王解21 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
GISerQ.2 天前
ArcGIS/QGIS按掩膜提取或栅格裁剪后栅格数据的值为什么变了?
arcgis·栅格数据·按掩膜提取
坫鹏加油站3 天前
【ArcGIS】绘制各省碳排放分布的中国地图
arcgis
前端 贾公子3 天前
koa项目实战 == 实现注册登录鉴权
arcgis
jyan_敬言4 天前
【Linux】centos7安装配置DHCP、FTP服务
linux·运维·服务器·c语言·开发语言·arcgis·青少年编程
yngsqq5 天前
arcgis坐标系问题
arcgis
GIS思维5 天前
ArcGIS影像调色(三原色)三原色调整
arcgis
新中地GIS开发老师6 天前
地理信息科学专业想搞GIS开发:学前端还是后端?
前端·javascript·arcgis·前端框架·cesium
Z_W_H_8 天前
【ArcGISPro】宣布推出适用于 ArcGIS 的 AI 助手
人工智能·arcgis·ai