在html中用script引入Vue3库

  1. <script src="https://unpkg.com/vue@next"></script>

一个简单的计数器

  1. <body>
  2.   <div id="root"></div>
  4.   <script>
  5.     Vue.createApp({
  6.       data() {
  7.         return {
  8.           content: 1
  9.         }
  10.       },
  11.       mounted() {
  12.         setInterval(() => {
  13.           this.content += 1
  14.         }, 1000)
  15.       },
  16.       template: '<div>{{content}}</div>'
  17.     }).mount('#root')
  18.   </script>
  19. </body>

反转字符串

  1. Vue.createApp({
  2.   data() {
  3.     return {
  4.       content: 'hello world'
  5.     }
  6.   },
  7.   methods: {
  8.     handleBtnClick() {
  9.       this.content = this.content.split('').reverse().join('')
  10.     }
  11.   },
  12.   template: `
  13. <div>{{content}}</div>
  14. <button v-on:click="handleBtnClick">反转</button>
  15. `
  16. }).mount('#root')

显示或隐藏

  1. Vue.createApp({
  2.   data() {
  3.     return {
  4.       show: true
  5.     }
  6.   },
  7.   methods: {
  8.     handleBtnClick() {
  9.       this.show = !this.show
  10.     }
  11.   },
  12.   template: `
  13. <div v-if="show">hello</div>
  14. <button v-on:click="handleBtnClick">显示/隐藏</button>
  15. `
  16. }).mount('#root')

v-model数据双向绑定

  1. Vue.createApp({
  2.   data() {
  3.     return {
  4.       list: [],
  5.       inputValue: ''
  6.     }
  7.   },
  8.   methods: {
  9.     handleBtnClick() {
  10.       this.list.push(this.inputValue)
  11.       this.inputValue = ''
  12.     }
  13.   },
  14.   template: `
  15. <input v-model="inputValue">
  16. <button v-on:click="handleBtnClick">新增</button>
  17. <ul>
  18. <li v-for="(item, index) of list">{{item}} {{index}}</li>
  19. </ul>
  20. `
  21. }).mount('#root')

组件

  1. <script>
  2.     const app = Vue.createApp({
  3.       data() {
  4.         return {
  5.           list: [],
  6.           inputValue: ''
  7.         }
  8.       },
  9.       methods: {
  10.         handleBtnClick() {
  11.           this.list.push(this.inputValue)
  12.           this.inputValue = ''
  13.         }
  14.       },
  15.       template: `
  16.           <input v-model="inputValue">
  17.           <button v-on:click="handleBtnClick">新增</button>
  18.           <ul>
  19.             <todo-list v-for="(item, index) of list" 
  20.                        v-bind:index="index" 
  21.                        v-bind:content="item"/>
  22.           </ul>
  23.           `
  24.     })
  26.     app.component('todo-list', {
  27.       props: ['index', 'content'],
  28.       template: `<li>{{index}}--{{content}}</li>`
  29.     })
  31.     app.mount('#root')
  32.   </script>