阶段性测试
- 理论题
- 实践题
1）理论题
-
请简述Vue、Node.js、Vscode是什么，以及有什么关系
1. vue是一个轻量级、比较灵活的且支持组件开发的网络框架 2. node.js是让JavaScript运行在服务器上的一直环境 3. Vscode是一款有着丰富插件的代码编辑器 4. 关系是，vscode是画板，node.js是颜料，vue是画画的内容 -
请简述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 -
请简述Vue中template、script和style标签的作用
1. template是用于写网页的 2. script是用于写逻辑 3. style写网络样式，美化网页 -
请修改代码，让下面p标签的代码中展示一段html标签，能在浏览器中显示html标签
<template> <p v-text="message"></p> /* v-text用于原样输出html标签 */ </template> <script setup> import { ref } from "vue"; const message = `<span>咬定青山不放松， 立根原在破岩中</span>` </script> -
请简述Vue中的双向数据绑定，以及使用哪个命令进行双向绑定
1. 当script标签下的变量发生改变，template标签下的变量会发生对应的改变，因为template标签下一般用来写网页结构，所以当网页上通过一些操作改变变量值后，script 标签内的变量值夜会发生改变 2. v-model -
使用哪个命令给标签中的属性绑定变量，这个命令的缩写是什么
1. v-bind 2. 缩写是 ：号 -
使用哪个命令给标签中的事件绑定变量,这个命令的缩写是什么
1.v-on 2. @ -
使用哪个命令，来进行循环
1. v-for -
使用哪个命令来进行数据的双向绑定
1. v-model -
javascript中如何定义变量,如何定义常量
1. 变量 var / let来定义 2. 常量 const -
javascript中如何定义函数，用两种方式，定义两个函数
1. 函数名 = (参数) =>{ 函数体 } 2. function 函数名(参数){ 函数体 } -
请写出从头开始，创建vue项目的命令步骤，以及如何运行
1. cd Desktop 2. mkdir vue3 3. npm create vite 4. 取项目名、选vue、选JavaScript 5. code .打开项目文件 6. npm install 拉取环境依赖 所有的前提是已经下载node.js -
假设你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）实战练习
-
使用函数关键字的形式，定义一个函数，这个函数接收两个参数，返回两个数的和
function sum(a,b){ return a + b } -
使用箭头函数的形式，定义一个函数，这个函数接收两个数值参数，使用三元表达式，返回两个数中更大的那一个
const return_big = (1, 3) =>{ 1 > 3 ? 1 : 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 : '男' } -
请在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> -
完成下面按钮的功能，点击开关按钮，页面上以列表的形式显示上一题中定义的数组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> -
完成下面按钮的功能，点击‘男性’按钮，展示gender等于男性的信息，点击’女’性按钮，展示女性的信息
- 三元符的方法
<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>
- 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>
-
完成下面按钮的功能，点击按钮，计数器会自增和自减和归零
<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>
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
