vue从入门到进阶的30个vue代码示例

最新推荐文章于 2024-04-26 17:54:13 发布
最新推荐文章于 2024-04-26 17:54:13 发布
阅读量1k 收藏 10
点赞数 31
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45914628/article/details/136159083
版权

全文链接

  1. 创建一个基本的Vue应用
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
  1. 在Vue组件中使用数据绑定
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
</script>
  1. 在Vue组件中使用计算属性
<template>
  <div>{{ reversedMessage }}</div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});
</script>
  1. 在Vue组件中使用条件渲染
<template>
  <div v-if="showMessage">{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!',
      showMessage: true
    };
  }
});
</script>
  1. 在Vue组件中使用列表渲染
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script lang="ts">
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' }
      ]
    };
  }
});
</script>
  1. 在Vue组件中使用事件处理
<template>
  <button @click="incrementCounter">{{ counter }}</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const counter = ref(0);

    const incrementCounter = () => {
      counter.value++;
    };

    return {
      counter,
      incrementCounter
    };
  }
});
</script>
  1. 在Vue组件中使用表单绑定
<template>
  <input v-model="message" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('');

    return {
      message
    };
  }
});
</script>
  1. 在Vue组件中使用组件通信（父子组件通信）
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="message" @updateMessage="updateMessage" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('');

    const updateMessage = (newMessage: string) => {
      message.value = newMessage;
    };

    return {
      message,
      updateMessage
    };
  }
});
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <input v-model="inputMessage" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, emit } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const inputMessage = ref('');

    const sendMessage = () => {
      emit('updateMessage', inputMessage.value);
    };

    return {
      inputMessage,
      sendMessage
    };
  }
});
</script>
  1. 在Vue组件中使用组件通信（兄弟组件通信）
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent1 @updateMessage="updateMessage" />
    <ChildComponent2 :message="message" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

export default defineComponent({
  components: {
    ChildComponent1,
    ChildComponent2
  },
  setup() {
    const message = ref('');

    const updateMessage = (newMessage: string) => {
      message.value = newMessage;
    };

    return {
      message,
      updateMessage
    };
  }
});
</script>

<!-- ChildComponent1.vue -->
<template>
  <div>
    <input v-model="inputMessage" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, emit } from 'vue';

export default defineComponent({
  setup() {
    const inputMessage = ref('');

    const sendMessage = () => {
      emit('updateMessage', inputMessage.value);
    };

    return {
      inputMessage,
      sendMessage
    };
  }
});
</script>

<!-- ChildComponent2.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  }
});
</script>
  1. 在Vue组件中使用路由
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
  1. 在Vue组件中使用状态管理（Vuex）
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      counter: 0
    };
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  },
  actions: {
    incrementCounter({ commit }) {
      commit('increment');
    }
  },
  getters: {
    counterSquared(state) {
      return state.counter ** 2;
    }
  }
});

export default store;
  1. 在Vue组件中使用异步请求（axios）
import axios from 'axios';

const response = await axios.get('/api/data');
const data = response.data;
  1. 在Vue组件中使用条件样式绑定
<template>
  <div :class="{ 'active': isActive }"></div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isActive = ref(true);

    return {
      isActive
    };
  }
});
</script>

<style>
.active {
  background-color: blue;
}
</style>
  1. 在Vue组件中使用条件样式绑定（多个样式）
<template>
  <div :class="[isActive ? 'active' : '', isHighlighted ? 'highlighted' : '']"></div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const isActive = ref(true);
    const isHighlighted = ref(false);

    return {
      isActive,
      isHighlighted
    };
  }
});
</script>

<style>
.active {
  background-color: blue;
}

.highlighted {
  color: yellow;
}
</style>
  1. 在Vue组件中使用条件样式绑定（动态类名）
