基础结构

Vue文件中基本上和咱们自己写Html、CSS、JS差不太多，主要也由这三部分组成

HTML部分：

<template><div>这里面写HTML代码</div>
</template>

CSS部分：

<style scoped>
.aaa {font-size: 3em;
}
</style>

JS部分:这边使用的是TS

<script lang="ts">
export default {data() {return {}},computed: {},watch: {},created() {},methods: { }
}
</script>

学习Vue实际上主要就是学习上面JS里面的内容

详细描述

data

主要是return方法，其中多是写一些变量，例如

  data() {return {id:1,user:{name:“zhangsan","age":12},data:[{color:"red",with:"100px"}]}},

如上所述:它可以是一个常量，也可以是对象，也可以是数组，也不要榆木脑袋，例如user可以将后端传入的对象直接赋值，例如：

user:user

computed：

是一个对象，包含一些计算属性的定义。计算属性根据依赖的数据动态计算出一个新值，并且具有缓存特性，只有在依赖数据变化时才会重新计算。

实例：

computed: {fullName() {return `${this.firstName} ${this.lastName}`;}
}

它可以每时每刻的计算其值并实时返回，它实际也是一种methods。不过他更注重性能

methods

是一个包含了一组方法的对象。这些方法可以在组件的模板中调用，用于处理事件、响应用户输入或者执行其他的业务逻辑。就是平时我们写的funcation都属于这里没的内容

methods: {greet() {alert(`Hello, ${this.name}!`);}
}

就是一堆js里面的function

watch

是一个对象，包含了对组件数据的监听器。它用于观察和响应数据的变化，并且可以执行异步操作或复杂的逻辑。

watch: {counter(newValue, oldValue) {console.log(`counter值从 ${oldValue} 更新为 ${newValue}`);}
}

常用的场景就是监听json中的变化，来调用某些函数

mounted

是一个生命周期钩子函数，表示组件已经被挂载到 DOM 上。在这个钩子函数中，可以进行一些初始化操作，或者请求数据。

mounted() {console.log('组件已经挂载到DOM');
}

这些属性和钩子函数都是 Vue 组件定义中常用的内容，通过它们可以实现组件的数据管理、业务逻辑处理、响应式更新等功能。

在者例如你在普通js中使用vue结构的话如何调用vue中的函数部分可以直接将vue中的method挂载到window窗口

window.greet = this.greet

created

里面是一些初始化变量，页面加载进去就会执行的代码，类似于JQuery中的$(function(){})

 created() {// 在组件创建后立即获取数据this.fetchPosts();},methods: {fetchPosts() {// 模拟异步请求数据fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json()).then(posts => {this.posts = posts;});}}

  关注公众号：资小库，问题快速答疑解惑