Blogger Information
Blog 27
fans 1
comment 2
visits 90422
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
VUE行业术语解析
          
Original
619 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>1117作业</title>
  9. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  10. <!-- 实例演示vue中常用的术语与使用方式-->
  11. </head>
  12. <body>
  13. <!--1. 挂载点-->
  14. <div id="app">
  15. {{ name }}
  16. <button @click="obj($event)">点击显示方法</button>
  17. </div>
  18. <script>
  19. // 2. 应用实例
  20. const app = Vue.createApp({
  21. // 3. 根组件配置项
  22. data() {
  23. return{
  24. name:'李世民',
  25. hello:'hello,你好VUE!',
  26. }
  27. },
  28. // 方法
  29. methods :{
  30. obj (v) {
  31. console.log(this.hello);
  32. }
  33. },
  34. })
  35. // 4.根组件实例: 应用实例与挂载点进行绑定
  36. let vm = app.mount('#app')
  37. // 5. 响应式 :没有进行DOM操作,选择内容,也没有进行事件绑定,就可以更新内容,全靠vue
  38. vm.name = '赵云';
  39. vm.hello ='hello,响应式 VUE'
  40. </script>
  41. </body>
  42. </html>

运行结果

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:完成的不错, 继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!