調慢瀏覽器加載網頁，Network ->Online-> Slow 3G
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<!-- v-cloak能夠解決插值表達式閃爍問題
v-text是沒有閃爍問題的 v-text會覆蓋元素中原本的內容，但是插值表達式不會把整個元素的內容清空
v-bind:是vue提供的用於綁定屬性的指令，可以寫合法的JS表達式
v-on提供事件綁定機制
-->
<div id="app">
<p v-clock>+++++++{{msg}}-------</p>
<h4 v-text="msg">========</h4>
<h1 v-html="msg2"></h1>
<!-- 也可以變量title+字符串 -->
<input type="button" value='按鈕' v-bind:title="mytitle+'123'">
<!-- 可以簡寫省略掉v-bind -->
<input type="button" value='按鈕':title="mytitle+'123'">
<input type="button" value="按鈕" v-on:click="show">
<!-- 縮寫 -->
<input type="button" value="按鈕" @click="show">
</div>
<script src="../lib/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>我是h1標籤</h1>',
mytitle:"這是一個title"
},
methods:{//這個methods屬性中定義了當前vue實例所有可用的方法
show:function(){
alert('你好');
}
}
})
</script>
</body>
</html>