Vue3基础语法

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量1k 收藏 15
点赞数 16
分类专栏： 前端 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73966521/article/details/140804003
版权

一：创建Vue3工程（适用Vite打包工具）

Vite官网：Home | Vite中文网 (vitejs.cn)

 

直接新建一个文件夹，打开cmd运行：

npm create vite@latest

选择Vue和TS语言即可

生成一个项目。

Vue3的核心语法：

【OptionsAPI 与 CompositionAPI】

  • Vue2的API设计是Options（配置）风格的。

  • Vue3的API设计是Composition（组合）风格的。

 这种就是选项式API，数据和方法分开发，

这样的好处我觉得就是整体的架构很清晰

但是缺点就是修改起来很麻烦，方法和数据都散落在不同的地方

 

这种就是组合式API，这个组合式API就和后端的java代码一样，把变量和方法都写在一起

 当然，能实现这个组合式API和下面的这个setup密不可分。

Setup：

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

特点如下：

  • setup函数返回的对象中的内容，可直接在模板中使用。

  • setup中访问this是undefined。

  • setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。 

直接看一段代码： 

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>
setup 语法糖

这个语法糖直接可以把setup独立出去

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
<!-- 下面的写法是setup语法糖 -->
<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>

响应式变量：

概念：响应式允许我们在应用程序运行过程中动态地跟踪和更新值，当这些变量的值变化时，视图会自动更新，体现了数据驱动和单向数据流的原则

 上一个案例就很好理解了：

<script setup lang="ts" >
import {ref} from "vue";

const name = ref('张三');
const changename = () =>{
  name.value = '李四';
  console.log(name.value)
}
</script>

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <button @click="changename">修改名字</button>
  </div>
</template>

这段代码逻辑很简单，就是定于了一个响应式变量name，点击按钮触发回调函数修改name属性

非常简单的一个功能

如果我们将这个name换成不是响应式的变量，那么效果就是

‘控制台会输出李四，说明name这个属性的值已经被改了，不过浏览器页面不会显示李四，因为这个变量不是响应式的，在页面上不会改变。

ref 创建

  • 作用：定义响应式变量。

  • 语法：let xxx = ref(初始值)。

  • 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

ref定义的响应式变量在这个script脚本中调用值是需要加.value的，在声明组件的模板部分就是</template>中的html标签部分调用是不需要.value的 

 reactive 创建

  • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）

  • 语法：let 响应式对象= reactive(源对象)。

  • 返回值：一个Proxy的实例对象，简称：响应式对象。

  • 注意点：reactive定义的响应式数据是“深层次”的。

 reactive我觉得用到不多，ref也可以处理对象类型的数据，不过ref处理对象类型的数据的时候在底层是转化为reactive的

案例： 
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>
 注意点1：响应式变量里套响应式变量
const obj = reactive({
  a:1,
  b:2,
  c:ref(3)
})
console.log(obj.a)
console.log(obj.b)
console.log(obj.c)

很简单一小段代码，

reactive包着一个响应式对象，里面有一个ref

这个时候我们想要输出3这个值是不需要加.value的

在响应式变量里面的响应式变量会自动解构。

 注意点2：响应式变量丢失响应式：

看这段代码：

<script setup lang="ts" >
import {ref,reactive} from "vue";

// 定义一个响应式变量
const data = reactive ({
  name:"abc",
  age:"18"
})
let {name,age} = data
// 使用toRefs解决
function ChangeName(){
  name += '------';
  console.log(name)
}
</script>

<template>
  <div class="person">
    <h2>name是：{{name}}</h2>
    <button @click="ChangeName" >修改名字</button>
  </div>
</template>

这段代码的整体逻辑也很简单，就是定义了一个响应式对象，里面有两个属性

我们对这个变量进行解构，然后新建了一个按钮，点击按钮之后调用回调函数ChangeName修改name的值。

点击之后：

 

 控制台输出了修改之后的名字，可以屏幕上的值并没有改变

