VUE、、

最新推荐文章于 2024-08-08 15:28:54 发布
最新推荐文章于 2024-08-08 15:28:54 发布
阅读量130 收藏
点赞数
分类专栏： 复习 文章标签： vue.js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59841000/article/details/120193607
版权

一.Vue

1.1概述

是一个轻量级 渐进式的 前端框架
特点: 数据驱动 MVVM 组件化
好处: 封装了DOM操作元素的API

1.2入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue框架</title>
		<!-- 1. 引入外部的vue.js文件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2. 准备数据渲染区  {{插值表达式}}-->
		<div id="app">
			<h2>{{msg}}</h2>  
			<h1>{{name}}</h1>
		</div>
		{{msg}} <!-- 不是Vue指定的挂载点的范围,不能解析Vue代码 -->
		<!-- 3. 使用Vue准备数据 -->
		<script>
			// 3.1 创建Vue对象
			new Vue({
				//element的简称,即将把准备好的数据 渲染 到指定区域--挂载点
				//#app 是利用CSS的id选择器,选中了一个HTML元素
				el:"#app",
				data: {// 3.2 准备即将要在浏览器展示的数据
					msg:'hello vue~',
					name:"jack"
				}
			})
		</script>
	</body>
</html>

二.Vue语法

2.1基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的基础语法</title>
		<!-- 1.导入vue.js文件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.数据渲染区,利用插值表达式获取Vue准备好的数据 {{}}-->
		<div id="app">
			Vue运算符:
			加法:{{3+2}}
			减法:{{3-2}}
			乘法:{{3*2}}
			除法:{{3/2}}
			取余:{{3%2}}
			三元运算符:{{  1 > 2 ? 'yes':'no' }}
			<!-- 字符串操作: 求长度,拼接,截取 -->
			字符串:{{name}} 
			长度:{{name.length}} 
			拼接:{{name.concat(666)}}
			截取:{{name.substring(2)}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app",//指定挂载点,把数据展示在指定位置(利用了css选择器)
				data:{ //准备要展示的数据
					name:"jack"
				}
			})
		</script>
	</body>
</html>

2.2Vue的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的基础语法</title>
		<!-- 1.导入vue.js文件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.数据渲染区,利用插值表达式获取Vue准备好的数据 {{}}-->
		<div id="app">
			
			调用函数:{{save()}}  {{add(1,2)}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app",//指定挂载点,把数据展示在指定位置(利用了css选择器)
				data:{ //准备要展示的数据
					name:"jack"
				} ,
				methods:{ //添加方法
					save:function(){
						console.log(100);
					},
					add:function(a,b){
						console.log(a+b);
					}
				}
			})
		</script>
	</body>
</html>

2.3Vue解析各种形式的data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue解析各种形式的data</title>
		<script src="vue.js"></script><!--1. 引入vue.js文件 -->
	</head>
	<body>
		<p id="p1"> <!-- 2.准备了数据渲染区-->
			{{name}}
			获取对象的属性值:{{person.name}}  {{person.age}}
			调用对象的函数(必须有小括号的标志):
			{{person.eat()}}  {{person.sleep(10)}}
			<br />
			调用数组里的数据:{{arr}}  
			根据下标获取组里的数据:{{arr[0]}}
			{{arr[0].age}}
		</p>
		<script> <!-- 3.创建Vue对象-->
			new Vue({
				el:"#p1", //挂载点
				data:{//准备数据
					name:'jack',
					person:{ //data的数据准备一个js对象
						name:'rose',
						age:20,
						eat:function(){
							console.log(200);
						},
						sleep:function(a){
							console.log(a);
						}
					} , 
					arr : [ //data的数据准备一个js数组
						{
							name:"jack",
							age:20
						} ,
						{
							name:"rose",
							age:30
						}
					]
				}
			})
		</script>
	</body>
</html>

2.4Vue的data里定义函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue的data中写js函数</title>
		<!--1. 引入vue.js文件 -->
		<script src="vue.js"></script>
	</head>
	<body>
		 <!-- 2.准备了数据渲染区-->
		 <div id="app">
			{{msg}}
		 </div>
		 <!-- 3.创建Vue对象-->
		 <script>
			 new Vue({
				 el:"#app",//挂载点
				 // data:function(){//准备展示的数据
				 data(){//简写
					 return { //返回JS对象
						msg:'hello vue'
					 }
				 }
			 })
		 </script>
	</body>
