Learning VueJS through a course from Udemy
{{ }}
This is called Interpolation
html file :
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{ goal1 }}</p>
</section>
const app = Vue.createApp({
data() {
return {
goal: "Finish this Course",
vueLink: "https://v3.vuejs.org",
};
},
});
app.mount("#user-goal");
<p>Learn more <a href="{{ vueLink }}"></a></p>
<p>Learn more <a v-bind:href="vueLink"></a></p>
const app.createApp({
data() {
return {
goal1: 'Try to finish this course !',
goal2: 'Smile',
vueLink: 'https://v3.vuejs.org/'
}
},
methods() {
aFunction() {
return 'haha'
}
}
}).mount("#example");
<div id="example">{{ aFunction() }}</div>
const app = Vue.createApp({
data() {
return {
html: "<h1> Ops </h1>",
};
},
}).mount("#test");
<p id="test" v-html="html"></p>
Code above will return HTML element if you want to output HTML Elements instead of texts or functions by using v-html.
v-html is also used to return functions if you want
<section id="events">
<h2>Events in Action</h2>
<button v-on:click="add(1)">Add</button>
<button v-on:click="remove">Remove</button>
<p>Result: {{ counter }}</p>
</section>
const app = Vue.createApp({
data() {
return {
counter: 0,
};
},
methods: {
add(num) {
return (this.counter = this.counter + num);
},
remove() {
return (this.counter = this.counter - 1);
},
},
}).mount("#events");
We use v-on:(events) like v-on:click to add Cick event through VueJS. We can have many different events.
v-on:click=“” for click event
v-on:input=“function($event, arguments)” for onChange of input element
v-on:submit.prevent=“” for form submission
v-once for making sure that the data in their won’t change
v-model for two-way binding of input element
computed
when we need a state that related to other states.watch
the same way we user useEffect in React but watch only triggers when the value we set up change.<section id="styling">
<div
class="demo"
:class="{active: dynamicStyle[0]}"
@click="toggleStyles(0)"
></div>
</section>
We won’t go into javascript file because the logic there is simple. It is just for turning dynamicStyle value from false to true and the opposite.
What we learn here are dynamic binding classes from VueJS :
class
will decide what class this div will always have:class
stands for v-bind:class. This is used for binding new class based on the codition. In this case, dynamicStyle is that condition.@click
is for onCLickHandlerAuthor: Tris-909
Source Code: https://github.com/Tris-909/VueJS
#vue #vuejs #javascript