Vue.js: Using dynamic and static attributes and props with components and HTML elements (video)

I wrote a book about Vue.js! Vue.js 2.x by Example is available as from Packt and covers Vue, Vuex and VueRouter.

This Vue.js tutorial explains the difference between dynamic and static attributes and props. It shows how you can pass variables to components or other HTML elements to display dynamic contents.

Using a colon, or v-bind, you tell Vue that the contents of the attribute, or prop, is dynamic. This means it can be a variable, a javascript expression or function. If you wish to pass in a simple string, you don't need to bind or use the colon.

This carries on from Using props for accessing URL parameters within components with Vue Router

You might also enjoy

  • Useful command line MySQL commands

    Posted on 5th July 2020.

    It seems I have been doing a lot of command line work on Debian with MySQL recently and have been having to search the internet (or my bash history) every time I need to do something. Here is a collection of commands I have been using…

  • The Git Commit Hash

    Posted on 28th May 2020.

    The magic 40 character string that is attached to every commit you do. What is it, where does it come from and will understanding it help you with Git in the future?…

  • Why should you consider Cloudflare for your website?

    Posted on 20th April 2020. Written For Liquid Light

    Cloudflare is a service which, among other things, provides a CDN (Content Delivery Network), firewall, and performance layer for your website. It has plenty of paid upgrades and features and is a developer’s dream, but what advantage does it have for you to put your website “behind” Cloudflare and how…

    Web
Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.