view simply contains static elements , it does not store data of a particular user
view needs some kind of connection to a database.
we need a middle man , aka a model to operate the database
let info{city:'Rwanda'}let instance_a=infolet instance_b=info// These instances points to a memory location// the info instance>>info Object { city: "Rwanda" }//the a instance pointing to info>>instance_a Object { city: "Rwanda" }//changint the a instance>>instance_a.city='Kigali' "Kigali"// checking the info a instance>>info Object { city: "Kigali" }>>instance_b Object { city: "Kigali" }/SINGLETON Guarantees Data Consistancy
// With the factory pattern , you can not change the instance value and expect the parent to change. function info_factory(){ return { city:'Rwanda' }}>>info_factory()Object { city: "Rwanda" }>>instance_aObject { city: "Rwanda" }>>instance_a.city="Kigali""Kigali"info_factory()Object { city: "Rwanda" }>>instance_bObject { city: "Rwanda" }
<input type="text" :value="person.name" v-bind:disabled="true"><!--You can also shorten the view bind with : only--><input type="text" :value="person.name" :disabled="true">
using this attribute we can convert an html tag to another attribute tag
eg: we can convert the h2 tag into a b tag (the tag name needs to be a string)
When we refresh the page for a few moment users can see the raw template code ,
they can see all the mustache tags , this is because the compilation of the template
did not finish instantly usin the v-cloak we can hide the raw template code until the complitaion is over and do to that we will wrap our rendered element in an outer div we add the v-cloak in the outer div and after that we add the css class using the v-cloak directive
Now to controll the addition and removal of class we bind to the class
{{msg}}
<button @click=“bg=!bg”>ChangeBg
<button @click=“text=!text”>ChangeBg
{{msg}}
<button @click=“bg=!bg”>ChangeBg
<button @click=“text=!text”>ChangeBg
USING THEME As an Object and Array
============
{{title}}
VUE LIVECYLE HOOKS
Hooks are function that are automatically executed at predefined timings, it is a very efficient way of integrating our custom codes into an established program
Vue Hooks are defined at the component leverl
Root or child component
LiveCycle Hooks
BeforeCreate
created
beforeMount
Mounted
beforeUpdate
updated
active
deactivated
beforeUnmount
unmounted
errorCaptured
renderTracked
renderTriggered
Vue Live CycleHooks
================
Updated and Before Update Hooks
Modifying any property which is displayed in the component template triggers the updated and beforeUpdate hooks,But Changes made via the DOM object won’t trigger the hooks
wATCHERS Helps in watching a property in 360 angle,
everywhere it can possibly be modified from
!Remember our program to check user input and delimiter him from a specific max chars?
<input v-model=“msg” @input=“check” />
{{max-msg.length}}/{{max}}
This works and it is good , but if the user modifies things from the console there is no way we can be able to prevent that
vm.msg=“MessageLonger than required length”
Now this is when watchers come for rescue
Vue offeres us 3 ways to use watchers
let’s see how we can fix the above problem with watchers
Watcher usage
{{max - msg.length}} / {{max}}
{{msg}}
ANOTHER USE CASE USING THE WATCHER
Kigali
Gisenyi
Goma
{{city}} : {{weather}}
!!!!!!!!!!!!!
Now let’s say we want to give an initial value,so that the query method gets triggered automatically,
what are we going to do ?
Solution 1
The simplest method would be to call the create query in teh created hook
methods:{
…
},
created() {
this.query(this.city);
}
Solution 2
=============
We can Ask the city watcher to respond during the initial loading of the program
for that we are going to use the object syntax in the wather property
watch:{
city: {
handler(newval, oldval) {
console.log(oldval + ”->” + newval);
this.query(newval);
},
immediate: true
}
}
WATCHING A REFERENCE TYPE VALUE OR OBJECT
watch: {
list: {
handler(newVal, preVal) {
console.log(preVal, ”->”, newVal);
},
deep: true
// without this deep true , the array watcher will //only get triggered when we asign a new array to it
//Now any change to our array will trigger the watcher(pop, push, edit etc…)
},
Trigger on element size change
watch: {
list: {
handler(newVal, preVal) {
console.log(preVal, ”->”, newVal);
},
‘list.length’(newVal,preVal){
console.log(‘elem total:‘+prevVal+’->‘+newVal);
}
We can not watch a specific array element
!!!! avaoid doing so
‘list[0]’:{
handler(newval,preval){
console.log(preval+”->“+newval)
},
deep=true
}
Watching object properties
object properties on the other hand can be watched
‘car.brand’(newval,preval){
console.log(preval+” -> “+newval)
}
FLUSH TIMING OF WATCHER
flush property decides if a watcher property is executed before the page renders or after it
WE HAVE tree options,
pre, post and sync
Pre is the default value and also the recommended one
watch: {
msg: {
handler(newVal, preVal) {
console.log(preVal, ”->”, newVal);
},
immediate: true,
flush: ‘sync’
},
Hooks
A watcher is a very special typepe of hook , it mornitors the ttarget value and triggers when the value changes
we can monitor an different watchers , we just have to ut them in the array
Using A function Syntac
watch: {
msg: [
function (newVal, preVal) {
console.log(“first msg watcher”);
console.log(preVal, ”->”, newVal);
},
function (newVal, preVal) {
console.log(“first msg watcher”);
console.log(preVal, ”->”, newVal);
}
]
},
Using an object Syntax
watch: {
msg: [
{
handler() {
console.log(“first msg watcher”);
},
immediate: true, flush: ‘pre’,
},
{
handler() {
console.log(“Second msg watcher”);
},
immediate: true, flush: ‘pre’,
}
]
},
!Now we have two watchers with complete different settings,
==================================
SECOND WAY OF USING WATCHERS $watch
monitoring a property change via the watch function is convenient , we just need to list the target name as a property name then assign either a function name or an obejct to it.
This is what we have been doing above.
*=>Now As a trade off , the watch funtion does not offers us enough control over the watcher and the watch source, we can not control the start and end of a watcher
*=>Using the target name as a property name, means we can not set a complicated expression to monitor a calculated a value
That’s when $watch() comes to the rescue
$Watch in action
created() {
// the watcher Will start automatically when the app instance is created
this.$watch(
‘msg’,
(newval, preval) => {
// uses the arrow function so that it can inherit the this from the created hook
console.log(preval + ’=>’ + newval);
},
{
// Because of immediate true, the watcher will trigger when we first load the page
immediate: true
}
);
},
You can Stop A watcher from running by stopping it
data() {
return {
msg: ‘danielement’,
stop: null,
stop_2: null,
};
},
created() {
// You can also declare multiple watchers
// the watcher Will start automatically when the app instance is created
this.stop = this.$watch(
‘msg’,
(newval, preval) => {
// uses the arrow function so that it can inherit the this from the created hook
console.log(“First watcher in action”);
console.log(preval + ’=>’ + newval);
},
{
// Because of immediate true, the watcher will trigger when we first load the page
immediate: true
}
);
this.stop_2 = this.$watch(
‘msg’,
(newval, preval) => {
console.log(“Second watcher in action”);
// uses the arrow function so that it can inherit the this from the created hook
console.log(preval + ’=>’ + newval);
},
{
// Because of immediate true, the watcher will trigger when we first load the page
immediate: false
}
);
},
Now: By invocking the stop property which holds a function, a watcher can me modified
Uppon the loading of the page:
//The first watcher will be runned
-vm.msg=“Dan”
// uppon the modification of the msg property Both watcher will be executed
-vm.stop
//Display to you the function it holds fro the watcher
-vm.stop()
//by calling this function, the watcher will not run anymore,
If you were to call the vm.msg=‘test’
only the secon will run
WATCHING COMPLEX OBJECTS(NON PRIMITIE VALUES)
created() {
this.$watch(
// ‘list’,
// ‘car’,
// ‘list.length’,
// ‘list[0]’, Does not work
‘car.brand’,
(newval, preval) => {
console.log(“First watcher in action”);
console.log(preval + ’=>’ + newval);
},
{
immediate: true,
deep: false,
}
);
},
SETTING A GETTER TO WATCH COMPLICATED RESULTS
created() {
this.$watch(
() => {
// Now we can watch multiple properties with a single watcher
return [this.city, this.nation ];
// You can also watch a mathematical expression without any problem
return this.a+this.b
// You can also watch every elements from a list by converting it from a proxy to an array
return […this.list]
// Yes you can also watch a single instance of a list