Vuejs - Revision history

Lsokolowski1 at 18:13, 22 January 2026

2026-01-22T18:13:57Z

← Older revision		Revision as of 18:13, 22 January 2026
Line 653:		Line 653:
	#* Wrapping into '''full-stack''', with '''db''', '''rest''' api, etc		#* Wrapping into '''full-stack''', with '''db''', '''rest''' api, etc
	# ? (HOMEWORKS)		# ? (HOMEWORKS)
	<!-- TODO: adding tailwind css, improve route, pinia, and full-stack presu and exercises -->		<!-- TODO:
			adding tailwind css, improve route, pinia, and full-stack presu and exercises -->
	<!-- some hints,answers		<!-- some hints,answers
	ad. 4.1-2. - v-if=hinting + v-else=hinting VS v-if=hinting===false + v-else=hinting===true VS v-if=hinting===false + v-if=hinting===true VS v-show ways		ad. 4.1-2. - v-if=hinting + v-else=hinting VS v-if=hinting===false + v-else=hinting===true VS v-if=hinting===false + v-if=hinting===true VS v-show ways
	ad. 5.2. - computed VS methods, methods works		ad. 5.2. - computed VS methods, methods works
	-->		-->

Lsokolowski1 at 18:12, 22 January 2026

2026-01-22T18:12:51Z

@@ Line 366: / Line 366: @@
 (...) methods: { giveConfirmation(){ this.$emit('void-confirmed', this.confirmed) } }
 </syntaxhighlight>
 ==== Change detection ====
@@ Line 729: / Line 653: @@
 #* Wrapping into '''full-stack''', with '''db''', '''rest''' api, etc
 # ? (HOMEWORKS)
 <!-- TODO: adding tailwind css, improve route, pinia, and full-stack presu and exercises -->
-<!--
+<!-- some hints,answers
 ad. 4.1-2. - v-if=hinting + v-else=hinting VS v-if=hinting===false + v-else=hinting===true VS v-if=hinting===false + v-if=hinting===true VS v-show ways
 ad. 5.2. - computed VS methods, methods works
 -->

Lsokolowski1 at 07:43, 28 August 2025

2025-08-28T07:43:11Z

← Older revision		Revision as of 07:43, 28 August 2025
Line 2:		Line 2:


	~~<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >~~
	;title: Vuejs Training Course		;title: Vuejs Training Course
	;author: Lukasz Sokolowski		;author: Lukasz Sokolowski
	~~</slideshow>~~

Lsokolowski1 at 10:07, 22 November 2024

2024-11-22T10:07:17Z

← Older revision		Revision as of 10:07, 22 November 2024
Line 370:		Line 370:

	<!-- TODO		<!-- TODO
	==== Interpolation ⌘====		==== Interpolation ====
	* Replaces the content of the '''markup''' with the value of the expression ('''howManyTries''')		* Replaces the content of the '''markup''' with the value of the expression ('''howManyTries''')
	** The value of the component property will be displayed as the contents inside the interpolation tags		** The value of the component property will be displayed as the contents inside the interpolation tags
Line 387:		Line 387:
	</syntaxhighlight>		</syntaxhighlight>

	==== Expressions ⌘====		==== Expressions ====
	* Pieces of plain JavaScript code		* Pieces of plain JavaScript code
	** Evaluated in the '''context''' of the component '''instance'''		** Evaluated in the '''context''' of the component '''instance'''
Line 395:		Line 395:
	* New meanings for operators '''\|''' and '''?.'''		* New meanings for operators '''\|''' and '''?.'''

	==== Expressions Con't ⌘====		==== Expressions Con't ====
	Restrictions		Restrictions
	* ''Assignment'' is prohibited, except in event bindings		* ''Assignment'' is prohibited, except in event bindings
Line 404:		Line 404:
	* No calling ''console.log''		* No calling ''console.log''

	===== Safe navigation operator ⌘=====		===== Safe navigation operator =====
	'''?.''' checks for null values in lengthy property paths		'''?.''' checks for null values in lengthy property paths
	* Example <syntaxhighlight inline lang="js">{{ invoice?.item }}</syntaxhighlight>		* Example <syntaxhighlight inline lang="js">{{ invoice?.item }}</syntaxhighlight>
Line 414:		Line 414:
	** Loads the data when it is available		** Loads the data when it is available

	==== Binding data ⌘====		==== Binding data ====
	[[File:BindingDataAng4a.png\|320px\|Binding data in Angular]]		[[File:BindingDataAng4a.png\|320px\|Binding data in Angular]]
	* Property binding		* Property binding
