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>
原文地址:http://www.cnblogs.com/caroline2016/p/16905694.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性