vue使用更少的示例

　　介绍

这篇文章主要介绍vue使用更少的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>依赖下载

1,首先使用npm下载依赖;

 npm安装,减少储蓄less-loader

2,安装完成后检查是否安装成功;

lessc - v

3,如果安装成功后,会显示安装成功后的版本;

vue使用更少的示例

<强>引用方法

1,在主要。js 

从& # 39;进口少少# 39;
　　Vue.use(少)

2,然后创建一个。vue文件我们开始玩耍了,

注意:独立的vue文件需要引入少

& lt;风格lang=發ess"祝辞& lt;/style>

<强>开始使用

1,少中变量的使用;

在少,允许我们使用以变量的形式来定义,定义方式:@k: v;使用方式:@k;

& lt; p类=癰ox"祝辞& lt;/p> 　　 　　& lt;风格lang=發ess"祝辞 　　@color:红色; 　　@k: 100 px; 　　.box { 　　宽度:@k; 　　高度:@k; 　　背景:@color; 　　} 　　& lt;/style>

此时就会有一个宽100像素,高100像素,背景红色的正方形显示在页面上了;

vue使用更少的示例

2,字符串拼接变量使用方式;

& lt; p类=癰ox1"祝辞& lt;/p> 　　 　　& lt;风格lang=發ess"scoped> 　　@img: & # 39;。/img/& # 39;; 　　@k: 100 px; 　　.box1 { 　　宽度:@k; 　　高度:@k; 　　背景:url (“@ {img} 1. png") 　　} 　　& lt;/style>

注意:路径需要用““包裹,@ {img}这种凡是把变量引进来才能生效;

vue使用更少的示例

3,多层嵌套+变量计算,

& lt; p类=癰ox1"比; 　　类& lt; p=癰ox2"祝辞 　　类& lt; p=癰ox3"祝辞& lt;/p> 　　& lt;/p> 　　& lt;/p> 　　 　　& lt;风格lang=發ess"祝辞 　　@k: 100 px; 　　.box1 { 　　宽度:@k; 　　高度:@k; 　　背景:红色; 　　.box2 { 　　宽度:@k/2; 　　高度:@k/2; 　　背景:绿色; 　　.box3 { 　　宽度:@k/3; 　　高度:@k/3; 　　背景:蓝色; 　　} 　　} 　　} 　　& lt;/style>

可以看的到,可减少以嵌套使用,让我们一次就可以看清楚css结构;除了嵌套使用,有没有发现他的计算才是真正强大的地方呢?

vue使用更少的示例

4,混合=函数

& lt; p类=癰ox1"在我是box1

　　类& lt; p=癰ox2"在我是box2

　　 　　& lt;风格lang=發ess"祝辞//定义一个函数; 　　@ test (@color:红色:14 px) { 　　背景:@color; 　　字体大小:@; 　　} 　　.box1 {//不传参,使用默认的; 　　test () 　　} 　　.box2 {//给函数传参; 　　test (@color:绿色,@:30 px) 　　} 　　& lt;/style>

vue使用更少的示例

5匹配模式

& lt; p类=癰ox"祝辞& lt;/p>//定义的css 　　& lt;风格lang=發ess"祝辞 　　@color, .sjx (@ _ @) { 　　宽度:0; 　　高度:0; 　　边界:@固体@color; 　　边框颜色:透明; 　　}//左边三角形 　　.sjx (l, @color, @) { 　　border-left-color: @color; 　　}//上边三角形 　　.sjx (t @color @) { 　　border-top-color: @color; 　　}//右边三角形 　　.sjx (r, @color, @) { 　　border-right-color: @color; 　　}//左边三角形 　　.sjx (b @color @) { 　　border-bottom-color: @color; 　　}//这里匹配调用 　　.box { 　　.sjx (r,红色,20 px) 　　} 　　& lt;/style>

盒匹配的是t(上),也就是上

vue使用更少的示例

盒匹配b(按键),就是下;

vue使用更少的示例

总结一下匹配模式就好比是js中的开关语句,输入的是什么就显示什么,不过感觉么啥用;

7,颜色函数

& lt; p>默认红色& lt;/p> 　　& lt; p>默认绿色& lt;/p> 　　& lt; ul> 　　李& lt; li & lt; v=拔以?“在测试& lt;/li> 　　& lt;/ul> 　　& lt; span>混合& lt;/span> 　　 　　& lt;风格lang=發ess"scoped> 　　* { 　　填充:0; 　　保证金:0; 　　} 　　@color:红色; 　　@color1:绿色; 　　p: nth-child (1) { 　　背景:@color; 　　}; 　　p: nth-child (2) { 　　背景:@color1; 　　}; 　　ul { 　　list-style:没有; 　　李:nth-child (1) { 　　背景:减轻(@color, 50%); 　　} 　　李:nth-child (2) { 　　背景:变黑(@color, 50%); 　　} 　　李:nth-child (3) { 　　背景:饱和(@color, 50%); 　　} 　　李:nth-child (4) { 　　背景:稀释(@color, 50%); 　　} 　　李:nth-child (5) { 　　背景:自旋(@color, 50%); 　　} 　　李:nth-child (6) { 　　背景:自旋(@color, 50%); 　　} 　　} 　　跨度{ 　　背景:混合(@color @color1); 　　} 　　& lt;/style>

vue使用更少的示例