VueJS: what does an html attribute prefixed with a

Question

Example:

<vue-select 
  class="vue-select1" 
  name="select1"
  :options="options1" 
  :model.sync="result1"
></vue-select>

What is the meaning the colon in front of :options and :model.sync here? I've searched all over the internet and can't find an answer anywhere.

Example seen here: https://github.com/Haixing-Hu/vue-select

Answer 1

In a Vue template, a colon : prefixing an html attribute is shorthand for v-bind.

Here's the full documentation for v-bind.

Answer 2

Be careful when using the colon in HTMLbecause selecting the attribute in CSS and JQueryhas a different meaning with a colon. In CSS and JQuery, a colon signifies a pseudo-selector, which is different from v-bind;

Answer 3

To add to thanksd's answer:

Those are dynamic attributes. Basically it means that Vue.js will let you set the value of those attributes to variables, and when the value of those variables updates, the value of those attributes will update as well.