vue阶段性测试题，内容丰富，案例典型，题目配有答案

皆过客，揽星河2024-05-16 6:01

阶段性测试

  • 理论题
  • 实践题

1）理论题

  1. 请简述Vue、Node.js、Vscode是什么，以及有什么关系

    HTML 复制代码 
    1. vue是一个轻量级、比较灵活的且支持组件开发的网络框架
2. node.js是让JavaScript运行在服务器上的一直环境
3. Vscode是一款有着丰富插件的代码编辑器
4. 关系是，vscode是画板，node.js是颜料，vue是画画的内容

  2. 请简述Vue中什么是指令，以什么开头，列举至少8个vue指令

    1. 用于实现某种效果和逻辑的代码叫指令
2. 以v-为开头
3. v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model

  3. 请简述Vue中template、script和style标签的作用

    1. template是用于写网页的
2. script是用于写逻辑
3. style写网络样式，美化网页

  4. 请修改代码，让下面p标签的代码中展示一段html标签，能在浏览器中显示html标签

    vue 复制代码 
    <template>

<p v-text="message"></p>    /* v-text用于原样输出html标签 */

</template> 
<script setup>
import { ref } from "vue";
const message = `<span>咬定青山不放松， 立根原在破岩中</span>`   
</script>

  5. 请简述Vue中的双向数据绑定，以及使用哪个命令进行双向绑定

    1. 当script标签下的变量发生改变，template标签下的变量会发生对应的改变，因为template标签下一般用来写网页结构，所以当网页上通过一些操作改变变量值后，script 标签内的变量值夜会发生改变
2. v-model

  6. 使用哪个命令给标签中的属性绑定变量，这个命令的缩写是什么

    1. v-bind
2. 缩写是 ：号

  7. 使用哪个命令给标签中的事件绑定变量,这个命令的缩写是什么

    1.v-on
2. @

  8. 使用哪个命令，来进行循环

    1. v-for

  9. 使用哪个命令来进行数据的双向绑定

    1. v-model

  10. javascript中如何定义变量,如何定义常量

    1. 变量 var / let来定义
2. 常量 const

  11. javascript中如何定义函数，用两种方式，定义两个函数

    1.  函数名 = (参数) =>{
                            函数体
                        } 
  
2. function 函数名(参数){
                            函数体
                        }

  12. 请写出从头开始，创建vue项目的命令步骤，以及如何运行

    1. cd Desktop     
2. mkdir vue3
3. npm  create vite
4. 取项目名、选vue、选JavaScript
5. code .打开项目文件
6. npm install 拉取环境依赖
所有的前提是已经下载node.js

  13. 假设你helloworld.vue文件位于/users/project/myproject/vite-project/vue3/example/src/components目录下，请问应该在哪个目录执行npm run dev命令？这个目录里面必须包含哪个文件？

    cd /users/project/myproject/vite-project/vue3/example下  
必须要有package.json这个文件，因为这个文件中存放着，运行项目所需的依赖环境。