</html>

三.Vue指令

3.1概述

使用方式: 就是在HTML的标签上,加一些v-的指令.
v-model: 实现数据驱动,双向绑定.
v-if: 用来判断,不满足判断条件就不展示
v-show: 用来判断,不满足判断条件就不展示(通过css实现)
v-else-if / v-else : 顺序的要求类似于java
v-cloak : 用来解决闪现问题(网页展示了插值表达式)
v-html: 获取数据,也可以解析HTML标签

3.2测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  Vue指令</title>
		<!-- 1.引入vue.js -->
		<script src="js/vue.js"></script>
		
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app" v-cloak>
			{{msg}} <br />
			{{msg}} <br />
			<!-- 
				2.1.  v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定属性上
				数据驱动,双向绑定: 改Model会影响View,改View会影响Model 
			-->
			<input type="text" v-model="msg" />
			<!-- 2.2. v-html指令可以解析数据,并识别HTML代码 -->
			<p v-html="msg"></p>
			<!-- 2.3. v-cloak指令解决插值表示的闪现问题 -->
			<!-- 2.4. v-if指令用来做判断,条件满足才展示,不满足就不展示 -->
			<p v-if="person.age>=18">成年人</p>
			<!-- 2.5. v-show指令也用来做判断,不满足的话,利用css控制着style="display: none;" -->
			<p v-show="person.age>=18">成年人</p>
			<!-- 2.6. v-else指令,组成顺序依次 if...else if...else -->
			<p v-if="type === 'A'">优秀</p>
			<p v-else-if="type === 'C'">中等</p>
			<p v-else-if="type === 'B'">良好</p>
			<p v-else>错误</p>
			<!-- 2.7. v-for指令用来循环,可以循环数组,类似于JS里的for...in语法,
				i表示遍历得到的数据,index是下标
			  -->
			<ol>
				<li v-for="i in arr">{{i}}</li>
			</ol>
			<ul>
				<li v-for="i,index in arr">数据是:{{i}} -> 下标是:{{index}}</li>
			</ul>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app", //挂载点
				data: {  //要被渲染的数据
					msg : '<h1>hello vue123</h1>',
					type: 'C' ,
					person:{
						age:10
					},
					arr : ['杨幂','迪乐热巴','Anglelababa']
				}
			})
		</script>
	</body>
</html>

四.Vue指令v-on v-bind

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试  Vue指令</title>
		
		<!-- 引入vue.js -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 渲染区 -->
		<div id="app">
			<!-- 1. v-on指令用来给HTML元素添加Vue事件,
					用:指定事件的触发方式v-on:可以简写成一个@
			 -->
			<button v-on:click="show()">点我1</button>
			<button @click="say('hi bro')">点我2</button>
			<button v-on:dblclick="say('hi vue')">点我3</button>
			<!-- 练习:计数器,点一次按钮就把次数++ -->
			<button v-on:click="count++">赞{{count}}</button>
			
			<!-- 2. v-bind指令用来获取变量的值-->
			<a href="{{url}}">点我跳转1</a>  <!-- 错的 -->
			<a v-bind:href="url">点我跳转2</a> <!-- 对的 -->
			<a :href="url">点我跳转3</a> <!-- 简写 -->
		</div>
		<!-- Vue对象 -->
		<script>
			new Vue({
				el:"#app",//挂载点
				data:{
					count:0  ,//计数器
					url:'https://www.baidu.com'
				},
				methods:{ //存方法
					// show:function(){
					show(){//函数的简写形式
						alert(100);
					},
					say(a){
						alert(a);
					}
				}
			})
		</script>
	</body>
</html>

五.Vue组件

5.1概述

当想要扩展HTML的功能时,使用vue定义一些组件.
1,全局组件: Vue.component(组件名, 组件的功能)
2,局部组件: 在Vue对象里, 再加一个属性components
3,使用组件: 在数据渲染区 , 直接把组件名当做HTML的标签名用
区别? 全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.

