Vue3知识总结-1

前面学习一段时间的前端，但是没有进行过太多的练习，并且对于里面一些重要的知识点也没有去着重的记忆，所以打算在学习Vue3的时候，做一些笔记，方便后面翻看。这个笔记会对于学习一些做一些，而不是一个整体的部分，整个学习过程也都是跟着视频来做的。

为什么选择Vue

Vue是什么

渐进式的JS框架，易用易学，性能出色，使用场景丰富

为什么学习

  1. 最火的

  2. 企业中要求

  3. 可以提升开发体验

  4. ……

Vue简介

提供了一套声明式，组件化的编程模型

渐进式框架

Vue是一个框架也是生态，覆盖了很多前端开发请求。Vue设计非常注重灵活性和“可以被逐步集成”这个特点。可以用不同的方式使用Vue：

  • 无需构建，渐进式增强静态的HTML

  • 任何页面作为Web Components嵌入

  • 单页应用SPA

  • 全栈/服务端渲染（SSR）

  • 开发桌面端等

Vue版本

目前，开发中有2和3，老项目一般是Vue2，新项目是Vue3

Vue API风格

有两种书写风格：选项API和组合式API

选项式API

 

<script>
export default {data(){return {count: 0}},methods:{increment() {this.count += 1;}},mounted() {console.log(`选项式AIP: The initial count is &{this.count}.`)}
}
</script>
<template><button @click="increment">选项式AIP: Count is : {{count}}</button>/
</template>
 

 

组合式API
 

 

 
<script setup >
import {ref, onMounted} from 'vue'
const count = ref(0)
function increment(){count.value++
}
onMounted(() =>{console.log(`组合式AIP: The initial count is &{this.count}.`)
})
</script><template><button @click="increment">组合式API:Count is : {{count}}</button>/
</template>
 
 

 

Vue开发前准备
 

首先需要安装Node.js,然后配置一下就好了。
 

下面的是运行整个项目
 

 npm init vue@latest  创建项目npm install / cnpm install 安装依赖目录文件夹npm run dev   运行整个项目
 

Vue项目目录结构
 

模版语法
 

文本差值
 

最基本的数据绑定形式是文本差值，使用的是“Mustache”语法（及大括号）
 

 

<template><h3> 模版语法</h3><p>{{msg}}</p>
</template><script>
export default {data(){return{msg:"神奇的语法"}}
}
</script>
 

使用js表达式
 

每个绑定仅仅支持单一表达式，也就是一段能够被求值的代码，
 

 

<template><h3> 模版语法</h3><p>{{msg}}</p><p>{{number + 1}}</p><p>{{ok}}</p><p>{{ok ? 'yes': 'no'}}</p><p>{{msg.split("").reverse().join()}}</p><!--  <p>{{var a = 1}}/p>--><!--  <p>{{if (number > 10) {return 0}}}</p>/-->
</template><script>
export default {data(){return{msg:"神奇的语法",number: 122,ok:true,}}
}
</script>
 

原始HTML
 

双大括号将会将数据差值为纯文本，而不是HTML，如果想插入HTML，需要使用v-html指令
 

 

<template><p v-html="rawHtml"></p>
</template><script>
export default {data(){return{rawHtml:"<a href='www.baidu.com'>百度</a>"}}
}
</script>
 

 

属性绑定
 

 


<template><div v-bind:id="msg" v-bind:class="dynamicClass" >测试</div>
</template><script>
export default {data(){return{msg:"active",dynamicClass: "appclass",}}
}</script>
<style>
.appclass{color:red;font-weight: bold;font_size: 30px;
}
</style>
 

v-bind指令标识Vue将元素id attribute与dynamicId组件属性保持一致，如果绑定的值是null或者undefind，那么该attribute将会从渲染的元素上移除
 

简写
 

<div :id="msg" :class="dynamicClass" >测试</div>
 

布尔值Attribute
 

根据true/false来决定attribute是否存在于该元素上，disabled是常见的
 

动态绑定多个值
 


<template><button :disabled="isButtonDisabled">Button</button><div v-bind="objectOfAttrs">测试问题呢</div>
</template><script>
export default {data(){return{dynamicClass: "appclass",isButtonDisabled:false,objectOfAttrs:{class: "appclass",dynamilId: "appid",}}}
}</script>
<style>
.appclass{color:red;font-weight: bold;font_size: 30px;
}
</style>
 

