vue練習
vue.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<div id="app-2">
<span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！ </span>
</div>
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{ todo.text }}</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉訊息</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<div id="app-7">
<ol>
<!--
現在我們為每個 todo-item 提供 todo 物件
todo 物件是變數，即其內容可以是動態的。
我們也需要為每個元件提供一個“key”，稍後再
作詳細解釋。
-->
<todo-item v-for="item in groceryList" v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
<script type="text/javascript">
var app = new Vue({
el : '#app',
data : {
message : 'Hello Vue!'
}
})
var app2 = new Vue({
el : '#app-2',
data : {
message : '頁面加載於 ' + new Date().toLocaleString()
}
})
var app3 = new Vue({
el : '#app-3',
data : {
seen : true
}
})
var app4 = new Vue({
el : '#app-4',
data : {
todos : [ {
text : '學習 JavaScript'
}, {
text : '學習 Vue'
}, {
text : '整個牛專案'
} ]
}
})
var app5 = new Vue({
el : '#app-5',
data : {
message : 'Hello Vue.js!'
},
methods : {
reverseMessage : function() {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el : '#app-6',
data : {
message : 'Hello Vue!'
}
})
// 定義名為 todo-item 的新元件
Vue.component('todo-item', {
props : [ 'todo' ],
template : '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el : '#app-7',
data : {
groceryList : [ {
id : 0,
text : '蔬菜'
}, {
id : 1,
text : '乳酪'
}, {
id : 2,
text : '隨便其它什麼人吃的東西'
} ]
}
})
</script>
</body>
</html>