Skip to content

Commit 0395bd6

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4153 from sivaprasath2004/sivaprasath-closes-issue-4070
[Feature]: Add Vue.Js tutorials proper output
2 parents 7bec8df + 6b97f8b commit 0395bd6

6 files changed

+165
-0
lines changed

‎docs/Vue.js/ComponentBased.md

+8
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,14 @@ export default {
6262
</style>
6363
```
6464

65+
<BrowserWindow>
66+
<div class="user-profile" style={{padding:'1rem',border:"1px solid"}}>
67+
<img src="/img/svg/coding.svg" alt="User Avatar" style={{height:"10rem",width:"10rem"}} />
68+
<h2>John</h2>
69+
<p>Apiring Full Stack Developer</p>
70+
</div>
71+
</BrowserWindow>
72+
6573
In this example:
6674
- The `UserProfile` component encapsulates the structure of a user profile, including an image, name, and bio.
6775
- It receives a `user` object as a prop, which allows it to display dynamic data based on the parent component's data.

‎docs/Vue.js/ComputedPropertiesAndWatchers.md

+65
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,71 @@ export default {
8888
};
8989
</script>
9090
```
91+
<BrowserWindow>
92+
<div id="showing_results_window">
93+
<input type="text" placeholder="search" onChange={(e) => {
94+
let target_ele = document.getElementById("showing_results");
95+
let showing_results_window = document.getElementById("showing_results_window");
96+
if (target_ele) {
97+
showing_results_window.removeChild(target_ele);
98+
}
99+
if(e.target.value?.length>0){
100+
let target = document.createElement("div");
101+
target.setAttribute("id", "showing_results");
102+
let data = [
103+
{"id": 1, "name": "Ajith Kumar"},
104+
{"id": 2, "name": "Brad Pitt"},
105+
{"id": 3, "name": "Chris Hemsworth"},
106+
{"id": 4, "name": "Denzel Washington"},
107+
{"id": 5, "name": "Emma Watson"},
108+
{"id": 6, "name": "Fahadh Faasil"},
109+
{"id": 7, "name": "George Clooney"},
110+
{"id": 8, "name": "Hugh Jackman"},
111+
{"id": 9, "name": "Idris Elba"},
112+
{"id": 10, "name": "Johnny Depp"},
113+
{"id": 11, "name": "Keanu Reeves"},
114+
{"id": 12, "name": "Leonardo DiCaprio"},
115+
{"id": 13, "name": "Morgan Freeman"},
116+
{"id": 14, "name": "Nicolas Cage"},
117+
{"id": 15, "name": "Orlando Bloom"},
118+
{"id": 16, "name": "Priyanka Chopra"},
119+
{"id": 17, "name": "Quentin Tarantino"},
120+
{"id": 18, "name": "Robert Downey Jr."},
121+
{"id": 19, "name": "Scarlett Johansson"},
122+
{"id": 20, "name": "Tom Hanks"},
123+
{"id": 21, "name": "Uma Thurman"},
124+
{"id": 22, "name": "Viggo Mortensen"},
125+
{"id": 23, "name": "Will Smith"},
126+
{"id": 24, "name": "Xavier Samuel"},
127+
{"id": 25, "name": "Yvonne Strahovski"},
128+
{"id": 26, "name": "Zendaya"}
129+
];
130+
let values = [];
131+
data.forEach((item) => {
132+
if (item.name.toLowerCase().includes(e.target.value.toLowerCase())) {
133+
values.push(item.name);
134+
}
135+
});
136+
if (values.length > 0) {
137+
values.forEach((item) => {
138+
let p = document.createElement("p");
139+
p.textContent = item;
140+
target.appendChild(p);
141+
});
142+
document.getElementById("no_results").style.display = "none";
143+
} else {
144+
document.getElementById("no_results").style.display = "block";
145+
}
146+
showing_results_window.appendChild(target);
147+
}
148+
else{
149+
document.getElementById("no_results").style.display = "block";
150+
}
151+
}} />
152+
<p id="no_results" style={{display:"none"}}>No Results Found</p>
153+
</div>
154+
</BrowserWindow>
155+
91156

92157
In this example:
93158
- The `watch` option is used to define a watcher for `searchQuery`.

‎docs/Vue.js/DeclarativeRendering.md

+8
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ Consider a simple Vue.js component that displays a user's name:
2929
</script>
3030
```
3131

32+
<BrowserWindow>
33+
<p>Hello, Vue.js!</p>
34+
</BrowserWindow>
35+
3236
In this example:
3337
- The `{{ message }}` syntax in the `<p>` tag is a template syntax in Vue.js.
3438
- Vue.js automatically binds the `message` data property to the text content of the `<p>` tag.
@@ -55,6 +59,10 @@ You can also use declarative rendering to conditionally display elements based o
5559
</script>
5660
```
5761

62+
<BrowserWindow>
63+
<p>Now you see me</p>
64+
</BrowserWindow>
65+
5866
Here:
5967
- The `v-if` directive in Vue.js conditionally renders the `<p>` element based on the `seen` data property.
6068
- When `seen` is `true`, Vue.js will include the `<p>` element in the DOM. If `seen` changes to `false`, Vue.js will remove the element from the DOM.

‎docs/Vue.js/Routing.md

+61
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,67 @@ router.beforeEach((to, from, next) => {
110110
});
111111
```
112112

113+
<BrowserWindow>
114+
<div id="Home_page_element_vue">
115+
<h4>Hello,Welcome to our website</h4>
116+
<p>This is Home page</p>
117+
<button onClick={()=>{
118+
let Home=document.getElementById("Home_page_element_vue")
119+
Home.style.display="none"
120+
let About_page_element_vue=document.getElementById("About_page_element_vue")
121+
About_page_element_vue.style.display="block"
122+
let Contact_page_element_vue=document.getElementById("Contact_page_element_vue")
123+
Contact_page_element_vue.style.display="none"
124+
}}>About Page</button>
125+
<button onClick={()=>{
126+
let Home=document.getElementById("Home_page_element_vue")
127+
Home.style.display="none"
128+
let About_page_element_vue=document.getElementById("About_page_element_vue")
129+
About_page_element_vue.style.display="none"
130+
let Contact_page_element_vue=document.getElementById("Contact_page_element_vue")
131+
Contact_page_element_vue.style.display="block"
132+
}}>Contact Page</button>
133+
</div>
134+
<div id="About_page_element_vue" style={{display:"none"}}>
135+
<p>This is About page</p>
136+
<button onClick={()=>{
137+
let Home=document.getElementById("Home_page_element_vue")
138+
Home.style.display="block"
139+
let About_page_element_vue=document.getElementById("About_page_element_vue")
140+
About_page_element_vue.style.display="none"
141+
let Contact_page_element_vue=document.getElementById("Contact_page_element_vue")
142+
Contact_page_element_vue.style.display="none"
143+
}}>Home Page</button>
144+
<button onClick={()=>{
145+
let Home=document.getElementById("Home_page_element_vue")
146+
Home.style.display="none"
147+
let About_page_element_vue=document.getElementById("About_page_element_vue")
148+
About_page_element_vue.style.display="none"
149+
let Contact_page_element_vue=document.getElementById("Contact_page_element_vue")
150+
Contact_page_element_vue.style.display="block"
151+
}}>Contact Page</button>
152+
</div>
153+
<div id="Contact_page_element_vue" style={{display:"none"}}>
154+
<p>This is Contact page</p>
155+
<button onClick={()=>{
156+
let Home=document.getElementById("Home_page_element_vue")
157+
Home.style.display="block"
158+
let About_page_element_vue=document.getElementById("About_page_element_vue")
159+
About_page_element_vue.style.display="none"
160+
let Contact_page_element_vue=document.getElementById("Contact_page_element_vue")
161+
Contact_page_element_vue.style.display="none"
162+
}}>Home Page</button>
163+
<button onClick={()=>{
164+
let Home=document.getElementById("Home_page_element_vue")
165+
Home.style.display="none"
166+
let About_page_element_vue=document.getElementById("About_page_element_vue")
167+
About_page_element_vue.style.display="block"
168+
let Contact_page_element_vue=document.getElementById("Contact_page_element_vue")
169+
Contact_page_element_vue.style.display="none"
170+
}}>About Page</button>
171+
</div>
172+
</BrowserWindow>
173+
113174
### Summary:
114175

115176
Vue Router is a powerful tool for managing navigation and state in Vue.js SPAs. It allows you to define routes, navigate between views, pass parameters dynamically, and implement navigation guards for more control over your application's flow. Understanding Vue Router is essential for building robust single-page applications with Vue.js.

‎docs/Vue.js/StateManagement.md

+15
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,21 @@ export default {
121121
</script>
122122
```
123123

124+
<BrowserWindow>
125+
<div>
126+
<p>Count: <span id="single_count">0</span></p>
127+
<p>Double Count: <span id="double_count">0</span></p>
128+
</div>
129+
<button onClick={()=>{
130+
let span=document.getElementById("single_count")
131+
span.textContent=Number(span.textContent)+1
132+
}}>single Increment</button>
133+
<button onClick={()=>{
134+
let span=document.getElementById("double_count")
135+
span.textContent=Number(span.textContent)+2
136+
}}>Double Increment</button>
137+
</BrowserWindow>
138+
124139
### Conclusion
125140

126141
State management in Vue.js is a nuanced topic that evolves with the complexity of applications. For simpler cases, local component state suffices, while Vuex provides a robust solution for larger, more complex applications needing centralized state management. Understanding these concepts and choosing the right approach based on your application's needs is crucial for building scalable and maintainable Vue.js applications.

‎docs/Vue.js/Two-WayDataBinding.md

+8
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,14 @@ Two-way data binding is a feature in Vue.js (and other frameworks like Angular)
6060
</script>
6161
```
6262

63+
<BrowserWindow>
64+
<input id="vue_two_way" type="text" placeholder="Type Something" onChange={(e)=>{
65+
let two_way_op=document.getElementById("two_way_op")
66+
two_way_op.textContent=e.target.value
67+
}} />
68+
<p id="two_way_op">Type something</p>
69+
</BrowserWindow>
70+
6371
In this example:
6472
- The parent component (`ParentComponent.vue`) passes `parentData` to the child component (`ChildComponent.vue`) using `v-model`.
6573
- The child component receives `value` as a prop and emits an `input` event to update `parentData` in the parent component.

0 commit comments

Comments
 (0)