Duvida sobre o bind

Oi Marcos! O bind em "desabilitado" é porque isso é um props (propriedade) do componente Botão, ou seja, isso é necessário para que essa propriedade (desabilitado) do componente Botão "enxergue" e receba o valor atribuído a ela (o conteúdo/valor de "cronometroRodando", no caso). O bind em "desabilitado" é feito com a propriedade do botão disable, no qual possui v-bind:disabled="desabilitado". Esse "desabilitado" é a props que é recebida pelo temporizador no código que você citou na pergunta.

Não creio que haja uma regra pra ser aplicado só em boolean e int.

Uma coisa que pode confundir um pouco é a distinção do v-bind com o v-model. E achei interessante esse link https://learnvue.co/articles/v-model-guide que explica sobre o assunto.

Oi Rodrigo, o link esta para este topico!

Desculpe, editei o post.

Bom, só complementando... entendi que já as propriedades de icone e texto do botão não são passadas por bind porque o conteúdo atribuído/enviado é "estático", já é o valor fixo passado, não vem de uma data ou methods do componente Temporizador.

Mas, lá no componente Botão, é preciso indicar ao class que aquele conteúdo é um valor passado a ele (fazendo o bind):

<template>
    <button class="button" @click="clique" v-bind:disabled="desabilitado">
        <span class="icon">
            <i v-bind:class="icone"></i>
        </span>
        <span>{{ texto }}</span>
    </button>
</template>

Já o texto, por ser apenas um "print" do conteúdo recebido, é só utilizar diretamente {{ texto }} mesmo.

Não sei se consegui compreender ainda... onde temos o : icone="fas fa-play" ele não é passado por bind, por ser estatico? E em :desabilitado="cronometroRodando" , esse conteudo é dinamico? Por isso faço o bind em: :disabled="desabilitado"? Quando faço o :desabilitado, estou informando que esse valor pode mudar a qualquer momento?

<Botao @clicado="iniciar" icone="fas fa-play" texto="play"  :desabilitado="cronometroRodando" />

Ao fazermos o :desabilitado estamos meio que "plugando" o conteúdo passado (cronometroRodando) ao componente botão. Precisamos dizer ao componente botão que o valor de cronometroRodando, que é um data do Temporizador, precisa reconhecer ("ouvir") esse data que afinal é manipulado/mudado pelo Temporizador, ou seja, estamos meio plugando/ligando "por uma tomada" esse data cronometroRodando lá no :disabled do componente Botão, em <button class="button" @click="clique" v-bind:disabled="desabilitado"> .

Em suma, estamos dizendo, "olha, componente Botão... a sua propriedade desabilitado eu quero que receba o conteúdo de cronometroRodando que estamos manipulado aqui no Temporizador, logo, preciso que você fique 'ouvindo/observando' esse dado e faça o que tenha que fazer quando ele mudar hein, então vou plugar o cronometroRodando em você, ok? Vou fazer o bind aqui do desabilitado, vou ligá-lo na tomada pra quando o Temporizador mexer no cronometroRodando , você agir conforme ele mudar."

Eu chamei de "dinâmico" o data cronometroRodando do Temporizador porque foi o primeiro termo q veio na cabeça rsrs. É que ele é manipuado pelo componente Temporizador, e o Botão precisa "ouvir" isso, caso o valor dele seja mudado.

O valores "fas fa-play" e "play" (cod abaixo) são simplemesmente atribuídos diretamente às propriedade icone e texto do Botão, respectivamente. Esses valores já são passados de forma "fixa" lá pro Botão, então não faz sentido o Botão precisar ficar "ouvindo" esses dados, concorda? Nesses casos, o Botão só "cospe" o conteúdo do texto no <span> e a gente precisa fazer o bind no class no Botão (<i v-bind:class="icone"></i> ), para que o estilo enxergue esse conteúdo da propriedade icone ("class, isso aqui é um estilo que vc acabou de receber, ok?")

<Botao @clicado="iniciar" icone="fas fa-play" texto="play"  :desabilitado="cronometroRodando" />

Tem um outro exemplo de binding legal aqui, pra entender ainda mais (o link do formulário é mudado automaticamente conforme a edição do input text, sendo feito por bind, ou seja, a url do href fica "ouvindo/observando" o que tá sendo mudado lá no input text): https://vueschool.io/lessons/vuejs-attribute-bindings

Aqui também reforça o conhecimento que tivemos na Alura, mais precisamente o vídeo 3, "Attribute Binding" de 3:48 min: https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3/

Espero ter ajudado. E se ainda tiver dúvida, postar ae. :)

Ajudou demais, sou brackend, e nesse mundo novo do front, sou leigo, iniciando, muito obrigado pela excelente explicação Rodrigo.

Que legal!!

Também sou backend e novo com front! hahaha

Únicas coisas que mexi com front foram em coisas ligadas às linguagens java e php: jsf/primefaces, twig, blade que aprendi recentemente com Laravel...

Toda a parte front-end mais "desacoplada" com javascript/typescript é novidade pra mim também hehehe!

Daí resolvi começar com Vue.js, em vez de aprender Angular ou React primeiro.

Mas estou adorando... curtindo... felizmente :)

Eu sou dev PHP, vi Java na facul, e node na empresa anterior, atualmente fui pra uma equipe nova, com sistema legado em Ruby e Vue, então estou tentando aprender pra ontem td isso :)

Legal demais Marcos!

Durante uns estudos aqui, verifiquei mais uma coisa que dá pra complementar toda a explicação e entendimento que tivemos de uma maneira mais resumida sobre o bind:

• O bind é uma forma de dizer ao atributo/propriedade que ela tá recebendo um conteúdo que pode ser uma expressão e/ou variável.

Nesse projeto, que consta na lição/vídeo 2 dessas instruções, verificando a branch l2-end, fiz o seguinte teste:

No componente BaseInput.vue eu pus a props valorDigitado, que ficou assim:

<template>
  <label v-if="label">{{ label }}</label>
  <input
    v-bind="$attrs"
    :value="modelValue"
    :placeholder="label"
    @input="$emit('update:modelValue', $event.target.value)"
    :title="valorDigitado"
    class="field"
  >
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      type: [String, Number],
      default: ''
    },
    valorDigitado: {
      type: Boolean,
      required: false
    }
  }
}
</script>

No SimpleForm.vue eu mencionei no título:

      <BaseInput
        v-model="event.title"
        label="Title"
        type="text"
        :valorDigitado="event.title.length > 0"
      />

Nesse código acima, se você remover o bind de :valorDigitado, a IDE vai sinalizar que o conteúdo event.title.length > 0 é uma string atribuído ao valorDigitado, e não uma expressão.

Portanto, o bind é uma forma de dizer ao valorDigitado que o que está sendo passado ali é uma expressão (comparativa no caso), o que poderia ser uma variável (data) ou method ou compute do próprio componente SimpleForm.vue.