条件渲染
 

类似于条件语句
 

V-if 用于条件性的渲染，为真的时候就渲染，假的时候不渲染
 

V-else 可以设计为多个分块
 

V-show 按照条件显示一个元素的指令
 

下面是上面这些指令的一些代码示例：
 

<template><h3>条件渲染</h3><div v-if="flag"> 你们看见我不</div><div v-else> 你还是看看我吧</div><div v-if="type ==='A'">A</div><div v-else-if="type ==='B'">B</div><div v-else-if="type ==='C'">C</div><div v-else>Not a/b/c</div><div v-show="flag">Not a/b/c</div>
</template>
<script>export default {data(){return {flag:true,type: "D",}}}
</script>
 

 

v-if 和v-show
 

v-if 和 v-show 是 Vue.js 中常用的两个指令，用于条件性地显示或隐藏元素，但它们有一些不同之处。
 

  1.  
    v-if：
     
    1.  
      v-if 是一种条件渲染指令，用于根据表达式的真假条件来决定是否渲染 DOM 元素。
       
    2.  
      如果条件为真，元素将被渲染到 DOM 中；如果条件为假，元素将从 DOM 中移除。
       
    3.  
      当条件为假时，Vue.js 不会渲染或管理该元素及其子元素，因此对性能有一定的提升。
       
 

示例：
 

<div v-if="isVisible"This will only be rendered if isVisible is true</div>
 

  1.  
    v-show：
     
    1.  
      v-show 也用于根据条件显示或隐藏元素，但与 v-if 不同，它只是简单地切换 CSS 的 display 属性，而不是添加或移除元素。
       
    2.  
      元素始终被渲染到 DOM 中，只是通过 CSS 控制其显示或隐藏。
       
    3.  
      当条件为假时，元素的样式为 display: none;，因此元素仍然存在于 DOM 中，可能会对性能产生一定的影响。
       
 

示例：
 

<div v-show="isVisible"This will be rendered but may not be visible</div>

 

 

选择使用 v-if 还是 v-show 取决于你的具体需求：
 

  •  
    如果你希望在条件为假时从 DOM 中完全移除元素，可以使用 v-if。
     
  •  
    如果你希望保留元素的 DOM 结构并且只是简单地控制其显示或隐藏状态，可以使用 v-show。
     
 

列表渲染
 

使用v-for指令去渲染一个数组渲染一个列表，需要使用item in items这样的特殊语法
 

<template><h3>列表渲染</h3><p v-for="item in names">{{ item }}</p>
</template>
<script>export default {data(){return{names:["实验室","大学","小学"]}}}
</script>
 

 

复杂数据
 

大多数情况下，渲染的都是网络请求，json格式
 

<template><h3>列表渲染</h3><p v-for="item in result"><p>{{item.title}}</p>
<!--   / <img src="item.avator">--></p>
</template>
<script>export default {data() {return {result: [{"id": 123,"title": "中药","avator": "http://^",},{"id": 124,"title": "西药","avator": "http://^",},{"id": 125,"title": "中西药","avator": "http://^",},]}}}
</script>
 

 

V-for 可以有数组的下标，并且可以使用of来代替in
 

<p v-for="(item, index) in names">{{ item}}-{{index}}</p>
 

V-for与 对象
 

可以用来遍历对象
 

<template><h3>列表渲染</h3><p v-for="(value, key, index) of user">{{index}}-{{key}}-{{value}}</p>
</template>
<script>export default {data() {return{user:{name: "123",age: 13,}}}}
</script>
 












本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/687836.html


如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！












相关文章










【Linux网络编程】I/O多路转接之select








【Linux网络编程】I/O多路转接之select




select 1.初识select2.了解select基本概念和接口介绍3.select服务器4.select特点及优缺点总结 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603;…




阅读更多...

















阿里云ECS服务器实例挂载数据盘步骤（磁盘自动挂载.、访问挂载点）








阿里云ECS服务器实例挂载数据盘步骤（磁盘自动挂载.、访问挂载点）




