Vue3基础1

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量275 收藏 3
点赞数 12
分类专栏： Vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53374893/article/details/141473194
版权

1、optionsApi 与 Composition Api

选项式与组合式

组合就是一个一个 的函数 ，每个函数里都有 data，methods，compute 等等

2、拉开序幕的setup

setup执行时机 在 beforeCreate之前

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
  setup() {
    //setup 函数中的this是undefined vue3中已经弱化this了
    //数据，原来是写在data中的,此时的name，age，tel都不是响应式的数据
    //数据
    let name = "张三";//注意此时的name不是响应式的
    let age = 13;//注意此时的age不是响应式的
    let tel = "123123123";

    function changeName() {
      name = "李四";//注意这样修改name,页面是没有变化的,因为name不是响应式的
    }

    function changeAge() {
      age = 20;
    }

    function showTel() {
      alert(tel);
    }

    return {
      name,
      age,
      changeName,
      changeAge,
      showTel,
    };
  },
  //选项式，配置式写法
  //   data() {
  //     return {
  //       name: "张三",
  //       age: 18,
  //       tel: "123456",
  //     };
  //   },
  //   methods: {
  //     changeAge() {
  //       this.age = 13;
  //     },
  //     changeName() {
  //       this.name = "zhang-san";
  //     },
  //     showTel() {
  //       alert(this.tel);
  //     },
  //   },
};
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

3.Setup语法糖

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>

  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
 
  
};
</script>

<script  lang="ts" setup>
    

let name = "张三"; //注意此时的name不是响应式的
let age = 13; //注意此时的age不是响应式的
let tel = "123123123";

function changeName() {
  name = "李四"; //注意这样修改name,页面是没有变化的,因为name不是响应式的
}

function changeAge() {
  age = 20;
}

function showTel() {
  alert(tel);
}



</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

但还是太麻烦，为了一个名字多写几行代码

我们安装一个插件

npm i  vite-plugin-vue-setup-extend -D

-D 代表是开发时用的插件， 打包以后就不用了

在配置文件里面配置一下插件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})


<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>

  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person123">
    

let name = "张三"; //注意此时的name不是响应式的
let age = 13; //注意此时的age不是响应式的
let tel = "123123123";

function changeName() {
  name = "李四"; //注意这样修改name,页面是没有变化的,因为name不是响应式的
}

function changeAge() {
  age = 20;
}

function showTel() {
  alert(tel);
}



</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 4.ref响应式数据(定义基本类型数据)

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { ref } from "vue";

let name = ref("张三"); //注意此时的name不是响应式的
let age = ref(13); //注意此时的age不是响应式的
let tel = "123123123";

function changeName() {
  name.value = "李四"; //注意这样修改name,页面是没有变化的,因为name不是响应式的
}

function changeAge() {
  age.value = 20;
}