<template>
  <div :class="className"></div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const isActive = ref(true);
    const isHighlighted = ref(false);

    const className = computed(() => {
      let classes = '';

      if (isActive.value) {
        classes += 'active ';
      }

      if (isHighlighted.value) {
        classes += 'highlighted ';
      }

      return classes.trim();
    });

    return {
      isActive,
      isHighlighted,
      className
    };
  }
});
</script>

<style>
.active {
  background-color: blue;
}

.highlighted {
  color: yellow;
}
</style>
  1. 在Vue组件中使用条件样式绑定（内联样式）
<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const textColor = ref('blue');
    const fontSize = ref(16);

    return {
      textColor,
      fontSize
    };
  }
});
</script>
  1. 在Vue组件中使用动画
<template>
  <transition name="fade">
    <div v-if="show">Hello Vue!</div>
  </transition>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const show = ref(true);

    return {
      show
    };
  }
});
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
  1. 在Vue组件中使用动态组件
<template>
  <component :is="currentComponent"></component>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default defineComponent({
  components: {
    ComponentA,
    ComponentB
  },
  setup() {
    const currentComponent = ref('ComponentA');

    return {
      currentComponent
    };
  }
});
</script>
  1. 在Vue组件中使用插槽
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>Header</h1>
      </template>
      <template v-slot:default>
        <p>Content</p>
      </template>
      <template v-slot:footer>
        <footer>Footer</footer>
      </template>
    </ChildComponent>
  </div>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
  1. 在Vue组件中使用动态插槽
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:default="slotProps">
        <p>{{ slotProps.message }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});
</script>
  1. 在Vue组件中使用混入
const myMixin = {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
};

export default defineComponent({
  mixins: [myMixin]
});
  1. 在Vue组件中使用过滤器
<template>
  <div>{{ message | uppercase }}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Hello Vue!');

    return {
      message
    };
  },
  filters: {
    uppercase(value: string) {
      return value.toUpperCase();
    }
  }
});
</script>
  1. 在Vue组件中使用自定义指令
<template>
  <div v-my-directive>Custom Directive</div>
</template>

<script lang="ts">
import { defineComponent, DirectiveBinding } from 'vue';

export default defineComponent({
  directives: {
    'my-directive': {
      mounted(el: HTMLElement, binding: DirectiveBinding) {
        el.style.color = binding.value;
      }
    }
  }
});
</script>
  1. 在Vue组件中使用懒加载
const Home = defineAsyncComponent(() => import('./views/Home.vue'));
  1. 在Vue组件中使用错误处理
import { onErrorCaptured } from 'vue';

onErrorCaptured((error, vm, info) => {
  console.error(error, vm, info);
});
  1. 在Vue组件中使用自定义事件
<template>
  <button @click="incrementCounter">{{ counter }}</button>
</template>

<script lang="ts">
import { defineComponent, ref, emit } from 'vue';

export default defineComponent({
  setup() {
    const counter = ref(0);

    const incrementCounter = () => {
      counter.value++;
      emit('counter-updated', counter.value);
    };

    return {
      counter,
      incrementCounter
    };
  }
});
</script>
  1. 在Vue组件中使用渲染函数
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent, h } from 'vue';

export default defineComponent({
  setup() {
    const message = 'Hello Vue!';

    return {
      message
    };
  },
  render() {
    return h('div', this.message);
  }
});
</script>
  1. 在Vue组件中使用生命周期钩子
<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Hello Vue!');

    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {
      message
    };
  }
});
</script>
  1. 在Vue组件中使用依赖注入
const MyPlugin = {
  install(app) {
    app.provide('myService', {
      message: 'Hello Vue!'
    });
  }
};

createApp(App).use(MyPlugin).mount('#app');
  1. 在Vue组件中使用单元测试
