vue中使用自定义注解（@log为例）

最新推荐文章于 2023-12-27 19:07:38 发布
最新推荐文章于 2023-12-27 19:07:38 发布
阅读量1.4k 收藏
点赞数
分类专栏： vue 文章标签： vue中使用@log vue中自定义函数 vue使用decorators
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sicily_winner/article/details/104198591
版权
本文档详细介绍了在 Vue 中如何使用自定义注解`@log`，包括开发步骤、依赖安装、类内容编写以及相关参考资料。通过示例展示了`@log`的安装和基础使用方法，引导读者理解并应用Vue中的装饰器。
摘要由CSDN通过智能技术生成

下面实战内容，是通过3个基本文件的基础上操作的，请自行下载！！！

             ㊯ 百度网盘分享

  • 二、开发步骤

1、jquery 安装

npm install jquery

2、es6 语法转换依赖安装

npm install babel-loader@7.1.5 babel-preset-es2015@7.0.0-bata.3 -S
或者：npm install -D babel-loader @babel/core @babel/preset-env webpack（使用上面报错的话）

3、本章节依赖安装

npm install --save-dev @babel/plugin-proposal-decorators -D
npm install --save-dev @babel/plugin-proposal-class-properties -D

4、webpack之loader添加（一般添加完依赖会自动添加plugins，请再检查一遍）


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  winner_corl
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
在 Vue 中使用注解（装饰器）

				
			

			

				

					palerock的博客
				

				

					09-27
					
					4252
					
				

			

		

		

			
				
在 Vue 中使用注解（装饰器）
Javascript 中的注解（装饰器）
谈及注解/装饰器，使用过 Java 或 Python 的同学一定会想到一种语法：@Annotate 或 @Decorator，虽然叫法不同，但本质上都是实现同样的功能，面向切面编程，使你所写的代码变得干净清爽，将一些复杂的逻辑隐藏在注解（装饰器）中。
但是，在 Javascript 的标准语法中，并没有类似的写法，如果想要实现类似的语法，那该怎么办呢？
由于 Javascript 也是一直在进步中，语法越来越丰富，不断有新的语法提案

			
		

	



                

              
                



	

		

			

				
					
Vue log工具类使用

				
			

			

				

					crazyZhangxl的博客
				

				

					04-20
					
					5694
					
				

			

		

		

			
				
1.简介
该文记录了vue中日志工具的使用，全局使用，生产环境隐藏log日志
2.使用
/**
 * 描述:日志帮助工具
 * @ClassName log
 * @Author apple
 * @Date 2019-04-20 21:12
 * @Version 1.0
 */

// 应用发布时为true,开发阶段为false
// 很轻松的取消日志
let isBuild = false;...

			
		

	



                


  
              

                


	

		

			

				
					
vue-log

				
			

			

				

					qq_35772366的博客
				

				

					03-12
					
					1072
					
				

			

		

		

			
				
<div class="log" style="position: fixed;top: 55px;font-size: 28px;">{{log}}</div>

			
		

	





	

		

			

				
					
vue自定义Log级别，用于调试与生产使用

				
			

			

				

					只因有你，在路上。。。
				

				

					03-13
					
					3228
					
				

			

		

		

			
				
通过封装自定义日志等级，在不同环境展示不同信息。


import { Toast } from 'mint-ui'
import config from '@/config'