5.2测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 组件Component</title>
		<!-- 1.导入vue.js -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 2.数据渲染区 -->
		<div id="app">
			<!-- 5.使用组件 -->
			<Hellocom></Hellocom>
			
		</div>
		
		<div id="d1">
			<Hellocom></Hellocom>
			<person></person>
		</div>
		<script>
			//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
			//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果
			Vue.component('Hellocom',{
				template : '<h1>你好 Vue组件</h1>' //组件的显示效果
			}) 
			//3. 创建Vue对象
			new Vue({
				el:'#app'
			})
			new Vue({
				el:'#d1'    ,
				// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
				components: {
					'person':{//组件名
						template : '<h1>你好 person组件</h1>' //组件的显示效果
					}
				}
			})
			
		</script>
	</body>
</html>

六.Vue项目

6.1安装脚手架

node -v   #检查nodejs的安装版本
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm install vue-cli -g  #安装vue-cli脚手架
vue -V #查看版本
where vue #vue安装在哪里

6.2配置项目

vue init webpack jt01   # 慢,等....做了很多选择 # 可能需要执行多次才会成功
cd jt02  #进入项目目录
npm run dev #启动项目
打开浏览器访问网址:  http://localhost:8080

 在这里插入图片描述

在这里插入图片描述

                                                                   ↑打开浏览器测试效果

七.ElementUI

7.1概述

是一套漂亮的网页,有各种元素,直接用现成 代码
https://element.eleme.io

7.2安装

1, 进入你的项目目录中( E:\workspace\vue\jt01 )
2, 执行安装命令 npm i element-ui -D

 7.3修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


import ElementUI from 'element-ui'; //导入下载好的elementui
import 'element-ui/lib/theme-chalk/index.css';//导入下载好的elementui css
Vue.use(ElementUI); //使用elementui

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

7.4修改Car.vue组件文件

<template> <!-- 1.写 HTML代码 -->
  <div> <!-- 组件只能有一个根元素-->
    <h1>{{msg}}</h1>
    <!-- 开始使用elementui的组件,本质上就是一些标签 -->
    <!-- 2.icon图标,,使用i组件,class的值是 图标名称 -->
    <i class="el-icon-edit"></i>
    <i class="el-icon-s-home"></i>
    <i class="el-icon-loading"></i>

    <!-- 1.layout布局,默认一行是24个分格 el-row是行 el-col是列-->
    <el-row>
      <el-col :span="3">品牌</el-col>
      <el-col :span="10">价格</el-col>
      <el-col :span="11">描述</el-col>
    </el-row>

    <!-- 3.按钮el-button组件-->
    <el-row>
      <el-button type="danger" >普通按钮</el-button>
      <el-button type="danger" round>普通按钮</el-button> <!-- 圆角-->
      <el-button type="danger" circle icon="el-icon-edit"></el-button> <!-- 圆形带图标-->
    </el-row>

    <!-- 4.输入框 el-input,添加属性实现输入效果v-model
      clearable可清空的输入框   show-password密码隐藏效果 :disabled="true"禁用状态
    -->
    <el-input placeholder="输入姓名" v-model="msg" clearable show-password></el-input>
    <el-input placeholder="输入姓名" :disabled="true"></el-input>

    <!-- 5.表格标签
      el-table表示表格,el-table-column表示表格项,label是列名,
      :data用来获取arr的数据 ,prop用来获取指定属性的值
    -->
    <el-table :data="arr">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="品牌" prop="pinpai"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="更多">
          <!-- 圆形按钮 ,icon设置图标 ,type设置颜色 -->
          <el-button circle icon="el-icon-edit" type="danger"></el-button>
          <el-button circle icon="el-icon-delete" type="danger"></el-button>
      </el-table-column>
    </el-table>

    <!-- 6.表单标签 -->
    <el-form>
        <el-form-item label="标题: ">
            <el-input placeholder="请输入..." v-model="item.name"></el-input>
        </el-form-item>
        <el-form-item label="卖点: ">
            <el-input placeholder="请输入..." v-model="item.sellpoint"></el-input>
        </el-form-item>
        <el-form-item label="价格: ">
            <el-input placeholder="请输入..." v-model="item.price"></el-input>
        </el-form-item>
        <el-form-item label="详情: ">
            <el-input placeholder="请输入..." v-model="item.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="danger" @click="save()">保存</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script> /* 2.写js代码 */
  //可导出的自定义组件
  export default{
    name : 'Car',
    data() {   //准备数据
      return {
        msg:'Hello Vue!!!',
        arr:[  //为表格准备数据
          {
            id : 1,
            pinpai : '鸿星尔克',
            desc : 'to be no.1',
            price : 999
          },
          {
            id : 2,
            pinpai : '特步',
            desc : '飞一样的感觉',
            price : 666
          }
        ],
        item : { //为表单准备数据
          name : '测试标题',
          sellpoint : '测试卖点',
          price : 99,
          desc : '测试详情'
        }
      }
    },
    methods:{ //写方法
      save(){
          alert("保存成功!");
      }
    }
  }
