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

阶段性测试

• 理论题
• 实践题

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>
   

2. 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>

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

   <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 rundev命令？这个目录里面必须包含哪个文件？</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>