我们做网站 出教材 办育心经,中国建设银行网站类型,业务网站在线生成,网站建设使用工具前言
如果你 知道Vue3并且对Vue3的语法有一定了解#xff0c;请跳过这一章#xff0c;由于后续项目主要是基于Vue3TypeScript#xff0c;因此提前简单概述一些Vue3的基础语法~
本文的目的是 期望通过对本文的阅读后能对Vue3的每个语法有一个简单的印象#xff0c;至少要知…前言
如果你 知道Vue3并且对Vue3的语法有一定了解请跳过这一章由于后续项目主要是基于Vue3TypeScript因此提前简单概述一些Vue3的基础语法~
本文的目的是 期望通过对本文的阅读后能对Vue3的每个语法有一个简单的印象至少要知道文中常见语法的作用是什么算是进行比较初级的扫盲吧
概述
阅读时间约710分钟
本文重点
通过本文你可以知道一些Vue3中的基本语法与结构大致知道一下常见语法的作用是什么
正文
看一个例子吧我们通过示例代码进行说明例子如下
templateview classapp-containeru-skeleton :rows3 :titlefalse loading //view
/templatescript langts setup
import { ref, type Ref } from vue;
const swiperList1 ref([https://cdn.uviewui.com/uview/swiper/swiper1.png,https://cdn.uviewui.com/uview/swiper/swiper2.png,https://cdn.uviewui.com/uview/swiper/swiper3.png,
]);const loading ref(false);function refresh() {loading.value true;setTimeout(() {loading.value false;}, 1000);
}
/scriptstyle scoped langscss
.app-container {position: absolute;top: 0;right: 0;bottom: 0;left: 0;
}
/style
这段代码是一个简单的uniapp中的某个页面从整体结构上看看代码可以分成三部分分别是由templatescriptstyle三块组成PS这三块可以约等于视同前端领域中的HTMLJavascriptCSS template
template类似于传统前端中的html部分它主要的作用是制作页面的骨架、结构
思考一个场景当我们前端拿到一张设计稿后首先应该做什么肯定是先思考页面的整体结构比如整体是上下结构还是左右结构只有结构上思考完善了才考虑接下来的部分否则一旦存在没有考虑到的情况当某个功能点出现html结构不支持的时候那问题就大了...
静态显示
什么是静态显示在开发中存在少部分页面是纯静态展示页面的这部分页面不需要与后台交互这类写法比较简单直接写就是了
templateview classapp-containerview classapp-title这是本页面的标题/viewview classapp-content这是本页面的内容/view/view
/template
很简单直接写不需要其他配置
动态显示
和静态显示对应动态显示是绝大多数页面上的显示方式比如用户名显示这个取决于登录用户是哪一个
动态显示需要和script结合使用在script存储变量名字然后将变量嵌入到template里进而变量的值是什么页面上则显示什么
双花括号
嵌入的核心语法双花括号 语法它的作用就是将变量嵌入到template中如下
templateview classapp-containerview classapp-title这是本页面的标题/viewview classapp-content{{ text }}/view/view
/templatescript langts setup
const text这是本页面的内容
/script
此时显示在页面上的text的区域文字是这是本页面的内容
v-if条件渲染
除了正常的显示外有这么一种情况有时候需要对显示的内容进行一个判断如果有值显示内容如果没有值则显示“暂无内容”这种v-if就起到作用了
它书写的位置在template里的标签上如下
templateview classapp-containerview v-ifswiperList1.length2{{ text }}/viewview v-else-ifswiperList1.length1{{ text }}/viewview v-else无显示内容/view/view
/templatescript langts setup
import { ref } from vue;const text这是本页面的内容
const swiperList1 ref([https://cdn.uviewui.com/uview/swiper/swiper1.png,https://cdn.uviewui.com/uview/swiper/swiper2.png,https://cdn.uviewui.com/uview/swiper/swiper3.png,
]);
/script这里出现了关于v-if的一套用法一共三个分别是v-ifv-else-ifv-else含义也很好理解哪个后面的条件符合就显示那个内容如果都不满足则显示v-else里面的
v-for列表渲染
除了条件渲染还有这么种场景页面上需要重复显示一列内容如新闻列表对于这种我们可以使用v-for进行重复显示
templateview classapp-containerview classapp-title这是本页面的标题/viewview v-foritem in newsList :keyitem.id{{ item.title }}/view/view
/templatescript langts setup
import { ref, type Ref } from vue;const newsList ref([{title: 新闻标题1,id: 1,},{title: 新闻标题2,id: 2,},{title: 新闻标题3,id: 3,},
]);/script
这样就可以快速显示三条信息
script
script类似于传统前端中的Javascript部分它的主要作用是进行逻辑处理如动态获取页面内容
ref
ref作用是 将变量的值定义为实时可变的以上方双花括号为例
templateview classapp-containerview classapp-content{{ text }}/viewview classapp-content{{ text1 }}/view/view
/templatescript langts setupimport { ref } from vue;const text这是本页面的内容;const text1ref(这是本页面的内容);
/script
这两个最大的区别是text1显示的内容会随着其值的变化而变化text则是不会举个场景例子吧
我们页面上显示的内容往往是通过api从后端获取的通过ref定义的值显示在页面上时它能随时动态改变比如
templateview classapp-containerview classapp-content{{ text }}/viewview classapp-content{{ text1 }}/view/view
/templatescript langts setupimport { ref } from vue;let text这是本页面的内容;const text1ref(这是本页面的内容);setTimeout((){// 修改值必须修改其value值不能直接text1xxxxtext1.value修改后的值// 不使用ref则不需要使用到value可直接修改text修改后的值},2000)
/script
2秒后text1显示在页面上的值会从这是本页面的内容变成修改后的值, 如果不使用ref则不管怎么修改text显示在页面上的值仍然是这是本页面的内容
computed
计算属性computed其作用是被动的动态的改变值可能不太好理解举个例子吧比如我们要显示的是列表中一共有多少行如果使用ref那么我们需要这么写
templateview classapp-containerview classapp-title{{ number }}/view/view
/templatescript langts setup
import { ref, computed } from vue;const data: any ref([]);
const number ref(0);setTimeout(() {data.value [{name: 1,value: 1,},{name: 2,value: 2,},];number.value data.value.length;
}, 2000);
/script如果使用computed就简单一些它能被动的根据值进行动态变化
templateview classapp-containerview classapp-title{{ number }}/view/view
/templatescript langts setup
import { ref, computed } from vue;const data: any ref([]);
const number computed(() data.value.length);setTimeout(() {data.value [{name: 1,value: 1,},{name: 2,value: 2,},];
}, 2000);
/scriptwatch
和computed不同watch的目的是主动的监听某一个变量当这个变量发生变化时以便我们主动的做出一些应对措施
templateview classapp-containerview classapp-title{{ number }}/view/view
/templatescript langts setup
import { ref, watch } from vue;const data: any ref([]);
const number ref(0);setTimeout(() {data.value [{name: 1,value: 1,},{name: 2,value: 2,},];
}, 2000);// 监听data的变化
watch(() data.length,(value) {// 具体的应对措施number.value value.length;}
);
/scriptstyle
style类似于传统前端中的CSS部分它的主要作用是将骨架template以更美观的形式展现到用户面前和传统CSS不同的是在Vue中的style是支持三方库的比如sassless
lang
其作用是指的css的类型比如指的style中的语法是less style langless
.app-container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.app-title {font-size: 24px;font-weight: bold;
}
/style
值得注意的是如果想要使用这些三方库并没有天然的集成在里面使用前要进行安装
scoped
scoped其作用是防止样式污染比如我们在a页面存在一个样式名叫做app-container然后在b页面也存在一个样式名叫做app-container这是该怎么办通常有两种做法
第一种修改掉其中一个样式名第二种都加上scoped加上scoped之后Vue会主动的给每一个样式加上唯一的标签使其不会污染到别的页面里面的样式
style scoped
.app-container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.app-title {font-size: 24px;font-weight: bold;
}
/style 本章小结
本章简单的分享了一下在Vue3中常用到的几种语法通过本章我们知道了
一个正常的Vue或者说uniapp页面通常包含三部分别分是templatescriptstyletemplate约等于传统前端开发的html是页面的骨架script约等于传统前端开发的Javascript是页面上的逻辑style约等于传统前端开发中的css是用来丰富页面上显示效果
