<!doctype html>
<html lang="gbk">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My First VUE page</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h2>插入显示</h2>
<input type="text" v-model="message">
<p>{{message}}</p>
<p>{{message.toUpperCase()}}</p>
<p v-html="message"></p>
<h2>数据绑定</h2>
<div id="dynamicId"></div>
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
<a href="huangbaokang">黄宝康的网站</a>
<a :href="huangbaokang">黄宝康的网站</a>
<h2>js表达式</h2>
<p>{{number+1}}</p>
<p>{{ok?'YES':'NO'}}</p>
<p>{{info.split(' ').reverse().join(',')}}</p>
<p v-if="seen">看到我了吗</p>
<h2>事件绑定</h2>
<button v-on:click="doSomething">按钮</button>
<button @click="doSomething">按钮2</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:'<font color="red">huangbaokang</font>',
dynamicId:'2',
isButtonDisabled:true,
huangbaokang:'http://huangbaokang.com',
number:2,
ok:false,
info:'1 3 5',
seen:false,
attributeName:"href",
url:'http://www.baidu.com'
},
methods:{
doSomething(){
alert("doSomething");
}
}
})
</script>
</body>
</html>
解析之后的代码