vue基础代码第一篇

  1. 1创建一个基本的Vue应用

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
  1. 2在Vue组件中使用数据绑定




import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

  1. 3在Vue组件中使用计算属性




import { defineComponent, computed } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});

  1. 4在Vue组件中使用条件渲染




import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!',
      showMessage: true
    };
  }
});

  1. 5在Vue组件中使用列表渲染




import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
});

你可能感兴趣的:(vue.js,javascript,vue.js,前端)