这说明name这个属性丢失了响应式

原因式因为解构赋值会创建一个新的引用，而不是原始对象

解决办法：
1：ToRefs
<script setup lang="ts" >
import {ref, reactive, toRefs} from "vue";

// 定义一个响应式变量
const data = reactive ({
  name:"abc",
  age:"18"
})
let {name,age} = toRefs(data)
// 使用toRefs解决
function ChangeName(){
  name.value += '------';
  console.log(name.value)
}
</script>

 2：直接用ref定义这个对象：
<script setup lang="ts" >
import {ref, reactive, toRefs} from "vue";

// 定义一个响应式变量
const data = ref ({
  name:"abc",
  age:"18"
})

function ChangeName(){
  data.value.name += "------";
  console.log(data.value.name)
}
</script>

<template>
  <div class="person">
    <h2>name是：{{data.name}}</h2>
    <button @click="ChangeName" >修改名字</button>
  </div>
</template>

toRefs 与 toRef:
<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

Watch：

作用：监视数据的变化

比如检测到年龄超过18岁，然后执行什么逻辑

又或者检测到金额超过一定大小，然后执行什么逻辑

  • 特点：Vue3中的watch只能监视以下四种数据：

  1. ref定义的数据。

  2. reactive定义的数据。

  3. 函数返回一个值（getter函数）。

  4. 一个包含上述内容的数组。

来自Vue3的官方文档

 情况一：ref的基本数据
<script setup lang="ts">
import {ref,watch} from "vue";

let sum = ref(5);
function AddSum(){
  sum.value++;
}
const stopWatch = watch(sum,(newVal) => {
  console.log(newVal);
  if(newVal >= 10){
    stopWatch();
  }
})
</script>

直接照着数据名写就行，

watch函数中有两个点，一个是这个返回值stopWatch，这个就是用来停止监视的，

看得后面的if逻辑，当这个newVal就是变化后的值超过了10，就停止监视

还有watch的第二个参数，（newVal），后面其实还能写，写成（newVal，OldVal），这顾名思义就是变化前和变化后的值。

情况二：对象类型数据

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。{deep:true}

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

案例：

<script setup lang="ts">
import {ref,watch} from 'vue'
// 数据
let person = ref({
  name:'张三',
  age:18
})
// 方法
function changeName(){
  person.value.name += '~'
}
function changeAge(){
  person.value.age += 1
}
function changePerson(){
  person.value = {name:'李四',age:90}
}
/*
  监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
  watch的第一个参数是：被监视的数据
  watch的第二个参数是：监视的回调
  watch的第三个参数是：配置对象（deep、immediate等等.....）
*/
watch(person,(newValue,oldValue)=>{
  console.log('person变化了',newValue,oldValue)
},)
</script>

<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

这一段代码逻辑就是：创建了一个person对象里面有两个值，姓名和年龄，我们有三个函数分别修改姓名，年龄和整个人

然后我们的watch第一个参数传的式watch

 我点击修改姓名或者修改年龄，控制台没有任何反应

当我修改整个人的时候，控制台才有输出

说明用ref定义对象类型的数据，监视的是地址值，检测不到对象里面的具体属性

将watch函数修改一下，开启深度监视。

watch(person,(newValue,oldValue)=>{
  console.log('person变化了',newValue,oldValue)
},{deep:true})

当对象类型的内部数据发生了改变，这马上就发生了变化。

情况三：监视ref或reactive定义的【对象类型】数据中的某个属性，

  1. 若该属性值不是【对象类型】，需要写成函数形式。

  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

直接看代码：

<template>
  <div class="person">
    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
   watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name变化了',newValue,oldValue)
  })

整体的逻辑就是将要监视对象的某个属性以箭头函数的方式做为第一个参数

情况四：监视多个数据：

还是直接看代码：

<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况五：监视上述的多个数据
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})

</script>

就是把想要监视的多个数据封装成一个对象。

WatchEffect：

  • 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

