vue阶段复习

理论练习

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

  1.vue是一个轻量级、比较灵活的且支持组件开发的网络框架

  2.node.js是让JavaScript运行在服务器上的一种环境

  3.Vscode是一款有着丰富插件的代码编辑器

  4.vscode就如同画布，node.js是颜料，vue是构图的内容

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

  v-text、v-html、v-show、v-if、v-else、v-for、v-bind、v-model

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

  1.template是用于写网页的

  2.script是用来实现逻辑的

  3.style是写网页样式，美化网页

• 请写一段代码，要求在网页上可看到网页标签

  <template>
  <p v-text="message"></p>
  </template><script>
  const message = '<span>咬定青山不放松， 立根原在破岩中</span>'
  </script>
  

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

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

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

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

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

   cd /users/project/myproject下   必须要有vite-project这个文件
  

实战练习

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

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

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

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

• 通过点击按钮实现，展示不同信息，点击男显示男生信息，点击女展示女生信息

<template>
<div>
<button @click="show_man">男性</button>
<button @click="show_woman">女性</button>
<div  v-if="type1 ==='A'" >{{ man }} </div>
<div  v-if="type1 ==='B'" > {{woman}}</div>
</div>
</template><script setup>
const man = ref('男性的信息')
const woman = ref('女性的信息')
const show_man = ()=>{type1.value = 'A'man.value = '我是男生'
}
const show_woman = () =>{type1.value = 'B'woman.value = '我是女生'
}
</script>

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

<template>
<div>
<h5>计数器的值是<span>{{ sumjia }}</span></h5>
</div>
</template><script setup>
const jia = ref(0)
const jia =()=>{sumjia.value=sumjia.value+1}
const jian =()=>{sumjia.value=sumjia.value-1}
const guiling =()=>{sumjia.value=0}
</script>