Vue下載及安裝
阿偉的第一個vue代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 v-cloak 能夠解決插值表達式的閃爍問題 -->
<p v-cloak>+++++++++++++++{{ msg }}</p>
<h4 v-text="msg">=============</h4>
<!-- 默認 v-text 是沒有閃爍問題的，會覆蓋元素中原本的內容，但插值表達式只會替換自己的佔位符，不會把整個元素的內容清空 -->
<div v-text="msg2"></div>
<!-- v-html 會將文本解析成html，也會覆蓋原本的內容 -->
<div v-html="msg2"></div>
<!-- v-bind 是vue中，提供的用於綁定屬性的指令 -->
<input type="button" value="按鈕" v-bind:title="mytitle + '123'">
<!-- v-bind 簡寫形式-->
<input type="button" value="按鈕" :title="mytitle + '123'">
<!-- v-on：事件綁定機制 -->
<input type="button" value="按鈕" v-on:click="show">
<!-- v-on 簡寫形式 -->
<input type="button" value="按鈕" @click="show">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'歡迎學習Vue',
msg2:'<h1>哈哈哈哈哈哈哈哈哈</h1>',
mytitle:'這是一個自己定義的title'
},
methods:{//methods中定義了當前vue實例所有可用的方法
show:function () {
alert('hello')
}
}
})
</script>
</body>
</html>
阿偉的第二個代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 循環-->
<li v-for="dog in dogs"> {{dog}} </li>
<!-- 帶索引的循環，注意參數的順序是（value，key）-->
<li v-for="(dog,i) in dogs">{{ dog }} 是第 {{i}} 個</li>
</ul>
<hr>
<ul>
<!-- 輸出1-10-->
<li v-for="n in 10"> {{n}} </li>
<!-- 輸出0-9-->
<li v-for="n in 10"> {{n-1}} </li>
</ul>
<hr>
<p>自從你打開這個頁面，已經過了 {{seconds}} 秒。</p>
<hr>
<!--雙向數據綁定 用 v-model !!! -->
<input type="text" v-model="inputText">
<p>inputText: {{ inputText }}</p>
</div>
<script>
new Vue({
el:'#app',
data: {
dogs: ['a','b','c','d'],
seconds:0,
inputText:'initial value'
},
created(){
setInterval(()=>{
this.seconds++;
},1000);
}
});
</script>
</body>
</html>
阿偉的第三個代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" :value="inputText" value="initial value">
<p>inputText: {{ inputText }}</p>
<hr>
<label><input type="radio" v-model="value" value="一">一</label>
<label><input type="radio" v-model="value" value="二">二</label>
<label><input type="radio" v-model="value" value="三">三</label>
<p>選中的 value 值爲 {{value}}</p>
<hr>
<ul>
<li v-for="number in filterPositive(numbers)"> {{ number }} </li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data: {
inputText:'',
value:'一',
numbers:[-5,0,2,-1,1,0,5]
},
methods:{
//過濾掉所有負數
filterPositive(numbers){
return numbers.filter((number) => number >= 0);
}
}
});
</script>
</body>
</html>