function showTel() {
  alert(tel);
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

5.reactive （引用类型的数据）

<template>
  <div class="person">
    <div>一辆{{ car.brand }}车,价值{{ car.price }}万</div>
    <button @click="changePrice">修改汽车的价格</button>
    <hr />
    <h2>游戏列表</h2>
    <ul>
      <li v-for="game in games" :key="game.id">
        {{ game.name }}
      </li>
    </ul>
    <button @click="changeGame">改变第三个游戏的名字</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { reactive } from "vue";
let car = reactive({ brand: "奔驰", price: 100 });
let games = reactive([
  { id: "001", name: "LOL" },
  { id: "002", name: "CS" },
  { id: "003", name: "CF" },
]);

function changePrice() {
  car.price += 10;
}

function changeGame() {
  games[2].name = '逆战';
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 6.ref 定义对象类型的数据

<template>
  <div class="person">
    <div>一辆{{ car.brand }}车,价值{{ car.price }}万</div>
    <button @click="changePrice">修改汽车的价格</button>
    <hr />
    <h2>游戏列表</h2>
    <ul>
      <li v-for="game in games" :key="game.id">
        {{ game.name }}
      </li>
    </ul>
    <button @click="changeGame">改变第三个游戏的名字</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { ref } from "vue";
let car = ref({ brand: "奔驰", price: 100 });
let games = ref([
  { id: "001", name: "LOL" },
  { id: "002", name: "CS" },
  { id: "003", name: "CF" },
]);

function changePrice() {
  car.value.price += 10;
}

function changeGame() {
  games.value[2].name = '逆战';
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

7.ref对比reactive

这个开启能让ref自动加上 value

8.计算属性

<template>
  <div class="person">

    姓: <input type="text" v-model="firstName"><br>
    名: <input type="text" v-model="lastName"><br>
    <button @click="changeFullName">将全名改为li-4</button>
    全名: <span>{{ fullName }}</span>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
 import { ref ,computed} from 'vue'

 let firstName = ref('张');
 let lastName = ref('三');

 //这么定义的fullName 是只读的不允许修改的
//  let fullName = computed(()=>{
//    return firstName.value +'-'+ lastName.value;
//  })

//也是一个ref响应式数据
 let fullName = computed({
   get(){
     return firstName.value +'-'+ lastName.value;
   },
   set(value){
      const [first,last] = value.split('-')
      firstName.value = first;
      lastName.value = last;
   }
 })


function changeFullName(){
  console.log(fullName.value);
  fullName.value = 'li-4';
  
  
}


</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

9.监听WatchEffect

<template>
  <div class="person">
    <h2>需求:当水温达到60度，或水位达到80cm 时,给服务器发请求</h2>
    <h2>当前水温为{{ tmp }} ℃</h2>
    <h2>当前水位为{{ height }} cm</h2>
    <button @click="changeTmp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { ref, watch, watchEffect } from "vue";

const tmp = ref(10);
const height = ref(0);

function changeTmp() {
  tmp.value += 10;
}
function changeHeight() {
  height.value += 10;
}
//watch实现
// watch([tmp,height],(value)=>{
//  // 从value中获取最新的temp值、height值
//  const [newTemp,newHeight] = value
//     // 室温达到60℃，或水位达到80cm，立刻联系服务器
//     if(newTemp >= 60 || newHeight >= 80){
//       console.log('联系服务器')
//     }

// })

//watchEffect实现 一上来会执行一遍
watchEffect(() => {
  console.log("@");
  //这两个数据变化的时候，这个函数的回调会执行一次
  if (tmp.value >= 60 || height.value >= 80) {
    console.log("联系服务器");
  }
});
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

10.ref属性

Person组件 

<template>
  <div class="person">
      <h1>中国</h1>
      <h2 ref="titie2">北京</h2>
      <h3>尚硅谷</h3>

      <button @click="showLog">点我输出H2</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">

import { ref ,defineExpose} from "vue";
//创建一个 title2,用于存储ref标记的内容

let titie2 = ref();
let a = ref(1);
let b = ref(2);
let c = ref(3);
  function showLog(){
      // console.log(document.getElementById('titie2'));
      console.log(titie2.value);
      
      

  }

  //要暴露出去，父组件才能看到子组件实例暴露的数据
  defineExpose({
      a,
      b,
      c
  })
  

</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 App组件

<template>
    <h2 ref="title2">你好</h2>
    <button @click="showLog">点击输出Person组件</button>
     <Person ref="ren"/>
</template>

<script lang="ts" setup name="App">
//js 或 ts
import Person from './components/Person.vue';
import {ref,watchEffect} from 'vue';

let title2 = ref();
let ren = ref();

function showLog(){
    console.log(ren.value);
}


</script>

<style scoped>
/* css */
.app{
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>

11.回顾TS 接口 类 泛型 

但是得在 

{
  "compilerOptions": {
    // ...
    "baseUrl": "./",  // 这里需要配置
    "paths": {
      "@/*": ["./src/*"]  // 这里需要配置
    }
    // 如果baseUrl设置为'src',那paths就应该配置为{"@/*": "./*"},如下：
    // "baseUrl": "src",
    // "paths": {
    //  "@/*": ["./*"]
    // }
    // 相关baseUrl，paths说明请查看官方文档
  },
  // include也需要配置以下：
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

加上上面的配置 ，这样 @/ 是 src 目录 而且不会飘红

回顾

<template>
  <div class="person">???</div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import { type PersonInter,type PersonS } from "@/types";

// let person: PersonInter = {
//   id: "01",
//   name: "张三",
//   age: 18,
// };

// let personList: Array<PersonInter> = [
//   {
//     id: "01",
//     name: "张三",
//     age: 18,
//   },
//   {
//     id: "02",
//     name: "李四",
//     age: 19,
//   },
// ];

 
let personList: PersonS = [
  {
    id: "01",
    name: "张三",
    age: 18,
  },
  {
    id: "02",
    name: "李四",
    age: 19,
  },
];







</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

 

//定义了一个接口,用于限制person对象的具体属性
export  interface PersonInter{
    id:string,
    name:string,
    age:number
}

// export type PersonS = Array<PersonInter>

export type PersonS = PersonInter[]
{
  "compilerOptions": {
    // ...
    "baseUrl": "./",  // 这里需要配置
    "paths": {
      "@/*": ["./src/*"]  // 这里需要配置
    }
    // 如果baseUrl设置为'src',那paths就应该配置为{"@/*": "./*"},如下：
    // "baseUrl": "src",
    // "paths": {
    //  "@/*": ["./*"]
    // }
    // 相关baseUrl，paths说明请查看官方文档
  },
  // include也需要配置以下：
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

12.props 使用

<template>
  <div class="person">
    <ul>
      <li v-for="item in personList" :key="item.id">
        {{ item.id }} -- {{ item.name }} -- {{ item.age }}
      </li>
    </ul>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
//带有 define开头的函数不用引入 在 vue3 里叫做宏函数 可以直接使用
  import {defineProps,withDefaults} from 'vue'
  import {type PersonS} from '@/types'

  //第一种写法 接受list,a 同时将props保存起来
//  let x = defineProps(['personList','a'])

// 第二种写法 限制类型
// let x = defineProps<{
//   personList?:PersonS,//可空
//   a:string
// }>()

//第三种写法 接受list+限制类型+限制必要性+指定默认值

 
let x = withDefaults(defineProps<{
  personList?:PersonS,//可空
  a:string
}>(),{
  personList:()=>
    [{
    id:'009',
    name:'王五',
    age:20
  }],
  a:'哈哈哈'
  
})
 console.log(x.a);
 


</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
<template>
     <Person :person-list="personList" :a="'哈哈'"/>
</template>

<script lang="ts" setup name="App">
//js 或 ts
import Person from './components/Person.vue';
import {type PersonS} from '@/types';
import {reactive} from 'vue';

//可以传入泛型
let personList = reactive<PersonS>([
     {
          id:'001',
          name:'张三',
          age:18
     },
     {
          id:'002',
          name:'李四',
          age:19
     }
     ,
     {
          id:'003',
          name:'王五',
          age:20,
     }

])

</script>

<style scoped>

</style>

13.生命周期

<template>
  <div class="person">
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="add">点我加一</button>
  </div>
</template>



<!-- 会自动暴露出去 -->
<script  lang="ts" setup  name="Person">
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

let sum = ref(0);

//创建 beforeCreate created
console.log("创建");

//挂载之前
onBeforeMount(() => {
  console.log("挂载之前");
});

//挂载完毕
onMounted(() => {
  console.log("挂载完毕");
});
//更新之前
onBeforeUpdate(() => {
  console.log("更新之前");
});

//更新完毕
onUpdated(() => {
  console.log("更新完毕");
});

//卸载之前
onBeforeUnmount(() => {
  console.log("卸载之前");
});

//卸载完毕
onUnmounted(() => {
  console.log("卸载完毕");
});

function add() {
  sum.value++;
}
</script>



<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>

荭色海湾
关注
专栏目录
Vue3-组件基础
fusheng_cn的博客
09-25 3004
vue3组件基础：单页面应用程序、vite的基本使用、组件化开发思想，vue组件的构成、组件的基本使用
vue3+ts+antd 前端基础模板
01-14
vue3结合vite使用typescript搭建的带有路由的轻量级布局模板。 Vue.js 的最新版本，它引入了许多新的特性和改进。以下是一些 Vue 3 的新特性： Composition API：Vue 3 引入了一个新的 API，称为 Composition API。...
Vue3：基础入门
CaptainDrake的博客
04-22 8609
vue简介、vue的基本使用、vue的指令与过滤器、品牌列表案例
vue3基础常用语法
halo1416的博客
05-29 2328
vue2 是option API;vue3是composition API。所以在语法上有很大不同，以下为上手vue3的常用语法。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue3基础语法
weixin_44530344的博客
08-15 2478
vue3对于vue2可以说是换汤不换药，只是语法发生了改变。
Vue3基础安装教程
m0_72967249的博客
11-05 4917
vue安装
Vue 3基础知识快速入门
青春_奋斗不息
05-14 2353
Vue是一个渐进式的JavaScript前端框架，它让用户构建页面变得更简单便捷。
Vue3 数据基础操作
xiamoziqian的博客
12-14 2542
一、知识点 defineComponent 构建应用及绑定事件 使用 reactive 绑定数据 使用 ref ( torefs ) 绑定数据 使用 getCurrentInstance 获取当前实例化对象上下文信息 watch、watchEffect 数据监听 简单的 TodoList 点餐功能 实例一：使用 reactive 绑定数据 <template> <div> <h1>使用 reactive 绑定数据</h1> <p&
vue3配置基础路径
小张微说的博客
05-08 2441
我们在部署项目的时候，有时项目很多时，可能并不是直接部署到根目录下，那么就需要给项目配置一个公共目录。例如：www.iotzzh.com/zh-admin，用这个地址去访问项目而不是直接使用www.iotzzh.com。 那么在vue3中需要改两处地方，一处自然是路由, 那么在路由中会默认添加zh-admin const router = createRouter({ history: cre...
vue3创建项目、基础知识
halo1416的博客
04-02 2781
Vue3的基础概念 一、创建vue3的项目（基于脚手架） // 前提：将vue-cli 升级到4.x 的版本 vue create my-app-ts // 使用ts npm install typescript ts-node -g 生成时操作如下: 二、vue3.0 部分写法改变 后面补充 createStore => useStore createRouter => useRouter vue所有api 的入口：setup vue3里面没有mapState 原因：mapState 是
vue3版openlayers基础脚手架
08-24
在本项目中，“vue3版openlayers基础脚手架”是一个使用Vue3框架构建的Web应用程序，它专门用于展示和操作二维地图。OpenLayers是一个强大的开源JavaScript库，它允许开发者在网页上创建交互式地图，支持多种数据源...
vue3-vite最基础的vue3文件夹
03-21
1. **Vue3 的新特性** - **Composition API**：Vue3 引入了 Composition API，允许开发者更加灵活地组织和重用组件逻辑，提高了代码可读性和维护性。 - **Suspense 组件**：用于在组件渲染之前显示占位符，提高...
vue3基础语法&示例demo.zip
02-21
这个“vue3基础语法&示例demo.zip”压缩包文件显然是为了帮助学习者掌握Vue3的基础语法和实际应用。下面我们将深入探讨Vue3的核心概念、新特性以及如何通过示例来学习它们。 1. **Composition API**：Vue3引入了...
Vue 基于vite构建vue3项目 以及基础语法演示
07-17
Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 842
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1193
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 318
Vue根实例、实例总结
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 904
自定义指令
vue3 ts 基础
08-31
1. 安装 Vue 3 和 TypeScript：你可以使用 npm 或者 yarn 来安装 Vue 3 和 TypeScript。安装 Vue 3 的命令是：`npm install vue@next`，安装 TypeScript 的命令是：`npm install --save-dev typescript`。 2. 创建 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值