</script>

<style> /* 3.写css代码*/
</style>

7.5效果

 7.6总结

1, 安装elementui
2, 修改main.js 引入elementui
3, 使用了各种组件(标签)
图标 : i 标签, 配置class属性,属性的值是图标的名字
布局: el-row标签表示行元素 el-col标签表示列元素 ,默认是一行有24分栏,:span属性可以自由组合
按钮: el-button标签表示按钮, type属性用来指定元素颜色,icon属性可以给按钮添加图标,round circle…
输入框: el-input标签是输入框, 必须指定v-model属性才能实现输入的效果
表格: el-table标签表示表格 , el-table-column表示表格里的列 , 通过:data属性获取数组里的数据, 通过label属性指定表格里的 表头, 通过prop属性绑定要获取的值
表单: el-form标签是表单,el-form-item表示表单项, 通过label属性指定表单项的名字,通过v-model属性获取表单数据

八.使用axios语法发起请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端整合起来</title>
		
		<!-- 1.导入js文件 -->
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<!-- 按钮的点击事件 -->
			<button @click="get()">点我获取汽车数据</button>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el : "#app" , //挂载点
				methods : { //定义函数
					get(){
						//使用axios技术,访问后端服务器
						axios.get("http://localhost:8090/car/get").then(
							//a是服务器的返回值交给a变量保存 箭头函数
							//data属性用来获取数据, a.data就是获取a的数据
							a => { console.log(a.data)  }
						)
					}
				}
			})
		</script>
	</body>
</html>

修改后端服务器的Controller,加一个特殊的注解,@CrossOrigin

package cn.tedu.controller;
import cn.tedu.pojo.Car;
import cn.tedu.service.CarService;
import cn.tedu.service.CarServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("car")
@CrossOrigin//放行js的访问请求
public class CarController {
    @Autowired
    private CarService carService;
    @RequestMapping("get")
    public List<Car> get(){
        return carService.get() ;
    }
}

九.Vue路由 

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue路由</title>
		<!-- 1.导入js文件,要注意顺序 -->
		<script src="js/vue.js"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区 -->
		<div id="app">
			<!-- 4.使用路由 router-link被HTML翻译成a标签,to属性被翻译成href属性-->
			<router-link to="/test1">点我显示主页</router-link>
			<router-link to="/test2">点我显示帮助页</router-link>
			
			<!-- 5.展示路由匹配到的组件效果 -->
			<router-view></router-view>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			//3.3.定义组件
			var home = { template : "<h1>我是主页</h1>" }
			var help = { template : "<h1>我是帮助页</h1>" }
			//3.2.创建路由实例
			var luyou = new VueRouter({
				routes : [ //属性用来定义路由规则
					//规定哪个路径匹配哪个名字的组件
					{ path:"/test1" , component:home },
					{ path:"/test2" , component:help }
				]
			}) 
			new Vue({
				el : "#app", //挂载点
				router : luyou //3.1.通过router属性配置路由
			})
		</script>
	</body>
</html>

总结

 

