安阳做网站推广最好的公司如何做好营销
阶段性测试
- 理论题
- 实践题
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 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>