vue阶段复习基础知识以及简单的按钮绑定相关的知识!

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>

相关推荐

  1. vue基础知识

    2024-06-11 14:10:05       16 阅读
  2. VUE相关知识锦集

    2024-06-11 14:10:05       11 阅读
  3. vue相关前端知识回顾

    2024-06-11 14:10:05       1 阅读
  4. Vue双向数据原理

    2024-06-11 14:10:05       42 阅读

最近更新

  1. 数据分离(C++)

    2024-06-11 14:10:05       0 阅读
  2. Jira系统基本介绍

    2024-06-11 14:10:05       0 阅读
  3. 深入解析Spring Cloud:微服务架构的利器(下)

    2024-06-11 14:10:05       0 阅读
  4. Adam优化算法

    2024-06-11 14:10:05       0 阅读
  5. K-MEANS 算法的简单实现

    2024-06-11 14:10:05       0 阅读
  6. String结构体测试代码(一)

    2024-06-11 14:10:05       0 阅读

热门阅读

  1. 什么是用户画像

    2024-06-11 14:10:05       4 阅读
  2. @Validated 前端表单数据校验

    2024-06-11 14:10:05       5 阅读
  3. Web API前端:深度挖掘与未来趋势

    2024-06-11 14:10:05       4 阅读
  4. web前端的实习记录:探索、挑战与成长

    2024-06-11 14:10:05       6 阅读
  5. Linux软件安装以及网络请求和下载

    2024-06-11 14:10:05       4 阅读
  6. Django按照文章ID删除文章

    2024-06-11 14:10:05       7 阅读
  7. DML语句

    2024-06-11 14:10:05       6 阅读
  8. CPASSOC代码详解

    2024-06-11 14:10:05       5 阅读
  9. nltk下载报错

    2024-06-11 14:10:05       6 阅读
  10. 拼多多销量清零吗?销量排行榜哪里看?

    2024-06-11 14:10:05       3 阅读