<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue dom</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停查看绑定信息
</span>
</div>
<div id="app-3">
<span v-if="seen">
现在你能看到我
</span>
</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 type="text" v-model="message" />
</div>
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello world!"
}
})
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:"学习html"},
{text:"学习html"},
{text:"学习js"}
]
}
})
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:"你好 vue"
}
})
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>