一、基本语法
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>