直接看代码：

<script lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from 'vue'
  // 数据
  let temp = ref(0)
  let height = ref(0)

  // 方法
  function changePrice(){
    temp.value += 10
  }
  function changeSum(){
    height.value += 1
  }

  // 用watch实现，需要明确的指出要监视：temp、height
  watch([temp,height],(value)=>{
    // 从value中获取最新的temp值、height值
    const [newTemp,newHeight] = value
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(newTemp >= 50 || newHeight >= 20){
      console.log('联系服务器')
    }
  })

  // 用watchEffect实现，不用
  const stopWtach = watchEffect(()=>{
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(temp.value >= 50 || height.value >= 20){
      console.log(document.getElementById('demo')?.innerText)
      console.log('联系服务器')
    }
    // 水温达到100，或水位达到50，取消监视
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
  })
</script>

生命周期：

在Vue.js中，组件生命周期是指组件在其整个存在期间所经历的一系列阶段

  1. 创建前（beforeCreate）：在此阶段，实例正在初始化，但是数据还没有被观察到，$options 已经可用。
  2. 创建（created）：实例已经完全初始化，并且数据已经通过运行时代理被劫持（watched）。这是执行数据初始化的好时机。
  3. 挂载（mounted）：组件已经被DOM挂载到了某个元素上，此时可以开始执行异步操作和监听事件，因为实例已经稳定了。
  4. 更新（updated）：当组件的props、响应式数据或计算属性发生改变，且VNode已经更新完成之后触发。在此阶段可以处理数据的变化。
  5. 销毁（beforeDestroy）/（destroyed）：组件即将卸载或已经卸载之前，执行清理工作，比如解绑事件和清除定时器等。

  • 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

<!-- vue3写法 -->
<script lang="ts" setup name="Person">
  import { 
    ref, 
    onBeforeMount, 
    onMounted, 
    onBeforeUpdate, 
    onUpdated, 
    onBeforeUnmount, 
    onUnmounted 
  } from 'vue'

  // 数据
  let sum = ref(0)
  // 方法
  function changeSum() {
    sum.value += 1
  }
  console.log('setup')
  // 生命周期钩子
  onBeforeMount(()=>{
    console.log('挂载之前')
  })
  onMounted(()=>{
    console.log('挂载完毕')
  })
  onBeforeUpdate(()=>{
    console.log('更新之前')
  })
  onUpdated(()=>{
    console.log('更新完毕')
  })
  onBeforeUnmount(()=>{
    console.log('卸载之前')
  })
  onUnmounted(()=>{
    console.log('卸载完毕')
  })
</script>

用的最多的应该就是onMounted(挂载完毕)，我觉得可以把这个方法理解为后端的拦截器即可

我记得后面还有一个场景用了onUnmounted这个卸载之后的钩子，好像emitter绑定了一个事件，

这个也很好理解，当你的组件被卸载之后，拿绑定的事件就可以直接删除了

这也可以理解为java中的IO流，我们每次开流关流之后都会在finally中关掉这个流

自定义Hooks：

 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装

这个对于后端来说超级好理解，这个自定义hooks可以理解为工具类。

具体用法：

import {ref,onMounted} from 'vue'

export default function(){
  let sum = ref(0)

  const increment = ()=>{
    sum.value += 1
  }
  const decrement = ()=>{
    sum.value -= 1
  }
  onMounted(()=>{
    increment()
  })

  //向外部暴露数据
  return {sum,increment,decrement}
}

我们在这个ts文件中，定义了一个变量，还有一些对这个变量的方法，还有一个生命周期钩子

并且需要记得要向外暴露。

<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="increment">点我+1</button>
  <button @click="decrement">点我-1</button>
  <hr>
</template>

<script setup lang="ts">
  import useSum from './hooks/useSum'
  let {sum,increment,decrement} = useSum()
</script>

用一个对象类型的数据接受useSum文件中的暴露值，然后直接在模板文件中使用即可

 

