Vue学习笔记: v-bind

前言
由于刚接触Vue3，大概在试图理出头绪的第三天意外接到任务，需要即战力来应付，这两个礼拜我的学习比较是有样学样，非从文件下手，起手式都是搜寻自己想要实作的功能，跟着网路上的範例刻出来，对于讲求产出来说，效果不错，进度比预期中理想，真是感谢老天爷保佑XD也因此还有点余裕能继续兑现自己2024一週发一技术文的承诺，本来以为今年的第二週就宣告失败了，哈哈哈哈哈，上週我有发文，但不知为何被吃掉了，是因为我正文直接放hackMD连结吗？有点不解，不过反正hackMD那有，我就也懒得再发过。
正因为是依样画葫芦，每个语法目前都是一知半解的状态，有点像是我脑袋中的大杂烩，大概知道谁是谁，但并无深刻印象，今天花点时间来複习v-bind，希望能把它从大杂烩中捞出，晋身私房菜XD

v-bind

就我所知的描述: 单一方向，html取用来自js的变数，我在实作上的应用是在html的标籤中，使用:to="currentPath"，而currentPath则在script中以watch定义好，当route path一改变，currentPath.value跟着换。想实现的功能是，在首页的功能列表的dialog pop up，一开始只能在首页使用，如果我在其他分页点选没反应，得先跳回首页再点，使用者体验很差，所以在Tim的巧手下，以即时更新其route path的方式，实现在任一分页，皆可直接点选功能列表，恩...解释烂到自己不敢看，根本血肉模糊，实际程式码如下：

  <q-item        :to="currentPath"        active-class="q-item-no-link-highlighting"        @click="bulletin = true"      >        <q-item-section avatar>          <q-icon name="list" />        </q-item-section>        <q-item-section>          <q-item-label>公告（0）</q-item-label>        </q-item-section>      </q-item>

const currentPath = ref(route.path);watch(route, (route) => {currentPath.value = route.path;});

官方文件的描述:

範例说明：试着将一个动态的class绑定在h1标籤上，titleClass的ref为值，如绑定成功，文字会显示红色

一开始的程式码如下，文字显示为预设的黑色：

import { ref } from 'vue'const titleClass = ref('title')</script><template>  <h1>Make me red</h1> <!-- add dynamic class binding here --></template><style>.title {  color: red;}</style>

在h1标籤加上:class="titleClass"，可成功将文字改变为红色

参考资料：vuejs.org/tutorial/#step-3

后话
複习的时候发现了自己的盲点，我把v-bind等号的左右边搞混了，原来左边是html原本就有的东西，例如:to, :class, :style之类，右边才是从js来的参数，而不是两边都要设参数，突然恍然大悟。
本来是要写v-bind跟v-model这对好兄弟，但写完v-bind就天亮了XD，该準备準备，去热个银丝卷，叫小孩起床，準备去工作室了，没错我是早起的鸟儿，常常4-5点就起床懒懒蛇，我自己是还蛮喜欢这个习惯的，讲偏了，总之v-model就容我留待下週再写好了（大家好像也只能无条件答应哈哈哈)，飞奔处理家务去～
是说如果大家对我一週的ORID有兴趣的话，附上任意门，可以自行穿越：我的medium