阿里云ECS服务器实例挂载数据盘步骤 
1.磁盘自动挂载 首先登录阿里云ECS服务器&#xff0c;通过 df -h 命令查看当前磁盘挂载情况   通过 fdisk -l 命令查看磁盘情况&#xff0c;可以发现有两个盘&#xff1a; 系统盘 /dev/vda: 60GB&#xff0c; 数据盘 /dev/vdb: 500GB   使用…




阅读更多...

















MybatisPlus笔记








MybatisPlus笔记




MybatisPlus使用步骤 
引入MybatisPlus依赖&#xff0c;包含了Mybatis依赖定义Mapper 继承BaseMapper 
MybatisPlus常见注解 
TableName 指定表名
TableId 指定表中主键信息
TableFieldId 用来指定表中的普通字段




阅读更多...

















流量分析（一)








流量分析（一)




数据库类流量分析 MySQL流量 
常规操作&#xff0c;查找flag ctfhub{} 注意要选择字符集 Redis流量 
查找ctfhub结果没找到 尝试把其变成十六进制继续进行查找 看到了前半段flag 接着往下看 找到了后半段的flag MongoDB流量 
还是一样查找ctfhub 字符串没找到 转成十六进制也没…




阅读更多...

















linux phpstudy 重启命令








linux phpstudy 重启命令




[rootLinuxWeb phpstudy]# ./system/phpstudyctl restart 
查看命令 
1) phpstudy -start             启动小皮面板 2) phpstudy -stop              停止小皮面板 3) phpstudy -restart           重启小皮面板 4) phpstudy -status            查询面板状态 5) phpstudy -in…




阅读更多...

















uboot 顶层 Makefile 逐行分析








uboot 顶层 Makefile 逐行分析




uboot顶层Makefile分析1.png 提取码: w56a uboot顶层Makefile分析2.png 提取码: ge29




阅读更多...

















VS code更换插件位置








VS code更换插件位置








阅读更多...

















Jenkins流水线部署Maven项目








Jenkins流水线部署Maven项目




使用Jenkins的流水线功能&#xff0c;构建部署Java Maven项目&#xff0c;步骤很简单但是不少细节需要注意。 一、安装 
Jenkins的安装步骤和流程就不具体描述&#xff0c;这里主要介绍一下安装时要注意的几个问题。 
1、Jenkins尽量安装最新的几个版本&#xff0c;否则安装完成…




阅读更多...

















Human β-NGF ELISA试剂盒








Human β-NGF ELISA试剂盒




走近β-NGF                     
神经生长因子(nerve growth factor, NGF)最初从小鼠颌下腺中以7S复合体的形式分离而得&#xff0c;复合体由三个非共价连接的亚基α,β和γ组成。 NGF的α和β亚基均属于丝氨酸蛋白酶组织激肽释放酶家族成员&#xff0c;β亚基也称为β-NGF或2…




阅读更多...

















如何判断自己是不是分裂型人格障碍？








如何判断自己是不是分裂型人格障碍？




什么是分裂型人格障碍&#xff1f; 
分裂型人格障碍&#xff0c;主要体现在思维&#xff0c;情感和行为三个方面。通常是性格内向且孤僻、社交退缩&#xff0c;疏远人群&#xff0c;在情感上较为冷漠&#xff0c;没有亲密关系&#xff0c;难以建立友情&#xff0c;在思想上倾向…




阅读更多...

















ExcelVBA取序号与合计之间的数据








ExcelVBA取序号与合计之间的数据




今天有人提出这样一个问题&#xff0c; ExcelVBA取序号与合计之间的数据 数据如下: 分析一下&#xff0c;问题关键&#xff1a; 问题&#xff1a;1.我要在“序号”两字后面开始取数&#xff0c;因为序号是合并的&#xff0c;所以。。。2.我要取合计前面的数据&#xff0c;所以要…




阅读更多...

















05_SpringCloud








05_SpringCloud




文章目录 SpringCloud服务调用的负载均衡Ribbon负载均衡 面向接口的服务调用OpenFeign 客户端FeignClient日志输出服务调用的超时设置 配置中心Nacos配置中心Nacos配置中心的使用Nacos配置的持久化 SpringCloud 服务调用的负载均衡 
问题引出 // 服务发现List<ServiceInstan…




阅读更多...


















推荐文章












最新文章


















Copyright @ 2022~2023