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

admin2024-05-15  1

阶段性测试

  • 理论题
  • 实践题

1)理论题

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

    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标签

    <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不能重复

    <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中的信息,再次点击,不显示内容

    <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. 三元符的方法
    <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 的方法来写
<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. 完成下面按钮的功能,点击按钮,计数器会自增和自减和归零

    <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代码

<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>
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!