1只少年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-plus icon图标的正确使用姿势
bsefef的博客
03-03 2461
前言： 为了适应vue3的更新，element组件也将其内容升级为了plus用以配套的使用，很多组件新增了更加多元的功能，但我用的时候就觉得那个icon图标，怎么变得特别难用呢？原来是没有掌握正确的使用方法 改变： // 原来 <i class="el-icon-edit"></i> // plus <el-icon :size="size" :color="color"> <edit></edit> </el-icon>
vue
weixin_45581406的博客
11-04 115
以下是关于vue的 几个案例 接供参考： 图片拖动效果： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义指令</title> <script src="js/vue-2.6.9.min.js" type="text...
vue3 element plus动态添加图标
qq_43777788的博客
05-09 2476
element icon 直接使用类名就可以实现 <i class="el-icon-edit"></i> element plus icon 变成直接使用svg图片，当我动态的时候渲染时，就需要用到 vue3 的 :is //单一固定的 <el-icon><apple /></el-icon> ** 新的 attribute :is** :is 动态使用组件。有的时候你可能需要 Vue 将一个原生元素替换为一个 Vue 组件，这时你可以把
调整el-icon的大小
weixin_55020138的博客
08-26 9638
Element-UI 调整el-icon的大小，调整el-button中el-icon的大小
【Element-ui】Icon 图标与Button 按钮
热门推荐
m0_62599305的博客
12-02 2万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
element--icon图标
ZhangSir8的博客
07-03 4479
使用方法： 直接通过设置类名为 el-icon-iconName 来使用即可。例如： <i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> <el-button type="primary" ic...
Vue
Sousuyi的博客
08-23 409
文章目录1. Vue概述2. 搭建示例工程3. 演示双向绑定与事件处理4. Vue实例生命周期及钩子函数5. 插值、v-text和v-html6. 指令-v-model使用7. 指令-v-on使用8. 指令v-for使用9. 指令-v-if和v-show使用10. 指令-v-bind使用11. 计算属性的使用12. watch基本和深度监控13. 组件使用14. 父组件向子组件通信15. 子组件向...
vue2
02-21
武德莫项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
Vue框架总结.pdf
04-03
Vue.js 是一款流行的前端JavaScript框架，它以声明式的数据绑定和组件化开发为特点，极大地提高了Web应用的构建效率。Vue CLI是Vue.js官方提供的一个命令行工具，用于快速搭建和管理Vue项目，简化开发流程。 Vue ...
VUE
03-28
VUE
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
element-ui使用阿里矢量图标
业余前端的职业经历
01-01 4422
其实我们在工作中，很多时候ui给我们的图标可能就是从阿里图标库中拿来的 如果你用elemnt-ui写项目的时候 如果要用到很多图标 <el-button type="primary" icon="el-icon-search">搜索</el-button> <i class="el-icon-edit"></i> <i class...
elementUI 之 自定义 iconfont
annuobin1120的博客
09-09 922
[elementUI] icon 的正常使用方式 elementUI 直接引用官方自带的图标字体 （类名为全名） ex: <i class="el-icon-edit"></i> 一些含有 icon属性的元素引用 （类名为去掉名前缀 el-icon的名字） ex: <el-button type="primary" icon="edit">搜索&...
【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
Sabrina_cc的博客
02-15 1万+
本篇文章主要讲解了在vue若依框架中对el-tree和el-table实现修改。主要实现了自定义el-tree样式、el-tree和el-table联动、el-tree编辑树等效果。
vue 改变i标签icon图标的大小
qq_57031340的博客
08-06 1万+
vue i标签中icon图标的设置，之前搞错了方向，一直以为是按照图片格式弄，其实是按照编辑文字格式的逻辑来的。
属性操作-动态添加类名
erdouzhang
07-06 1151
html lang="en"> head> meta charset="UTF-8"> title>动态添加类名title> style> #icon {font-size: 15px;} .red {/*预先设置好类*/ width: 300px; backgr
elementUI更改icon图标尺寸、圆形按钮尺寸方法，以及css修改页面没变化为题
darlinghang_的博客
01-08 9026
样式修改，css修改页面不变化等问题
vue的diff算法的【双端比较】策略
最新发布
yiguoxiaohai的博客
08-08 327
vue的diff算法的双端比较策略
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值