Web开发：VUE3小白开发入门基础笔记

一、基本语法

1.@click

后端路由：api/GetDataList
返回值：Value
前端要做的事：
①拿到Value值，传到a标签
②a标签有一个按钮，每点击一下，Value的值加一。
前端需要用@click语法

【代码】 

<template><div><p>Value: {{ value }}</p><a :href="`#${value}`"><button @click="incrementValue">增加 Value</button></a></div>
</template><script>
import axios from 'axios';export default {data() {return {value: 0 // 初始值，将在 mounted 钩子中从后端获取};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('/api/GetDataList').then(response => {this.value = response.data.value;}).catch(error => {console.error('Error fetching data', error);});},incrementValue() {this.value++;}}
};
</script>

 2.v-show

c#WebAPI +VUE3开发
后端路由：api/GetDataList
返回值：Value
前端要做的事：
①默认p标签值是：100，黑色
②拿到Value值，value=1，则p标签显示为1，显示该黑色标签
                 value=0，则p标签显示为0，颜色设置为红色
            value=其他，则隐藏该标签
③前端用show属性控制显示

<template><div><!-- 根据需求设定 p 标签的初始状态 --><p :style="{ color: pColor }" v-show="showP">{{ pValue }}</p></div>
</template><script>
import { ref, onMounted } from 'vue';
import axios from 'axios';export default {name: 'YourComponentName',data() {return {pValue: 100,  // 默认 p 标签值为 100pColor: 'black',  // 默认 p 标签颜色为黑色showP: true  // 默认显示 p 标签};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('/api/Data/GetDataList').then(response => {const data = response.data;// 根据返回的数据进行逻辑判断if (data.number === 1) {this.pValue = 1;this.pColor = 'black';  // 或其他颜色} else if (data.number === 0) {this.pValue = 0;this.pColor = 'red';  // 红色} else {this.showP = false;  // 隐藏 p 标签}}).catch(error => {console.error('Error fetching data:', error);});}}
};
</script>

3.v-if

【需求】点击按钮实现隐藏和复现

<template><div><p v-if="showMessage">这是一个消息</p><button @click="toggleMessage">Toggle Message</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 使用 ref 创建响应式数据const showMessage = ref(true);// 切换消息显示状态的方法const toggleMessage = () => {showMessage.value = !showMessage.value;};return {showMessage,toggleMessage};}
};
</script>

4.v-bind : 动态绑定 

【需求】v-bind 指令用于动态地绑定 HTML 属性。它可以接收一个 JavaScript 表达式作为参数，将该表达式的结果绑定到指定的 HTML 属性上。

【注释】v-bind可以简写成：

<template><div><!-- 绑定一个动态的class --><div :class="className"></div><!-- 绑定一个动态的style --><div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div><!-- 绑定一个动态的href属性 --><a :href="url">Visit Vue.js website</a><!-- 绑定一个动态的disabled属性 --><button :disabled="isButtonDisabled">Click me</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 使用 ref 创建响应式数据const className = ref('box');const textColor = ref('red');const fontSize = ref(16);const url = ref('https://vuejs.org');const isButtonDisabled = ref(false);// 模拟一个事件处理函数const handleClick = () => {isButtonDisabled.value = true;};return {className,textColor,fontSize,url,isButtonDisabled,handleClick};}
};
</script>

三、WebAPI和VUE3

【需求一】后端拿值显示

后端路由：api/GetDataList
返回值：Name
请你在前端中渲染“后端返回的Name是：xxx” 且返回一个状态码200出去

 【代码】

<template><div><p>后端返回的Name是：{{ backendName }}</p><p>状态码：{{ statusCode }}</p></div>
</template><script>
import axios from 'axios';export default {data() {return {backendName: '',statusCode: ''};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('api/GetDataList').then(response => {this.backendName = response.data.Name;this.statusCode = response.status;}).catch(error => {console.error('Error fetching data:', error);});}}
};
</script>

【解析】
1.模板通常是由 <template> 标签包裹的一段HTML代码

2.使用axios进行HTTP请求时，axios的get()方法返回一个Promise对象，这个响应对象通常具有以下结构：

{data: {},        // 响应体数据status: 200,     // HTTP状态码statusText: 'OK', // HTTP状态消息headers: {},     // 响应头信息config: {},      // axios请求配置request: {}      // XMLHttpRequest实例
}

3. mounted() 钩子函数中，通常用于初始化页面。

4.data() 方法返回的对象是用于声明组件的响应式数据

5.双括号用于js给html传值。

【需求二】后端拿值显示，遍历列表

后端路由：api/GetDataList
返回值：time，DetailData(包含一个列表：List<string> studentname ，一个数字:Status)
请你在前端中渲染“现在的时间是xxx，状态是xxx，打印后端给的studentname ：”

<template><div><p>现在的时间是 {{ currentTime }}，状态是 {{ status }}</p><ul><li v-for="name in studentNames" :key="name">{{ name }}</li></ul></div>
</template>
<script>
import axios from 'axios';export default {data() {return {currentTime: '', // 用于存储时间status: '', // 用于存储状态studentNames: [] // 用于存储学生名单};},mounted() {this.fetchData(); // 在组件挂载后调用数据获取函数},methods: {async fetchData() {try {const response = await axios.get('api/GetDataList');const data = response.data;this.currentTime = data.time;this.status = data.Status;this.studentNames = data.DetailData.studentname;} catch (error) {console.error('Failed to fetch data:', error);// 在实际应用中可能需要处理请求失败的情况}}}
};</script>