Line 420:		Line 420:
	* [[Angular_Fundamentals#Example_1_.E2.8C.98\|Example]]		* [[Angular_Fundamentals#Example_1_.E2.8C.98\|Example]]

	===== Property binding ⌘=====		===== Property binding =====
	<syntaxhighlight inline lang="js">[ ]</syntaxhighlight>		<syntaxhighlight inline lang="js">[ ]</syntaxhighlight>
	* Binding works by '''linking''' the value of the property in '''component class''' to the value of some '''element in the view'''		* Binding works by '''linking''' the value of the property in '''component class''' to the value of some '''element in the view'''
Line 432:		Line 432:
	</syntaxhighlight>		</syntaxhighlight>

	===== Event binding ⌘=====		===== Event binding =====
	<syntaxhighlight inline lang="js">( )</syntaxhighlight>		<syntaxhighlight inline lang="js">( )</syntaxhighlight>
	* Event of element is '''bound''' to an expression		* Event of element is '''bound''' to an expression
Line 445:		Line 445:
	-->		-->

	==== Change detection ⌘====		==== Change detection ====
	* State maintenance		* State maintenance
	* Change detection		* Change detection

	===== State maintenance ⌘=====		===== State maintenance =====
	* Vue apps are ''dynamic''		* Vue apps are ''dynamic''
	* Dynamic values are kept up-to-date as the data in an application gets updated		* Dynamic values are kept up-to-date as the data in an application gets updated
Line 456:		Line 456:
	** we can use these values directly in expressions and bindings in the template without having to write any plumbing code to wire them up		** we can use these values directly in expressions and bindings in the template without having to write any plumbing code to wire them up

	===== Change detection ⌘=====		===== Change detection =====

	Vue keeps '''track of changes''' in the component as it runs		Vue keeps '''track of changes''' in the component as it runs
Line 466:		Line 466:
	** Updates the element in the view that is bound to property with the new value of it		** Updates the element in the view that is bound to property with the new value of it

	===== Change detection Con't ⌘=====		===== Change detection Con't =====

	* Multi-step process where Vue		* Multi-step process where Vue
Line 479:		Line 479:
	** It vastly improves the '''performance''' of Vue		** It vastly improves the '''performance''' of Vue

	=== Web components ⌘===		=== Web components ===

	Standards for web browsers		Standards for web browsers
Line 487:		Line 487:
	<!-- TODO * HTML imports -->		<!-- TODO * HTML imports -->

	==== Custom elements ⌘====		==== Custom elements ====

	Enable '''new types of element''' to be created		Enable '''new types of element''' to be created
Line 495:		Line 495:
	** Makes it possible to become truly '''self-contained'''		** Makes it possible to become truly '''self-contained'''

	==== Shadow DOM ⌘====		==== Shadow DOM ====

	Provides a '''hidden''' area on the page for scripts, CSS, and HTML		Provides a '''hidden''' area on the page for scripts, CSS, and HTML
Line 503:		Line 503:
	* Component can use it to '''render''' its display		* Component can use it to '''render''' its display

	==== Templates ⌘====		==== Templates ====

	'''Repeatable''' chunks of HTML		'''Repeatable''' chunks of HTML
Line 511:		Line 511:
	* Can be used to make the HTML and CSS inside the Shadow DOM used by the component ''dynamic''		* Can be used to make the HTML and CSS inside the Shadow DOM used by the component ''dynamic''
	<!-- TODO		<!-- TODO
	==== HTML imports ⌘====		==== HTML imports ====

	Provide a way to '''load''' resources (HTML, CSS, JS) in a '''single bundle'''		Provide a way to '''load''' resources (HTML, CSS, JS) in a '''single bundle'''

Lsokolowski1: /* Exercises */

2024-11-21T22:41:43Z

Exercises

← Older revision		Revision as of 22:41, 21 November 2024
Line 639:		Line 639:
	##* use this property below as our main '''model''' for now		##* use this property below as our main '''model''' for now
	##* <syntaxhighlight inline lang="js">jewels: ['ruby','diamond','agate','amber','aquamarine','amethyst','opal','tourmaline','emerald','onyx','pearl','sapphire']</syntaxhighlight>		##* <syntaxhighlight inline lang="js">jewels: ['ruby','diamond','agate','amber','aquamarine','amethyst','opal','tourmaline','emerald','onyx','pearl','sapphire']</syntaxhighlight>
	## Update our main html template with '''~~howmManyTries~~'''		## Update our main html template with '''howManyTries'''
	##* <small>''Exercise: improve it with dynamic data''</small> (''index.html'')		##* <small>''Exercise: improve it with dynamic data''</small> (''index.html'')
	##* observe it in the browser - use '''Vue dev-tools'''		##* observe it in the browser - use '''Vue dev-tools'''

Lsokolowski1: /* Props VS Emitting */

2024-05-17T12:11:46Z

Props VS Emitting

← Older revision		Revision as of 12:11, 17 May 2024
Line 349:		Line 349:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<!-- in parent, called 'current-invoice' -->		<!-- in parent, called 'current-invoice' -->
			<!-- restriction: 'reasons' must be only small letters! -->
	<voided-invoice v-bind:reasons="getReasons"/>		<voided-invoice v-bind:reasons="getReasons"/>
	(...) methods: { getReasons(){} }		(...) methods: { getReasons(){} }

Lsokolowski1: /* Exercises */

2024-05-16T08:22:17Z

Exercises

← Older revision		Revision as of 08:22, 16 May 2024
Line 679:		Line 679:
	##* ..and then - improve it with (...) ?? (small discussion together)		##* ..and then - improve it with (...) ?? (small discussion together)
	# Help the gamer - when the number of tries is 5, '''Restart''' game button should become huge (48px)		# Help the gamer - when the number of tries is 5, '''Restart''' game button should become huge (48px)
	#* add new '''css''' class('''.gameKiller''') and '''bind''' it (how?)		#* add new '''css''' class ('''.gameKiller''') and '''bind''' it (how?)
	# '''''"Bring me some action!"''''' - ''Sly''?		# '''''"Bring me some action!"''''' - ''Sly''?
	## Restarting the game should '''re-initialize''' our state in model		## Restarting the game should '''re-initialize''' our state in model

Lsokolowski1: /* Helpers */

2024-05-16T06:14:07Z

Helpers

← Older revision		Revision as of 06:14, 16 May 2024
Line 629:		Line 629:
	* '''Awesome'''		* '''Awesome'''
	** <small>https://github.com/vuejs/awesome-vue</small>		** <small>https://github.com/vuejs/awesome-vue</small>
			* Tailwind CSS - good alternative(and more) to Bootstrap
			** Setup <small>''https://v2.tailwindcss.com/docs/guides/vue-3-vite''</small>

	== Exercises ==		== Exercises ==

Lsokolowski1 at 05:53, 16 May 2024

2024-05-16T05:53:02Z

← Older revision		Revision as of 05:53, 16 May 2024
Line 728:		Line 728:
	#* Wrapping into '''full-stack''', with '''db''', '''rest''' api, etc		#* Wrapping into '''full-stack''', with '''db''', '''rest''' api, etc
	# ? (HOMEWORKS)		# ? (HOMEWORKS)
	<!-- TODO: adding tailwind css -->
			<!-- TODO: adding tailwind css, improve route, pinia, and full-stack presu and exercises -->
	<!--		<!--
	ad. 4.1-2. - v-if=hinting + v-else=hinting VS v-if=hinting===false + v-else=hinting===true VS v-if=hinting===false + v-if=hinting===true VS v-show ways		ad. 4.1-2. - v-if=hinting + v-else=hinting VS v-if=hinting===false + v-else=hinting===true VS v-if=hinting===false + v-if=hinting===true VS v-show ways
	ad. 5.2. - computed VS methods, methods works		ad. 5.2. - computed VS methods, methods works
	-->		-->

Lsokolowski1: /* Exercises */

2024-05-16T05:11:52Z

Exercises

← Older revision		Revision as of 05:11, 16 May 2024
Line 723:		Line 723:
	# '''Routing''' - how to navigate with a ''yellow submarine''		# '''Routing''' - how to navigate with a ''yellow submarine''
	#* route our '''ftj''' app		#* route our '''ftj''' app
	# State management - ''SCRUMs, UMLs, NVCs, etc''		# '''State''' management - ''SCRUMs, UMLs, NVCs, etc''
	#* '''Pinia''' and its flavors		#* '''Pinia''' and its flavors
	# '''''"Stack it in your..!"''''' - ''Hamish (the "detective")?''		# '''''"Stack it in your..!"''''' - ''Hamish (the "detective")?''