2）实战练习

  1. 使用函数关键字的形式，定义一个函数，这个函数接收两个参数，返回两个数的和

     function sum(a,b){
                    return a + b
                                 }

  2. 使用箭头函数的形式，定义一个函数，这个函数接收两个数值参数，使用三元表达式，返回两个数中更大的那一个

     const return_big = (1, 3) =>{
                            1 > 3 ? 1 : 3

  3. 用js语法定义一个对象info，其中有name,age,score,id,gender五个字段，其中gender代表性别，只能为 男或者 女， age为数字，范围在10-30之间，name为字符串，score为分数，范围在1-100之间

    const info = {
                name : 'ok', age : 12, score : 22, id :  1, gender : '男'
                           }

  4. 请在script标签中，定义一个响应式数组，命名为arr，包含10个对象，每个对象是上题中的info的格式，但是内容不一样，尤其是id不能重复

    html 复制代码 
    <script setup>
import { ref } from "vue";
const arr = ref([
  { name: 'q', age: 12, score: 22, id: 1, gender: '男' },
  { name: 'w', age: 12, score: 22, id: 2, gender: '男' },
  { name: 'e', age: 15, score: 22, id: 3, gender: '女' },
  { name: 'r', age: 12, score: 22, id: 4, gender: '女' },
  { name: 't', age: 16, score: 22, id: 5, gender: '男' },
  { name: 'y', age: 12, score: 22, id: 6, gender: '女' },
  { name: 'u', age: 18, score: 22, id: 7, gender: '男' },
  { name: 'i', age: 12, score: 22, id: 8, gender: '女' },
  { name: 'o', age: 19, score: 22, id: 9, gender: '男' },
  { name: 'p', age: 12, score: 22, id: 10, gender: '男' }
])
</script>

  5. 完成下面按钮的功能，点击开关按钮，页面上以列表的形式显示上一题中定义的数组arr中的信息，再次点击，不显示内容

    html 复制代码 
    <template>
    
  <button @click="show">开关按钮</button>   /* @click,一般和函数产生事件绑定，当用户点击按钮时，@click给函数show发出信号，于是在script标签下，对应的show函数被调用 */
    /* 在 v-if语句中只有，""号中为true 才会执行后面的代码 */
  <div v-if="imgs" v-for="i in arr">name:{{ i.name }} age:{{ i.age }} gender:{{ i.gender }} </div>
   /* v-for 语句中，会循环数组arr中每一行的数据，i代表每一行 */
</template>

<script setup>
import { ref } from "vue";
const arr = ref([
  { name: 'q', age: 12, score: 22, id: 1, gender: '男' },
  { name: 'w', age: 12, score: 22, id: 2, gender: '男' },
  { name: 'e', age: 15, score: 22, id: 3, gender: '女' },
  { name: 'r', age: 12, score: 22, id: 4, gender: '女' },
  { name: 't', age: 16, score: 22, id: 5, gender: '男' },
  { name: 'y', age: 12, score: 22, id: 6, gender: '女' },
  { name: 'u', age: 18, score: 22, id: 7, gender: '男' },
  { name: 'i', age: 12, score: 22, id: 8, gender: '女' },
  { name: 'o', age: 19, score: 22, id: 9, gender: '男' },
  { name: 'p', age: 12, score: 22, id: 10, gender: '男' }
])
/* 显示与隐藏设置 */
const imgs = ref() /* 刚开始为给值的时候是flase */ 
const show = () => {
  imgs.value = !imgs.value   /* ！ = 不是  ， ！imgs = ！flase = true ，当第一次调用的时候，imgs会被等号右边的赋值为true，第二次会再被赋值为flase */
}
</script>

  6. 完成下面按钮的功能，点击'男性'按钮，展示gender等于男性的信息，点击'女'性按钮，展示女性的信息

    1. 三元符的方法
    html 复制代码 
    <template>
    
 <button @click="show_man">男性</button>
 <button @click="show_woman">女性</button>
 <ul>
     /* 首先要明白filter的过滤作用，{}号里用来写表达式， let用于定义局部变量 
     	其次要理解，一个人要么是男要么是女，原理和布尔值flase 和 true相似，所以
     	关键在于布尔值的使用来解决此题，cond ? '男' : '女'是一个3元表达式，当按钮
     	男性被点击后，show_man函数被调用， 函数体 cond.value = true，给cond赋值为true
     	使得cond ? '男' : '女'; 返回值为"男"，并赋值给v， return v 接收了 v的值，所以
     	return v === x.gender 此时相当于 '男' === x.gender
     	所以{let v=cond ? '男' : '女'; return v === x.gender} 即为 x.gender === "男"
     	此时你应该反应过来 这就是纯纯的filter筛选 。。。。 arr.filter(x => x.gender === "男" ）
     	此时就把性别为男的输出，因此点击女性按钮同理 */
  <li v-for="i in arr.filter(x => {let v=cond ? '男' : '女'; return v === x.gender})">
 	 name:{{ i.name }}
	 gender:{{ i.gender }}
  </li>
</ul>
</template>

<script setup>
import { ref } from "vue";
    const arr = ref([
  {name : 'q', age : 12, score : 22, id :  1, gender : '男'},
  {name : 'w', age : 12, score : 22, id :  2, gender : '男'},
  {name : 'e', age : 15, score : 22, id :  3, gender : '女'},
  {name : 'r', age : 12, score : 22, id :  4, gender : '女'},
  {name : 't', age : 16, score : 22, id :  5, gender : '男'},
  {name : 'y', age : 12, score : 22, id :  6, gender : '女'},
  {name : 'u', age : 18, score : 22, id :  7, gender : '男'},
  {name : 'i', age : 12, score : 22, id :  8, gender : '女'},
  {name : 'o', age : 19, score : 22, id :  9, gender : '男'},
  {name : 'p', age : 12, score : 22, id :  10, gender : '男'}
])
const cond = ref()

const show_man = () =>{
  cond.value = true
}
const show_woman = () =>{
  cond.value = false
}
    
</script>
  1. v-if v-else 的方法来写
html 复制代码 
<template>
<button @click=nan>男性</button>
  <button @click=nv>女性</button>
  <div>
      /* 核心思想就是用的，布尔值flase和true, xb 在script标签下由const xb = ref()定义为flase */
      /* 当用户点击男性按钮，名为nan的函数被调用，xb被函数体  xb.value=true赋值为true，在v-if中继续执行
         arr1.filter(x => x.gender==='男') 筛选并返回一个只有男性的数组*/
      /* 当用户点击女性，nv函数执行，xb为flase，直接跳过v-if执行v-else，然后同理赛选 */
   <ul v-if="xb">
    <li v-for="xs in arr1.filter(x => x.gender==='男')">
      <span>{{ xs.name }}</span>
      <span>{{ xs.age }}</span>
      <span>{{ xs.gender }}</span>
    </li>
  </ul>
     
   <ul v-else>
    <li v-for="xs in arr1.filter(x => x.gender==='女')">
      <span>{{ xs.name }}</span>
      <span>{{ xs.age }}</span>
      <span>{{ xs.gender }}</span>
    </li>
  </ul>
</div>
</template>template>
<script setup>
import { ref } from "vue";
    const xb = ref()
const arr1 =reactive([
  {id:1,name:"zs",age:17,gender:'男'},
  {id:2,name:"ls",age:27,gender:'女'},
  {id:3,name:"ww",age:15,gender:'男'},
  {id:4,name:"zl",age:23,gender:'男'},
  {id:5,name:"zss",age:22,gender:'女'},
  {id:6,name:"lss",age:19,gender:'男'},
  {id:7,name:"www",age:17,gender:'男'},
  {id:8,name:"zll",age:18,gender:'女'},
  {id:9,name:"abc",age:14,gender:'男'}
])
const nan = () =>{
  xb.value=true
}
const nv = () =>{
  xb.value=false
}
</script>

  1. 完成下面按钮的功能，点击按钮，计数器会自增和自减和归零

    html 复制代码 
    <template>
 <div>
     /* 首先3个功能定义3个函数 */
  <button  @click="jia">自增</button>
  <button  @click="jian">自增</button> 
  <button  @click="guiling">自增</button>
 </div>
<div>
  <h5>计数器的值是 {{countValue}}
      <span>{{ sum }}</span></h5>
</div>
</template>
<script setup>
import { ref } from "vue";
  /* 用于实现自增、自减，归零的按钮的效果函数 */
  const sum = ref(0) 			/* 定义了初始值为0 */
  const jia =()=>{
    sum.value=sum.value+1       /* 执行一次sum值先加一，然后覆盖原来的sum值 */
    }
  const jian =()=>{
    sum.value=sum.value-1		/* 执行一次sum值先减一，然后覆盖原来的sum值 */
    }
  const guiling =()=>{
    sum.value=0					/* 相当于恢复初始值 */
    }
</script>

完整网页vue代码

html 复制代码 
<template>
  <h1>测试</h1>
    <section>
          <h2>第一部分:基本知识</h2>

          <ul>
                <li>
                      <h4>第1题:请简述Vue、Node.js、Vscode是什么，以及有什么关系</h4>
                      <p>答:
        <div>1. vue是一个轻量级、比较灵活的且支持组件开发的网络框架</div>
                      <div>2. node.js是让JavaScript运行在服务器上的一直环境</div>
                      <div>3. Vscode是一款有着丰富插件的代码编辑器</div>
                      <div>4. 关系是，vscode是画板，node.js是颜料，vue是画画的内容</div>
                      </p>

                 
      </li>

                <li>
                      <h4>第2题: 请简述Vue中什么是指令，以什么开头，列举至少8个vue指令</h4>
                      <p>答
                           
        <div>1. 用于实现某种效果和逻辑的代码叫指令</div>
                          <div>2. 以v-为开头</div>
                          <div>
          v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is
        </div>
                      </p>  
                 
      </li>

                <li>
                      <h4>第3题: 请简述Vue中template、script和style标签的作用</h4>

                      <p>答
                           
        <div>1. template是用于写网页的</div>
                          <div>2. script是用于写逻辑</div>
                          <div>3. style写网络样式，美化网页</div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第3.5题: 请修改代码，让下面p标签的代码中展示一段html标签，能在浏览器中显示html标签</h4>
                      <p v-text="message"></p>
                  </li>

                <li>
                      <h4> 第4题: 请简述Vue中的响应式数据绑定,以及如何定义响应式数据</h4>

                      <p>答
                           
        <div>1. 在vue3的基础上，通过ref标签包裹</div>
                          <div>2. eg。import{ref} from 'vue'  const text = ref()</div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第5题: 请简述Vue中的双向数据绑定，以及使用哪个命令进行双向绑定</h4>

                      <p>答
                           
        <div>1. 当script标签下的变量发生改变，template标签下的变量会发生对应的改变，因为template标签下一般用来写网页结构，所以当网页上通过一些操作改变变量值后，script 标签内的变量值夜会发生改变
        </div>
                          <div>2. v-model</div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第6题: 使用哪个命令给标签中的属性绑定变量，这个命令的缩写是什么</h4>

                      <p>答
                           
        <div>1. v-bind</div>
                          <div>2. 缩写是 ：号</div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第7题: 使用哪个命令给标签中的事件绑定变量,这个命令的缩写是什么</h4>

                      <p>答
                           
        <div>1.v-on </div>
                          <div>2. @</div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第8题:使用哪个命令，来进行循环</h4>

                      <p>答
                           
        <div>1. v-for</div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第9题,使用哪个命令来进行数据的双向绑定</h4>

                      <p>答
                           
        <div>1. v-model</div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第10题: javascript中如何定义变量,如何定义常量</h4>

                      <p>答
                           
        <div>1. 变量 var / let来定义</div>
                          <div>2. 常量 const </div>
                      </p>
                 
      </li>

                <li>
                      <h4> 第11题: javascript中如何定义函数，用两种方式，定义两个函数</h4>

                     
        <pre>
                    <code>  将答案写在下面:       
                        1.  函数名 = (参数) =>{
                            函数体
                        } 
  
                        2. function 函数名(参数){
                            函数体
                        }
                    </code>
                </pre>
                 
      </li>


                <li>
                      <h4> 第12题: 请写出从头开始，创建vue项目的命令步骤，以及如何运行</h4>

                     
        <pre>
                    <code>  将答案写在下面:  
                        <div>1. cd Desktop</div>      
                        <div>2. mkdir vue3</div> 
                        <div>3. 取项目名、选vue、选JavaScript</div>
                        <div>4. code .打开项目文件</div>
                        <div>5. npm install 拉取环境依赖</div>
                        <div>所有的前提是已经下载node.js</div>
                    </code>
                </pre>
                 
      </li>

                <li>
                      <h4> 第12.5题:
          假设你helloworld.vue文件位于/users/project/myproject/vite-project/vue3/example/src/components目录下，请问应该在哪个目录执行npm run
          dev命令？这个目录里面必须包含哪个文件？</h4>

                     
        <pre>
                    <code>  将答案写在下面:    
                        cd /users/project/myproject/vite-project/vue3/example下   必须要有package.json这个文件，因为这个文件中存放着，运行项目所需的依赖环境。
                    </code>
                </pre>
                 
      </li>

            </ul>
      </section>
  
          <h2>第二部分：实战练习</h2>



                <li>
                      <h4>第1题: 使用函数关键字的形式，定义一个函数，这个函数接收两个参数，返回两个数的和</h4>

                     
        <pre>
                    <code>  将答案写在下面:      
                        function sum(a,b){
                            return a + b
                                 }  
                    </code>
                </pre>
                 
      </li>



                <li>
                      <h4>第2题: 使用箭头函数的形式，定义一个函数，这个函数接收两个数值参数，使用三元表达式，返回两个数中更大的那一个</h4>

                     
        <pre>
                    <code>  将答案写在下面: 
                        const return_big = (1, 3) =>{
                                1 > 3 ? 1 : 3
                        }        
                    </code>
                </pre>
                 
      </li>


                <li>
                      <h4>第3题: 用js语法定义一个对象info，其中有name,age,score,id,gender五个字段，其中gender代表性别，只能为 男或者 女，
                            age为数字，范围在10-30之间，name为字符串，score为分数，范围在1-100之间</h4>

                     
        <pre>
                    <code>  将答案写在下面: 
                           const info = {
                            name : 'ok', age : 12, score : 22, id :  1, gender : '男'
                           }
  
                    </code>
                </pre>
                 
      </li>


                <li>
                      <h4>第4题: 请在script标签中，定义一个响应式数组，命名为arr，包含10个对象，每个对象是上题中的info的格式，但是内容不一样，尤其是id不能重复</h4>

                     
        <pre>
                    <code>将答案写在script标签中:     
                        <div v-text="img1"></div>
                    </code>
                </pre>
                 
      </li>
             <li>
                <h4>第5题: 完成下面按钮的功能，点击开关按钮，页面上以列表的形式显示上一题中定义的数组arr中的信息，再次点击，不显示内容 </h4>
  
                <button @click="show">开关按钮</button>
  
                <div>
                    <h5>展示在这个标题下面</h5>
                    <ul>
                  
                      
                    <div v-if="imgs" v-for="i in arr" >name:{{ i.name}} age:{{ i.age }} gender:{{ i.gender }}</div>
            
                </ul>
                </div>
  
            </li>
                <h4>第6题: 完成下面按钮的功能，点击'男性'按钮，展示gender等于男性的信息，点击'女'性按钮，展示女性的信息 </h4>
                <div>
  
                      <button @click="show_man">男性</button>
                      <button @click="show_woman">女性</button>

  
                </div>
  
  
                <div>
                    <h5>展示在这个标题下面</h5>
                    <ul>
                      <li v-for="i in arr.filter(x => {let v=cond ? '男' : '女'; return v === x.gender})">
                            name:{{ i.name }}
                            gender:{{ i.gender }}
                      </li>
                    </ul>
                </div>
  
           


  <button @click=nan>男性</button>
  <button @click=nv>女性</button>
  <div>
   <ul v-if="xb">
    <li v-for="xs in arr1.filter(x => x.gender==='男')">
      <span>{{ xs.name }}</span>
      <span>{{ xs.age }}</span>
      <span>{{ xs.gender }}</span>
    </li>
  </ul>
   <ul v-else>
    <li v-for="xs in arr1.filter(x => x.gender==='女')">
      <span>{{ xs.name }}</span>
      <span>{{ xs.age }}</span>
      <span>{{ xs.gender }}</span>
    </li>
  </ul>
</div>
  <div>
  <li>
                <h4>第7题: 完成下面按钮的功能，点击按钮，计数器会自增和自减和归零</h4>
  
                <div>
  
                    <button  @click="jia">自增</button>
                    <button  @click="jian">自增</button> 
                    <button  @click="guiling">自增</button>
  
                </div>
  
                <div>
                    <h5>计数器的值是 {{countValue}}
                        <span>{{ sum }}</span></h5>
                </div>
  
            </li>

</div>

</template>
<script setup>

import { ref ,reactive } from "vue";

/* 用于实现点击显示，再点击隐藏的效果 */
const imgs = ref()  /* 定义了一个响应式imgs变量，用于实现隐藏效果 */
  const show = () =>{
    imgs.value = ! imgs.value
  }
  
const arr = ref([
  {name : 'q', age : 12, score : 22, id :  1, gender : '男'},
  {name : 'w', age : 12, score : 22, id :  2, gender : '男'},
  {name : 'e', age : 15, score : 22, id :  3, gender : '女'},
  {name : 'r', age : 12, score : 22, id :  4, gender : '女'},
  {name : 't', age : 16, score : 22, id :  5, gender : '男'},
  {name : 'y', age : 12, score : 22, id :  6, gender : '女'},
  {name : 'u', age : 18, score : 22, id :  7, gender : '男'},
  {name : 'i', age : 12, score : 22, id :  8, gender : '女'},
  {name : 'o', age : 19, score : 22, id :  9, gender : '男'},
  {name : 'p', age : 12, score : 22, id :  10, gender : '男'}
])

const cond = ref()

const show_man = () =>{
  cond.value = true
}
const show_woman = () =>{
  cond.value = false
}


const xb = ref()
const arr1 =reactive([
  {id:1,name:"zs",age:17,gender:'男'},
  {id:2,name:"ls",age:27,gender:'女'},
  {id:3,name:"ww",age:15,gender:'男'},
  {id:4,name:"zl",age:23,gender:'男'},
  {id:5,name:"zss",age:22,gender:'女'},
  {id:6,name:"lss",age:19,gender:'男'},
  {id:7,name:"www",age:17,gender:'男'},
  {id:8,name:"zll",age:18,gender:'女'},
  {id:9,name:"abc",age:14,gender:'男'}
])
const nan = () =>{
  xb.value=true
}
const nv = () =>{
  xb.value=false
}

  /* 用于实现自增、自减，归零的按钮的效果函数 */
  const sum = ref(0)
  const jia =()=>{
    sum.value=sum.value+1
    }
  const jian =()=>{
    sum.value=sum.value-1
    }
  const guiling =()=>{
    sum.value=0
    }
  




</script>

<style>

button{
    background-color: lightblue;
    margin:5px;
}

</style>
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车，浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中，ref 和 reactive的区别
前端·javascript·vue.js
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心，方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
Natural_yz5 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王5 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity
Natural_yz5 小时前
大数据学习10之Hive高级
大数据·hive·学习
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定