我要200
关注
  • 16
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3基础语法&示例demo.zip
02-21
这个“vue3基础语法&示例demo.zip”压缩包文件显然是为了帮助学习者掌握Vue3的基础语法和实际应用。下面我们将深入探讨Vue3的核心概念、新特性以及如何通过示例来学习它们。 1. **Composition API**：Vue3引入了...
vue3基础语法&示例demo.pdf
02-21
### Vue 3 基础语法与示例详解 #### Vue 3 概览 Vue 3 是 Vue.js 的一个重要版本更新，它不仅保持了 Vue 2 的核心特性，还在此基础上进行了大量的优化和增强。这包括但不限于性能提升、API 的简化以及对现代 ...
Vue3 基础语法
code袁的博客
05-09 1291
项目文件下运行 npm init vue@latest。1.在父组件在vue3中引入子组件，直接使用，不需要注册。ref执行的响应式数据，要用.value接受,2.在子组件通过defineProps接受数据。provide 发送消息，inject接受消息。调用computed，返回值用一个常量接受。2.watch 默认是监听ref浅层监听。vue3的生命周期和vue2类似。响应式api，完成响应式数据。1.监听单个值的变化。2.监听多个值的变化。
vue3基础语法
汉堡请不要欺负面条
02-24 2178
一.组合式API (1). vue2组件的局限性 1.组件越大，可续性越差 2.相同的代码逻辑很难在多个组件中复用 二.
vue3基础常用语法
halo1416的博客
05-29 2172
vue2 是option API;vue3是composition API。所以在语法上有很大不同，以下为上手vue3的常用语法。
vue3.0基础语法总结
dum_plings的博客
05-11 3302
vue3.0基础语法总结 前言 大家好！我叫椰_季，是一个刚入行不久得前端工程师，本着在提升自我学习能力为前提和认识一些前端方面得朋友为主要任务。准备发布一篇自己学习vue3.0基础语法的总结。学习途径来源于B站张天禹老师。 vue2.0的一些缺陷 我们先来说一说vue2.0存在的一些缺陷，大家都知道vue2.0中数据的代理方式是使用的defineProperty来实现响应式的。那么defineProperty存在什么样的问题呢 不能监听数组的变化 必须遍历对象的每个属性 必须深层遍历嵌套的对象
Vue3:基础语法
YanHSama的博客
06-27 1092
vue3.0基础语法
【前端-VUE+TS】Vue3基础语法（一）
qq_48234463的博客
01-03 1202
【前端-VUE+TS】VUE3基础语法（一）
vue基础语法
若有所执，必有所成，心之所向，必显光芒
07-04 839
内容渲染指令，属性绑定指令，事件绑定，事件修饰符，按键修饰符，双向绑定，列表渲染，v-for语法
一文带你学会Vue3基本语法
大河之犬的博客
11-19 2631
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。指令将该元素的 href 属性与表达式 url 的值绑定。
Vue2基础语法
weixin_52441428的博客
05-07 1782
Vue2基础语法【插值语法 指令 事件 事件修饰符 条件渲染 遍历渲染 变更方法 checkbox和radio 】
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
Vue 基于vite构建vue3项目 以及基础语法演示
07-17
Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1327
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 294
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 872
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 317
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
vue3基础语法小案例
04-03
以下是一个简单的Vue3基础语法小案例： HTML代码： ``` <div id="app"> <h1>{{ message }}</h1> <button v-on:click="changeMessage">Change Message</button> </div> ``` Vue实例代码： ``` const app = Vue.createApp({ data() { return { message: 'Hello, Vue3!' } }, methods: { changeMessage() { this.message = 'Vue3 is awesome!' } } }) app.mount('#app') ``` 运行效果： 当页面加载时，会显示一个标题为“Hello, Vue3!”的H1标签和一个按钮。当用户点击按钮时，会调用changeMessage方法，将message的值改为“Vue3 is awesome!”，并更新页面上的H1标签的文本内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值