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 标签值为 100
      pColor: '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>