1、
2、代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-block] {
display: none;
}
</style>
</head>
<body>
<h1>创建第一个Vue应用</h1>
<div id="app">
<p>currentTime1:{{currentTime1()}}</p>
<p>currentTime2:{{currentTime2}}</p>
<todo>
<todo-Title slot="todo-title" v-bind:title_temp_prop="title_data"></todo-Title>
<todo-items slot="todo-items" v-for="item_cur in items_data" v-bind:item_temp_prop="item_cur"></todo-items>
</todo>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component("todo", {
template: '<div>\n' +
' <slot name="todo-title"></slot>\n' +
' <ul>\n' +
' <slot name="todo-items"></slot>\n' +
' </ul>\n' +
'</div>'
});
Vue.component("todo-title", {
props: ["title_temp_prop"],
template: '<div>{{title_temp_prop}}</div>'
});
Vue.component("todo-items", {
props: ["item_temp_prop"],
template: '<li>{{item_temp_prop}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
message: "hello,message",
title_data: "标题列表",
items_data: ['java', 'linux', 'python'],
},
methods: {
currentTime1: function () {
return Date.now();
}
},
computed: {
currentTime2: function () {
this.message;
return Date.now();
}
}
});
</script>
</body>
</html>