import { shallowMount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallowMount(MyComponent);
    expect(wrapper.html()).toContain('Hello Vue!');
  });
});
温暖前端
关注
  • 31
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端案例-29 Vue基础语法案例汇总
KathyLJQ的博客
06-15 303
模板语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip.
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇
06-20
本课程主要讲解vue实例常用属性和方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间的通信、使用axios发送http请求、使用Vue Router实现路由控制，使用webpack打包工具的用法、ES6的语法、webpack与各种插件的配合使用、Vue cli脚手架的搭建、Element UI的应用、Vuex的应用、Mock和Easymock的应用.
vue.js官方示例
05-13
vue.js 官方示例
vue.js经典实例代码(持续更新中~）
GreenBark
03-20 6767
按照传统，首先输出hello world. 1.数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> <script src="https://cdn.st...
VUE入门+5个小案例
热门推荐
Beyondczn的博客
02-23 3万+
本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。 一、Vue基础 1.第一个Vue程序 步骤： 引入vue开发环境 <script sr.
vue的基础指令演示代码及简单案例
CHEN的博客笔记
01-10 1416
主要是通过演示不同指令在代码中的使用来增进我们对知识点的理解，该篇文章仅供学习参考
vue的基本属性及其代码示例（十分钟带你学会Vue）
weixin_52859229的博客
04-11 835
计算属性：可以理解为能够在里面写一些计算逻辑的属性。作用：1.减少模板中的计算逻辑。2.数据缓存。当我们的数据没有变化时，不再执行计算过程。3.依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局的数据。
Vue模板语法（一）
xiaoyi215的博客
09-17 330
Vue模板语法（一） 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} ...
前端vue入门(纯代码)03
m0_62003092的博客
06-05 300
补：Vue2生命周期在Vue中，使用v-bind:style 动态绑定元素的内联样式 对象语法： 的对象语法---->简写： 样式名如果有-，则改成驼峰式命名。指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。 简写=》 ​ **1、：**在Vue实例创建之前 ，其实应该是说 先初始化生命周期，将生命周期定义在 Vue 实例中（生命周期函数有多少个，都叫啥，什么时候调用这些生命周期），然后接着 Vue 内部自带的事件修饰符（例如：once）定义，
前端vue入门(纯代码)05
m0_62003092的博客
06-11 1121
5.props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。【props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。3、通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。3.如果props中的属性和data中的属性相同，那么显示的为props中的属性，
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
Vue框架入门及进阶
02-22
Vue开发指南，适合入门和进阶。详细介绍了vue的基础知识和进阶知识。
vue实战入门进阶篇：从零开始实现网站后台实例
05-05
vue实战入门进阶篇：从零开始实现网站后台实例，使用vue+elementui实现网站管理系统后台管理界面框架搭建，实现首页、新闻、访问记录、内容发布、系统管理等界面的增删改查功能。
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 671
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 286
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 314
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 374
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue.js全家桶 零基础入门到进阶项目实战 pdf
01-08
Vue.js全家桶是指Vue.js框架及其相关的生态工具，包括Vue Router、Vuex、Vue CLI等。它们共同构成了一整套丰富的前端开发工具。如果你想从零基础开始学习Vue.js全家桶，可以通过阅读《Vue.js全家桶 零基础入门到进阶项目实战pdf》这本书来快速掌握相关知识。 这本书首先会介绍Vue.js框架的基本概念和语法，以及如何构建简单的Vue应用程序。然后，逐步深入介绍Vue Router和Vuex的使用方法，让你可以更好地管理Vue应用的路由和状态。除此之外，还会介绍Vue CLI的使用，让你能够更高效地创建和部署Vue项目。 在掌握了这些基础知识之后，这本书还会通过一些实际项目来帮助你深入理解Vue.js全家桶的应用。通过实战项目，你可以学会如何构建复杂的交互式应用程序，以及如何使用Vue.js全家桶来进行数据管理和页面导航。 总的来说，《Vue.js全家桶 零基础入门到进阶项目实战pdf》这本书是一本适合零基础入门的Vue.js初学者的教程，通过学习它，你可以快速进入Vue.js的世界，并通过实际项目的实战来提升自己的技能水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温暖前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值