Vue.js基础实验

1 实验类型

验证型，2学时，必选实验

2 实验目的

熟悉Vue.js基本语法；了解Vue.js组件编程模式；

3 实验要求

验证参考代码；修改参考代码，实现自己的设计；将关键结果截图及源代码整理成实验报告

4 实验环境

Windows7、Microsoft Edge/Chrome/Firefox等浏览器、Visual Studio Code、Vue.js 3+、Node.js、NPM

vue.js下载地址：https://unpkg.com/vue@3/dist/vue.global.js

5 实验步骤

创建工作目录：{盘符}:/{学号}/exp3_vuejs，后续文件均存放在工作目录

Hello Vue.js

将Vue.js放入该工作目录
将vue.global.js放到工作目录

注意：若参考代码中引用的文件路径与实际不符时，请按实际情况调整

创建文件Hello.html并输入Hello Vue.js代码，参考代码如下：

vue_Hello.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello Vue.js</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="hello-vue" class="demo">
    <div>{{ message }}</div>
    <input type="text" v-model="message">
  </div>

  <script>
    const vm = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue.js!'
        }
      }
    });

    vm.mount('#hello-vue')
  </script>
</body>

</html>

修改文本框内的字符串观察界面变化

Hello Vue.js(NPM方式)

安装Node.js
安装vue-cli
```
npm install -g @vue/cli
```
查看Vue版本
```
vue --version
```
安装@vue/cli-init
```
npm i -g @vue/cli-init
```

创建Vue应用

vue init webpack vue-cli-test    
? Project name vue-cli-test
? Project description Hello Vue-Cli
? Author 86263008 <86263008>
? Vue build standalone      
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

进入vue-cli-test目录，启动应用：
```
npm run dev
```
在浏览器中访问http://localhost:8080

条件语句

创建文件：Conditional.html，生成随机数并根据随机数值的不同显示不同的字符串，参考代码如下:

条件语句
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>条件语句</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="yao">摇</button>
    <p>{{rnd}}</p>
    <p v-if="rnd >= 0.5">这把是大</p>
    <p v-else>这把是小</p>
  </div>

  <script>
    const vm = Vue.createApp({
      data() {
        return {
          rnd: 0
        }
      },
      methods: {
        yao(event) {
          this.rnd = Math.random();
        }
      }
    }
    );

    vm.mount('#app');
  </script>
</body>

</html>

循环语句

创建文件：vue_Loop.html，使用循环命令创建有序列表，参考代码如下：

循环语句
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>循环语句</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>

  <script>
    const vm = Vue.createApp({
      data() {
        return {
          todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
          ]
        }
      }
    });
    vm.mount('#app')
  </script>
</body>

</html>

监听属性

创建文件：vue_Watcher.html，通过属性监听实现单位换算，参考代码如下：

监听属性
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>监听属性</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    千米 : <input type="text" v-model="kilometers">
    米 : <input type="text" v-model="meters">
  </div>
  <p id="info"></p>
  <script type="text/javascript">
    const app = Vue.createApp({
      data() {
        return {
          kilometers: 0,
          meters: 0
        }
      },
      watch: {
        kilometers: function (val) {
          this.kilometers = val;
          this.meters = this.kilometers * 1000
        },
        meters: function (val) {
          this.kilometers = val / 1000;
          this.meters = val;
        }
      }
    });

    app.mount('#app')
  </script>
</body>

</html>

事件处理

创建文件：vue_Event.html，利用事件处理实现两个数据的加法，参考代码如下：

事件处理
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>事件处理</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    数1：<input type="text" v-model="num1">
    数2：<input type="text" v-model="num2">
    <button @click="add">加</button>
    <p>{{result}}</p>
  </div>

  <script>
    const vm = Vue.createApp({
      data() {
        return {
          num1: 0,
          num2: 0,
          result: 0
        }
      },
      methods: {
        add(event) {
          this.result = parseFloat(this.num1) + parseFloat(this.num2);
        }
      }
    });
    vm.mount('#app')
  </script>
</body>

</html>

在步骤1基础上实现减乘除法

组件

创建文件：vue_Component.html，将Loop.html中列表改造为组件，参考代码如下：

组件
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>组件</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <ol>
      <todo-item v-for="item in todos" v-bind:todo="item"></todo-item>
    </ol>
  </div>

  <script>
    const vm = Vue.createApp({
      data() {
        return {
          todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
          ]
        }
      }
    });
    vm.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    });
    vm.mount('#app')
  </script>
</body>

</html>

综合

表单校验

使用vue.js对Html基础实验中创建的学生表的表单数据进行校验，失败时在元素后边显示错误信息，至少实现以下规则：

元素	校验规则
学号 (no)	- 不能为空 - 必须是数字
姓名 (name)	- 不能为空
性别 (gender)	- 必须是"男"或"女"
年龄 (age)	- 不能为空 - 必须是正整数
所在系 (dept)	- 不能为空

代码模板如下：

表单校验
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>学生表</title>  
  <script src="vue.js"></script>  
  <style>  
    .error-message {  
      color: red;  
    }  
  </style>  
</head>  
<body>  
  <div id="app">  
    <h3>学生表</h3>  
    <div class="container">  
      <form @submit.prevent="submitForm">  
        <div>  
          <label for="no">学号:</label>  
          <input type="text" id="no" v-model="form.no" placeholder="请输入学号..">  
          <span v-if="formErrors.no" class="error-message">{{ formErrors.no }}</span>  
        </div>  
        <!-- 完整代码需要包含其他字段的校验 -->  
        <button type="submit">提交</button>  
      </form>  
    </div>  
  </div>  

  <script>  
    const { ref, onMounted } = Vue;  

    const app = Vue.createApp({  
      setup() {  
        const form = ref({  
          no: ''  
          // 其他字段...  
        });  
        const formErrors = ref({  
          no: ''  
          // 其他字段的错误信息...  
        });  

        const validateForm = () => {  
          formErrors.value = {  
            no: ''  
            // 初始化其他字段的错误信息...  
          };  

          // 校验学号  
          if (form.value.no === '') {  
            formErrors.value.no = '学号不能为空';  
            return false;  
          }  

          // 校验其他字段...  

          // 如果没有错误，返回true  
          return Object.values(formErrors.value).every(error => error === '');  
        };  

        const submitForm = () => {  
          if (validateForm()) {  
            // 如果验证通过，可以执行表单提交逻辑  
            // 例如：使用axios发送POST请求到服务器  
            console.log('Form submitted with data:', form.value);  
          }  
        };  

        onMounted(() => {  
          // 这里可以放置组件挂载后需要执行的代码  
        });  

        return {  
          form,  
          formErrors,  
          submitForm  
        };  
      }  
    });  

    app.mount('#app');  
  </script>  
</body>  
</html>

拓展练习

使用vue.js实现课程表表单的校验