helloworld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 方法有用 -->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!-- 方法不生效 Vue未定义 -->
<!-- <script src="./vue.esm-browser.js" type="module"></script> -->
<!-- 方法有用 -->
<script src="./vue.global.js"></script>
</head>
<body>
<div id="counter">Counter: {{ counter }}</div>
<div id="bind-attribute">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转 Message</button>
</div>
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
<div id="conditional-rendering">
<span v-if="seen">现在你看到我了</span>
</div>
<div id="list-rendering">
<ol>
<li v-for="todo in todos">{{ todo.text }}</li>
</ol>
</div>
<div id="components-app" class="demo">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
const Counter = {
data() {
return {
counter: 0,
};
},
mounted() {
setInterval(() => {
this.counter++;
}, 1000);
},
};
Vue.createApp(Counter).mount("#counter");
const AttributeBinding = {
data() {
return {
message: "You loaded this page on " + new Date().toLocaleString(),
};
},
};
Vue.createApp(AttributeBinding).mount("#bind-attribute");
const EventHandling = {
data() {
return {
message: "Hello Vue.js!",
};
},
methods: {
reverseMessage() {
this.message = this.message.split("").reverse().join("");
},
},
};
Vue.createApp(EventHandling).mount("#event-handling");
const TwoWayBinding = {
data() {
return {
message: "Hello Vue!",
};
},
};
Vue.createApp(TwoWayBinding).mount("#two-way-binding");
const ConditionalRendering = {
data() {
return {
seen: true,
};
},
};
Vue.createApp(ConditionalRendering).mount("#conditional-rendering");
const ListRendering = {
data() {
return {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Build something awesome" },
],
};
},
};
Vue.createApp(ListRendering).mount("#list-rendering");
const ComponentsApp = {
data() {
return {
groceryList: [
{ id: 0, text: "Vegetables" },
{ id: 1, text: "Cheese" },
{ id: 2, text: "Whatever else humans are supposed to eat" },
],
};
},
};
const app = Vue.createApp(ComponentsApp);
app.component("todo-item", {
props: ["todo"],
template: `<li>{{ todo.text }}</li>`,
});
app.mount("#components-app");
</script>
</body>
</html>
标签：Vue,const,text,return,笔记,学习,vue3,createApp,message From： https://www.cnblogs.com/caroline2016/p/16905694.html