/**
 * 1:ALL
 * 2:DEBUG
 * 3:INFO
 * 4:WARN
 * 5:ERROR  错误日志
 * 6:DEAL  需要处理
 * 7:FATAL 系统严重错误
 * @param param...

			
		

	



		

			
		



	

		

			

				
					
学习Vue.js一些用过的注解和常见注解及示例

					
最新发布

				
			

			

				

					wx133466的博客
				

				

					12-27
					
					1089
					
				

			

		

		

			
				
在应用程序的入口文件（通常是main.js），你需要导入router.js，并将其作为Vue实例的一个选项，你的Vue Router已经配置好了。Element是一款基于Vue.js的UI组件库，提供了丰富的UI组件和交互效果，可以帮助我们快速搭建漂亮、易用的Web应用界面。在Vue.js开发中，有一些常用的插件可以帮助你更高效地开发和优化你的应用程序。Vuetify：一个基于Vue.js的UI组件库，提供了丰富的可复用的组件，帮助你快速构建漂亮的界面。在Vue.js中使用Vue Router非常简单。

			
		

	





	

		

			

				
					
自定义切面基于注解@Aspect及语法详解

				
			

			

				

					qq_16957817的博客
				

				

					10-20
					
					2276
					
				

			

		

		

			
				
#mermaid-svg-J2hMQ23HEIwOJfqY .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-J2hMQ23HEIwOJfqY .label text{fill:#333}#mermaid-svg-J2hMQ23HEIwOJfqY .node rect,#mermaid-svg-J2hMQ23HEI

			
		

	





	

		

			

				
					
在 Vue2 Annotate 中通过 Annotate JS 生成自定义注解（面向切面编程）

				
			

			

				

					palerock的博客
				

				

					09-30
					
					776
					
				

			

		

		

			
				
在 Vue2 Annotate 中通过 Annotate JS 生成自定义注解（面向切面编程）

本文基于在了解 Vue2 Annotate 框架基本用法后的进阶使用技巧
Vue2 Annotate 简介地址：https://palerock.cn/articles/001JPDEjZ87
Vue2 Annotate 文档地址：https://palerock.cn/projects/006XvyfPS9e

为了快速生成自定义注解，我们需要用到 Annotate JS 框架 提供的几个注解:

@Surr

			
		

	





	

		

			

				
					
JUnit5学习之五：标签(Tag)和自定义注解，antdesignvue视频教程

				
			

			

				

					m0_63174529的博客
				

				

					11-08
					
					386
					
				

			

		

		

			
				
@SpringBootTest
@Slf4j
@Tag(“first”)
public class FirstTest {
@Test
@Tag(“easy”)
@Tag(“important”)
@DisplayName(“first-1”)
void first1Test() {
log.info(“first1Test”);
assertEquals(2, Math.addExact(1, 1));
}
@Test
@Tag(“easy”)
@DisplayName(“first-2”)
void f

			
		

	





	

		

			

				
					
vscode自定义vue代码段 (自定义注释片段带动态时间)

				
			

			

				

					敲之的博客
				

				

					06-18
					
					386
					
				

			

		

		

			
				
{
	"Print to vue temaplate": {
		"prefix": "vue-n",
		"body": [
			"<template>",
			"  <div class=\"wrapper\"></div>",
			"</template>",
			"",
			"<script>",
			"/*",
			" *@Author: 作者名",
			" *@Date: ${CURRENT_YEAR}-${CURRE.

			
		

	





	

		

			

				
					
Vue源码分析带注解Vue源码分析带注解

				
			

			

				

					03-21
				

			

		

		

			
				
Vue源码分析带注解

			
		

	





	

		

			

				
					
vue-source-annotation:Vue.js 2.2.4原始注解

				
			

			

				

					03-23
				

			

		

		

			
				
vue-source-annotation
 Vue.js 2.2.5原始注解
### history 2017.03.25源码2.2.4更新至2.2.5

			
		

	





	

		

			

				
					
Vue自定义组件

				
			

			

				

					乐于学习、乐于分享、乐于总结
				

				

					02-27
					
					1579
					
				

			

		

		

			
				
vue-component
		
		
		
		
         var vue;
         $(function(){
         	//自定义组件
         	Vue.component('custom-template',//组件名
         	   {
	         	props:['param'],//组件接受外部参数
	        	temp

			
		

	





	

		

			

				
					
vue的相关注解（2022-04-22学习笔记）

				
			

			

				

					Serena_tz的博客
				

				

					04-20
					
					1328
					
				

			

		

		

			
				
由vue管理的函数，一定不要写为箭头函数，会改变this的指向！简单的刷新会加载出来部分文件，强制刷新可以加载出完整的文件！一个容器只能被一个实例接管，前面的实例接管。实例不能接管两个容器，只显示前面那个。中的数据流向页面，页面中的数据也流向。单向的数据绑定，只能从。指定绑定容器的两种方法。

			
		

	





	

		

			

				
					
若依注解学习（一）@Log

				
			

			

				

					天真吖的博客
				

				

					09-18
					
					825
					
				

			

		

		

			
				
execute:参数为一个Task，该Task通过任务工厂AsyncFactory生产你要执行的任务·core中，core是ruoyi框架的核心代码，在aop中对操作进行处理，其中，会调用安全框架来。写在方法上，通过aop切面编程，在方法执行前、方法执行完、方法异常的时候做处理。common中，出现在公共模块，若出现在其他模块，极其容易出现模块相互依赖的问。在我们使用ruoyi的代码生成器的时候，在controller的每个方法出现。设置方法名，请求方式，根据Log上的参数设置信息。

			
		

	





	

		

			

				
					
RuoYi-Vue触发参数验证异常和自定义参数注解

				
			

			

				

					qq_63574410的博客
				

				

					11-26
					
					275
					
				

			

		

		

			
				
经过上面若依的分析，我们可以尝试自定义一个参数注解student_name里面不加数据报错。

			
		

	





	

		

			

				
					
@Log注解获取日志

				
			

			

				

					qq_41835813的博客
				

				

					01-20
					
					1万+
					
				

			

		

		

			
				
环境pom依赖



<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-aop</artifactId>
</dependency>


主类开启AOP


@EnableAspectJAutoProxy



Log


package com.entity;
import java.lan.

			
		

	





	

		

			

				
					
若依框架----源码分析（@Log）

				
			

			

				

					
				

				

					03-23
					
					4090
					
				

			

		

		

			
				
若依框架----源码分析（@Log）

			
		

	





	

		

			

				
					
# 解决：Vue 代码中 console.log() 无法输出问题

					
热门推荐

				
			

			

				

					m0_49772478的博客
				

				

					10-29
					
					1万+
					
				

			

		

		

			
				
解决：Vue 代码中 console.log() 无法输出问题
	在学习Vue的过程中，发现在使用console.log()的时候，在google浏览器检查时并不输出数据，还需要自己
手动在控制台输入自己的数据名称才可以显示！

  let person = {
            name:'张飒',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18
     

			
		

	





	

		

			

				
					
vue中如何使用自定义组件

				
			

			

				

					07-08
				

			

		

		

			
				
在 Vue 中使用自定义组件包括以下几个步骤：

1. 创建自定义组件：在 Vue 项目中创建一个.vue文件，其中包含组件的模板、样式和逻辑代码。例如，创建一个名为 "MyComponent.vue" 的文件。

2. 在需要使用自定义组件的地方，引入自定义组件。可以使用 import 语句或者直接在 Vue 实例中注册组件。

   - 使用 import 语句引入自定义组件：
     ```javascript
     import MyComponent from './MyComponent.vue';
     ```

   - 在 Vue 实例中注册组件：
     ```javascript
     Vue.component('my-component', MyComponent);
     ```

3. 在 Vue 模板中使用自定义组件。在模板中使用组件的方式是将组件的标签作为普通 HTML 标签使用，并传递相应的属性和数据。

   ```html
   <template>
     <div>
       <my-component :prop1="value1" :prop2="value2"></my-component>
     </div>
   </template>
   ```

   注意，这里的 "my-component" 是组件标签名，需要与注册组件时的名称保持一致。

4. 在自定义组件中，可以通过 props 接收传递给组件的数据，并在组件内部进行处理和渲染。

   ```html
   <template>
     <div>
       <h1>{{ prop1 }}</h1>
       <p>{{ prop2 }}</p>
     </div>
   </template>

   <script>
   export default {
     props: ['prop1', 'prop2'],
     // 组件的其他逻辑代码
   }
   </script>
   ```

这样，你就可以在 Vue 项目中使用自定义组件了。记得在需要使用组件的地方引入自定义组件，并在模板中使用组件的标签。同时，可以通过 props 向组件传递数据，组件内部可以通过 props 接收并使用这些数据。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值