參考文章
💓使用vue ,express, ejs 結合node.js，實作一個MVC架構簡易網頁
Vue教學
── Root Directory
├── test.html
├── index.css
├── index.js
└── vue.js
此作品不需要server，可以直接開啟!
請參考裡面的語法，自己實做看看~
👉裡面index.js為javascript的語法，若有時間也可以試著把它改成vue的語法。
因為在vue裡面寫function時，也會用到一定程度的javascript，
所以建議javascript要先學好，再來學vue。
關注重點是:
v-model, v-if, v-else, v-on:click的寫法，
test.html
<html>
<head>
<title>Robert節點存取示範</title>
<link href="index.css" rel="stylesheet">
<script src="https://unpkg.com/vue@3.3.0/dist/vue.global.js"></script>
</head>
<body>
<div id ="hi_text"><b>你好!text</b></div>
<div id ="hi_html"><b>你好!html</b></div>
<input type="button" value="hi.innerText" id="innerText"/>
<input type="button" value="hi.innerHTML" id="innerHTML"/>
<a href="http://www.w3cschool.cc">w3cschool.cc</a>
<a href="http://www.disney.com" cuteQ="">disney.com</a>
<a href="http://www.wikipedia.org" cuteQ="">wikipedia.org</a>
<button class="click_btn" >點我</button>
<ul id="box">
<li class="a">上天保佑我</li>
</ul>
<div class="main">
<p>hello!</p>
<p id="cha">change!</p>
</div>
<input type="text" class="txt" value="你好嗎?">
<select class="list">
<option value="高雄市">高雄市</option>
<option value="台北市">台北市</option>
</select>
<button class="go">GO</button>
<div id="app">
<p>input 元素：
<input v-model="message" placeholder="上蒼保佑，编辑我……">
 input 表单消息是: {{ message }}
</p>
<p style="white-space: pre">textarea 元素：
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
 textarea 表单消息是:<br>{{ message2 }}
</p>
</div>
<div id="app2">
<p>单个复选框：
<input type="checkbox" value="QQQQQ" v-model="checked">
<label>{{ checked }} + {{ checked_name }}+ {{ lotus_i }}</label></p>
<button class="click_lotus" v-on:click="checked_nameClick(), add_lotus_i()">click</button> 
<span v-if="lotus_i%2===0">餘數為0</span>
<span v-else>餘數為1</span>
<p>多个复选框：
<input type="checkbox" value="Runoob" v-model="checkedNames">
<label>Runoob</label>
<input type="checkbox" value="Google" v-model="checkedNames">
<label>Google</label>
<input type="checkbox" value="Taobao" v-model="checkedNames">
<label>taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span></p>
</div>
<script src="index.js"></script>
<script src="vue.js"></script>
</body>
</html>
vue.js
const app = {
data() {
return {
message: '',
message2: '上天保佑，事事順心\nhttps://www.GodBlissMe.com'
}
}
}
Vue.createApp(app).mount('#app')
const app2 = {
data() {
return {
checked : true,
checkedNames: [],
checked_name: "A蓮花",
lotus_i: 0
}
},
methods: {
checked_nameClick () {
if (this.lotus_i%2===0){
this.checked_name="B蓮花";
}
else{
this.checked_name="A蓮花";
}
},
add_lotus_i () {
this.lotus_i++;
}
}
}
Vue.createApp(app2).mount('#app2')
index.css
a[cuteQ] {
background-color: lightcoral;
}
button {
background-color: rgb(76, 69, 138); /* Green */
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.click_btn {
background-color: #458a47; /* Green */
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.click_lotus {
background-color: #411111; /* Green */
border: 1px;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
color: rgb(65, 3, 3);
}
li {
font-size: 20px;
color: rgb(65, 3, 3);
}
index.js
const main = document.querySelectorAll('.main p');
main[0].innerHTML = `<h1 class="header"> qqq</h1>`;
main[1].innerHTML = `<h1 class="header"> 標題 </h1>`;
let click_innerHTML = document.getElementById("innerHTML")
click_innerHTML.addEventListener("click",function(){
alert(document.getElementById('hi_text').innerHTML)
})
let click_innerText = document.getElementById("innerText")
click_innerText.addEventListener("click",function(){
alert(document.getElementById('hi_html').innerText)
})
let cc = 0
let click_btn = document.querySelector('.click_btn');
click_btn.addEventListener("click",function(){
myFunction(cc++);
});
let go_btn = document.querySelector('.go');
go_btn.addEventListener("click",function(){
show();
});
const txt = document.querySelector('.txt');
main[0].innerHTML = txt.getAttribute("value")
const list = document.querySelector('.list');
list.value = "台北市";
function myFunction(cc) {
let ul = document.querySelector('ul');
let node=document.createElement("li");
let textnode=document.createTextNode("God bliss me");
node.appendChild(textnode);
ul.appendChild(node);
let x = document.querySelectorAll("a[cuteQ]");
let i = 0;
if (cc%2===1){
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "yellow";
textnode=document.createTextNode(cc);
x[i].appendChild(textnode)
if (i===0){
button = document.createElement("button")
button.textContent ="yoyo"
button.classList.add("yoclass"+cc);
node=document.createElement("li");
textnode=document.createTextNode("第"+cc+"個，愛你");
node.appendChild(textnode);
node.appendChild(button)
ul.appendChild(node);
}
//要留意的是 如果 appendChild 使用時，append 上去的是一個已存在的 node 時，它會做的是"搬移"，而非複製。
//https://pjchender.dev/webapis/webapis-node-element-and-append-child/
}
let bb = 0
let bbb_btn = document.querySelector(".yoclass"+cc)
bbb_btn.addEventListener("click", function () {
if (bb%2===0){
//alert("up"+cc)
bbb_btn.textContent= "up"+cc
bbb_btn.style.backgroundColor="purple"
console.log("upbb:",bb)
}else{
//alert("down"+cc)
bbb_btn.textContent= "down"+cc
bbb_btn.style.backgroundColor="black"
console.log("downbb:",bb)
}
bb++
});
}else{
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "lightgreen";
textnode=document.createTextNode(cc);
x[i].appendChild(textnode)
if (i===0){
node=document.createElement("li");
textnode=document.createTextNode("第"+cc+"個，愛你");
node.appendChild(textnode);
ul.appendChild(node);
}
//要留意的是 如果 appendChild 使用時，append 上去的是一個已存在的 node 時，它會做的是"搬移"，而非複製。
//https://pjchender.dev/webapis/webapis-node-element-and-append-child/
}
}
}
function show(){
main[0].innerHTML = txt.value;
let ul = document.querySelector('ul');
let node=document.createElement("li");
let textnode=document.createTextNode(txt.value+" + "+list.value);
node.appendChild(textnode);
ul.appendChild(node);
}
沒有留言:
張貼留言
喜歡我的文章嗎? 喜歡的話可以留言回應我喔! ^^