程序员经验分享-hwhale

VUE前端框架

2023-11-04

目录

vue

概述

MVVM框架

入门案例 

 创建HTML文件,并引入vue.js

练习

Vue的基础语法

–1,运算符&函数

–2,解析类型丰富的data

–3,data的三种写法

二,Vue的指令

–1,概述

–2,v-model & v-cloak

-3,v-if & v-show & v-for

–4,v-on & v-bind

三,Vue组件Component

–1,概述

–2,全局组件

–3,局部组件

四,Vue的Ajax

–1,Ajax的概述

–2,Ajax的原理

–3,axios（导入）

–4,测试

五,Vue路由

–1,概述

–2,使用步骤（测试）

–3,总结

扩展：

–1观察者模式

HBuilderX自定义模板

–1,自定义HTML模板

–2,vue模板.txt

–3,创建新文件调用模板

vue

概述

是一个轻量级的前端框架.封装了HTML CSS JS的代码.
特点:
1, 是一个轻量级的 渐进式的框架, 按需配置
2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)
3, vue框架可以避免了DOM的API
4, 遵循了MVVM设计模式,实现前端代码的松耦合
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据
官网：

https://cn.vuejs.org/ #官网

https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本
 

MVVM框架

入门案例 

把vue.js导入到你的项目中

上面看似结构非常简单，其实却深藏奥秘。和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是：传统js机制操作的是页面，如我们之前写的html+css+js案例，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

 创建HTML文件,并引入vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue框架</title>
		<!-- 1.引入vue.js来用vue框架的核心功能 
			src用来指定js文件的位置
		-->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.准备解析vue的数据 
			{{message}}是插值表达式,用来获取message的值
		-->
		<div id="app"> {{message}} </div>
		<!-- 3.给第二步准备数据 -->
		<script>
			var a={
				message:"hello vue~"
			}
			//1,创建Vue对象
			new Vue({
				//el挂载点,意思是,把数据挂载到指定位置
				el:"#app",//利用CSS的id选择,选中了网页中的元素
				//data是vue为挂载点准备好的数据
				data:a
			})
		</script>
	</body>
</html>

练习

<!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">
			姓名:{{name}}
			年龄:{{age}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				el:"#app" , //挂载点
				data:{ //给挂载点准备数据
					name:"jack" ,
					age:20
				} 
			})
		</script>
	</body>
</html>

Vue的基础语法

–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">
			加减乘除运算: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
			三元运算符: {{ age > 18 ? "成年人" : "未成年" }}
			字符串的常见操作:{{str}} {{str.length}} {{str.concat(100)}}
		
			调用函数: {{ show() }}  {{ print(100) }}  {{add(1,2)}}
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			new Vue({
				//指定挂载点的位置,每个Vue对象必须有这个el属性!!!
				el:"#app",
				data:{ //给数据渲染区准备数据
					age:10,
					str:"hello"
				},
				methods:{ //准备函数
				 //函数名:函数的声明
					show:function(){
						console.log("show()调用成功!");
					},
					print:function(a){
						console.log("print()调用成功"+a);
					},
					add:function(a,b){
						console.log(a+b);
					}
				}
			})
		</script>
	</body>
</html>

–2,解析类型丰富的data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue解析复杂的数据</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{name}}
			<h1>解析vue对象的数据:</h1>
			<h1>姓名:{{person.name}}  年龄:{{person.age}} </h1>
			<h1>解析vue数组的数据:</h1>
			<h2>{{hobby}}  {{hobby[0]}}  {{hobby[1]}} </h2> 
			<!-- 数组名[下标].属性名   目的是来获取每个对象中属性对应的值 -->
			<h2>{{persons[0].name}}  {{persons[1].age}}</h2>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					name:"jack",
					//对象名:对象的多个特征
					person:{
						name:"rose",
						age:20
					},
					//数组
					hobby:["篮球","足球"],
					//数组
					persons:[
						{ name:"jack" , age:20 },
						{ name:"rose" , age:10 }
					]
				}
			})
		</script>
	</body>
</html>

–3,data的三种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三种写法</title>
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">{{msg}}</div>
		<script>
		
				new Vue({
					el : "#app" ,
					// 数据的三种写法:标准写法
					// 第一种形式
					// data : {
					// 	msg : "hello vueeee~~~"
					// }
					// 第二种形式:定义函数,返回对象
					// data:function(){
					// 	return {
					// 		msg:"hi~vue"
					// 	}
					// },
					// 第三种形式:定义函数,es6的简写法
					data(){
						return {
							msg:"vue hi~"
						}
					}
				});
	
		</script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三种写法</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="a">
			{{msg}} {{hobby[0]}}
		</div>
		<script>
			new Vue({
				el:"#a",
				//通过函数,设置返回值--vue项目中组件化的使用
				// data:function(){
				data(){//效果同上,是上面代码的简写形式
					//必须返回js对象
					return {
						msg:"hello vue",
						hobby:[1,2,3]
					}
				}
			})
		</script>
	</body>
</html>

二,Vue的指令

–1,概述

就是Vue框架提供的一些有特殊意义的代码,都有v-的前缀
常见的指令: v-if v-for v-on …
使用方式: 在开始标签处,添加新的属性,有v-的前缀的标识

–2,v-model & v-cloak

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue指令</title>
		<script src="vue.js"></script>
		<style>
			/* 语法: 选择器{样式1;样式2;...} */
			[v-cloak]{/* 选中有指定属性的元素 */
				display: none; /* 隐藏 */
			}
		</style>
	</head>
	<body>
		<!-- 2.v-cloak指令:解决插值表达式的闪现问题 -->
		<div class="a" v-cloak>
			{{address}}  {{address}} {{address}}
			<!-- 1.v-model指令:双向绑定,是指V和M的数据可以实时同步
					address值是指你的数据要和哪个属性进行绑定.
					可以获取也可设置属性的值
			 -->
			<input type="text" v-model="address"/>
		</div>
		{{address}}
		<script>
			new Vue({
				el:".a",
				data(){
					return{
						address:"北京"
						
					}
				}
			})
		</script>
	</body>
</html>

-3,v-if & v-show & v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 vue指令</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{name}}</h1>
			<!-- 3.v-text和v-html 指令 都是用来获取属性值的，
				区别是:前者无法解析HTML标签只能当做一个普通文本展示
				      后者可以解析数据中出现的HTML标签
			-->
			<h1 v-text="name"></h1>
			<h1 v-html="name"></h1>
			<!--4.v-if指令,判断条件满足时就展示元素,不满足就不展示
				了解:v-if和v-show区别?都可以判断,不满足时前者干脆不会解析元素
				后者会解析这个元素但是结合css代码来隐藏style="display: none;"
			-->
			<div v-if="age>18">年成人</div> 
			<div v-show="age>18">年成人</div> 
			<!--5.v-if指令的复杂使用 if...else if...else语法同java-->
			<div v-if="salary>20000">金领</div>
			<div v-else-if="salary>10000">白领</div>
			<div v-else>屌丝</div>
			<!--6.v-for指令用来循环遍历,通常用来遍历数组,语法类似forin,
				i是获取遍历得到的数据,in是固定语法,hobby是数组名,index是下标
			-->
			<div v-for="i in hobby">{{i}}</div>
			<div v-for="i,index in hobby">{{i}}--{{index}}</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data(){
					return{
						name:"<p>tony</p>",
						age:10,
						person:{
							salary:10000
						},
						hobby:["吃","喝","王者","Anglelababa"]
					}
				}
			})
		</script>
	</body>
</html>

–4,v-on & v-bind

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测 vue指令</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 0.是HTML的元素 -->
		<button onclick="alert(1)">按钮1</button>
		<a href="https://www.baidu.com/">百度一下</a>
		
		<div id="app">
			<!-- 1.v-on指令:给元素绑定不同的事件,可以简写成@ -->
			<button v-on:click="show()">按钮2</button>
			<button v-on:dblclick="print(100)">按钮3</button>
			<button @click="add(1,2,3)">按钮4</button>
			
			<!-- 问题:跳转时404,没有把url当变量,而是直接把整体当做跳转路径 -->
			<a href="{{url}}">百度一下1</a>
			<!-- 2.v-bind指令:把url当变量,去获取了变量的值进行跳转
				 v-bind:href可以简写成:href,意思是后面出现的url是变量不是字符串
			 -->
			<a v-bind:href="url">百度一下2</a>
			<a :href="url">百度一下3</a>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{ 
					url:"http://www.baidu.com/"
				},
				methods:{
					//函数名:函数声明(参数列表){函数体} 
					show:function(){
						console.log(100)
					} ,
					print:function(a){
						console.log(a);
					},
					//函数名(参数列表){函数体},是上面函数的简写方式
					add(a,b,c){
						console.log(a+b+c);
					}
				}
			})
		</script>
	</body>
</html>

三,Vue组件Component

–1,概述

好处:可以提高前端代码的复用性.
使用步骤:
1,定义组件: 全局组件 + 局部组件
2,使用组件: 就像使用HTML的标签一样

–2,全局组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Component组件</title>
		<!-- 1.组件是vue.js的核心功能,先导入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 2.在数据渲染区 -->
		<div id="app">
			<!-- 3.2,使用组件,就像使用HTML的标签一样 -->
			<Person></Person>
		</div>
		
		<div id="a">
			<Person></Person>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
		//全局组件:作用范围是可多个Vue对象使用,可以在所有的渲染区使用
			//3.1,创建全局组件--1是组件名2是组件内容
			// Vue.component(1,2)
			Vue.component('Person',{
				// template:组件具体要啥内容
				template:"<h1>姓名:jack,年龄:20</h1>"
			})
			new Vue({
				el:"#app"
			})
			new Vue({
				el:"#a"
			})
		</script>
	</body>
</html>

–3,局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 局部组件</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<Car></Car><!-- 2.使用了局部组件 -->
			<Student></Student><!--使用了全局组件-->
		</div>
		<div id="a">
			<Student></Student><!--使用了全局组件-->
		</div>
		<script>
			//全局组件
			Vue.component('Student',{
				template:'<h1>这是一个全局组件</h1>'
			})
			//局部组件:只能当前对象(在指定的数据渲染区)使用
			new Vue({
				el:"#a"
			})
			new Vue({
				el:"#app",
				//1.创建局部组件
				components:{
					//组件名:组件的内容
					Car:{
						template:"<p>这就是Car组件!</p>"
					}
				}
			})
		</script>
	</body>
</html>

四,Vue的Ajax

–1,Ajax的概述

Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
可以避免刷新整个网页,而实现了局部刷新的效果,异步访问的.
提高了网页的动态性,提高了网页的响应速度.
在Vue框架中,封装了Ajax的复杂语法,技术命名叫axios,
使用步骤: 导入vue.js + axios.js 文件
语法: axios.get(java程序的访问方式).then( a => { console.log(a); } )
 

–2,Ajax的原理

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

–3,axios（导入）

1, Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
2, 使用步骤: 要使用一个单独的js文件,注意导入顺序

<script src="vue.js"></script>
<script src="axios.min.js"></script>

 3, 语法

axios.get("url地址信息","参数信息").then(res=>{
	console.log(res.data);
})

–4,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 axios的语法</title>
		<!-- 1.导入js文件:
			vue.js核心 + vue-router.js是路由 + axios.js使用vue封装好的Ajax技术
		 -->
		<script src="vue.js"></script>
		<script src="axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="show()">按钮</button>
		</div>
		<script>
			//Vue的属性:el挂载点 + data数据区 + methods方法区 
			      //components局部组件 + router创建路由
			new Vue({
				el:"#app" ,
				methods:{
					show(){
						//vue提供的对象,get函数是指即将发起一个get请求
						//参数是一段java程序的访问方式
						//当程序访问成功时,then函数是vue自动调用的函数
						axios.get('http://www.baidu.com/').then(
							//a记录着java程序的返回值return
							//=>叫箭头函数
							a => {
								//在函数体重,处理返回的结果
								console.log(a.data);
							}
						)
					}
				}
			})
		</script>
	</body>
</html>

五,Vue路由

–1,概述

说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

基于Vue组件化的思想,
从用户发起一个请求,一直到展示指定组件,这个过程就是Vue路由负责的
使用步骤: vue.js + vue-router.js 引入到网页中 

–2,使用步骤（测试）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 Vue路由</title>
		<!-- 1.引入js文件,注意顺序! -->
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<!-- 2.准备数据渲染区,即将展示组件的功能 -->
		<div id="app">
			<!-- 3.4,点击不同的元素,即将路由到不同的组件 -->
			<router-link to="/home">主页</router-link>
			<router-link to="/help">帮助页</router-link>
			<!-- 3.5,展示组件的内容 -->
			<router-view></router-view>
		</div>
		<!-- 3.创建Vue对象 -->
		<script>
			//3.3,创建组件,让路由动态匹配
			var home={
				template:'<h1>我是主页..</h1>'
			}
			var help={
				template:'<h1>我是帮助页..</h1>'
			}
			//3.2,创建路由的细则
			//VueRouter表示vue路由的对象,routes属性用来描述细则
			var router=new VueRouter({
				//属性名:属性值
				routes:[
					//根据不同的请求,路由到不同的组件
					//path:访问路径,component:组件名称
					{path:"/home",component:home}  ,
					{path:"/help",component:help}
				]
			})
			new Vue({
				el:"#app",
				//3.1,设置路由功能
				// router:router //key 和value一样时,可以简写
				router//同上,简写形式
			})
		</script>
	</body>
</html>

–3,总结

扩展：

–1观察者模式

设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇，它的底气就来自对经典设计模式的全面应用。所以如果只会应用不懂其义，那你只是个码农；如何能领会设计模式的奥义，你就有了高级程序员的潜力；如果你能自己仿写，你就有了架构师的入门证。

Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了"观察者设计模式"。

那什么是观察者设计模式呢？

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。

  • 页面data中的address就是数据，get为获取当前数据，set为设置数据新值
  • 观察者watcher就为那多个插值表达式和input文本框，在页面加载时这些关系进行绑定
  • 当我们让数据变化时，如input文本框修改内容，其就调用数据的set的方法，把数据进行更新，其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger，进行再次渲染re-render，修改虚拟dom树。最终vue框架局部宣传页面
  • 同样，当我们利用谷歌浏览器改变数据v.address赋值时，就调用数据的setter方法进行数据更新，数据更新后，通知众多的观察者，观察者更新如上面的流程

可以看出Vue设计非常巧妙，我们页面展现的数据，必然会涉及到数据的读写，于是Vue实现了一整套机制，这套机制监控数据的获取（get），数据的更新（set），这样当数据变化，Vue就能知道。它知道有什么用呢？它就能控制当数据变化时就能重新进行页面的渲染，从而用户看到页面展现新的内容。


HBuilderX自定义模板

–1,自定义HTML模板

注意：模板是根据选择的文件类型独立的，我们现在是创建的html模板，只有创建html时，才能选择这个模板。

–2,vue模板.txt

创建vue模板.txt，文件名自定义。这样就无需每次敲这些重复的代码，高效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data:{
				msg : "hello vue"
			}
		})
	</script>
</html>

–3,创建新文件调用模板

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端的基础知识

前端

html

css

vuejs

VUE前端框架 的相关文章

随机推荐

  • Shamir秘密共享 与 ElGamal门限解密

    Secret sharing scheme 定义 秘密共享方案是可有效计算的是算法组 G C G C G C 定义为

  • （实验50）单片机，STM32F4学习笔记，代码讲解【串口IAP实验】【正点原子】【原创】

    文章目录 2023重新理解记录 其它文章链接 独家吐血整理 实验现象 主程序 IAP初始化程序 代码讲解 2023重新理解记录 BOOT APP Flash boot是通信使用 APP是功能代码 平时烧录的文件 hex时boot与app的结

  • canopen服务器协议,CANOpen协议如何保证通讯不丢帧？-通信/网络-与非网

    摘要 如何让现场总线通讯更加稳定可靠 不丢失 这向来都是工程师们难以解决的问题 本文将运用国际规范的通讯协议来展示怎样才能搭建好握手通讯 服务数据对象 SDO Service data object SDO 主要用于 CANopen 主站对

  • Android（安卓） 无线ADB调试手机（WiFi 调试、蓝牙调试）

    1 手机和电脑连接同一局域网 连同一个 WiFi 手机开热点电脑连接 电脑开热点手机连接 2 手机打开USB调试模式 3 查找你需要连接的Android 安卓 设备的ip 方式一 手机开热点电脑连接 手机分享蓝牙网络给电脑连接 1 电脑打开

  • template might not exist or might not be accessible by any of the configured Template Resolvers

    这个报错是找不到模板的存放路径 看配置 模板应该是在resource目录下 问题解决 参考 https blog csdn net qq 33605879 article details 107595510

  • ES（Elasticsearch）7.6.1安装教程

    Es elasticsearch 7 6 1安装教程 注意 除了最后启动ES的时候在es账户下执行 其他都是在root 下执行的 相关文件的下载 我这里都有 百度网盘链接 https pan baidu com s 1PxgINf6Q1UZ

  • Anaconda进出虚拟环境

    用了很多次还是总忘 记一下 查看Python环境 conda info env 代表当前环境 创建虚拟环境 pip create n py37 python 3 7或 conda create n py37 python 3 7 Windo

  • kibina 启动_kibana启动失败

    log 09 44 53 848 info listening server http Server running at http localhost 5601 log 09 44 53 864 error status plugin x

  • 给定区间[-2^31, 2^31]内的3个整数A、B和C，请判断A+B是否大于C。

    该题使用long double作为A B C的存储类型 都无法通过系统的测试 但是本地测试通过了 系统测试使用 BigInteger 通过测试了 为甚么会出现这个结果 这里面到底是什么原因 本人也没搞清楚 如有大神明白其中原理 希望多多指教

  • python装13的一些写法

    一些当你离职后 让老板觉拍大腿的代码 1 any in for in 判断某个集合元素 是否包含某个 某些元素 代码 if name main 判断 list1 中是否包含某个 某些元素 list1 1 2 3 4 a any x in 5

  • matlab 画折线图

    针对这篇博客里有些不够详细的地方 后期又写了一个稍微更详细的MATLAB画折线图 https blog csdn net Rhiney 97 article details 105000137 代码 效果图 x 1 1 5就是x轴上的数据

  • 模拟实现strstr函数

    目录 strstr函数介绍 使用strstr 出现 未出现 我的strstr模拟实现 代码 代码逻辑 现在来讲一下比较迷惑的点 结语 strstr函数介绍 在C语言的库函数里面有一个函数叫做strstr 这个函数的作用是在一个字符串中判断是

  • 【第59篇】RegNet：设计网络设计空间

    文章目录 摘要 1 介绍 2 相关工作 3 设计空间设计 3 1 设计空间设计的工具 3 2 AnyNet设计空间 3 3 RegNet设计空间 3 4 设计空间概化 4 分析RegNetX设计空间 5 与现有网络的比较 5 1 最先进的比

  • java基于SpringBoot+Vue+nodejs的高校自动排课系统 Element-UI

    自动排课系统也都将通过计算机进行整体智能化操作 对于自动排课系统所牵扯的管理及数据保存都是非常多的 例如 1 管理员 首页 个人中心 学生管理 教师管理 班级信息管理 专业信息管理 教室信息管理 课程信息管理 排课信息管理 系统管理 2 学

  • 微信外环境静态h5跳转小程序，如何传参?

    公司最近提了一个不常见的需求 就是在微信外环境静态h5跳转小程序并且还要传参 在查阅了大量资料后成功解决 官网地址 静态网站 H5 跳小程序 一 环境准备 1 开通微信云开发和静态网站 点击微信开发者工具中的云开发 现在是可以免费体验1个月

  • mysql中文乱码解决方案_Mysql中文乱码解决方案

    Mysql中文乱码解决方案 时间 2017 07 11 来源 华清远见JAVA学院 中文乱码问题一直是我们编程过程中比较常见又让人头疼的问题 但是只要按照标准进行配置 就能很好的避免出现中文乱码问题 今天小编就和大家分享下Mysql中文乱码

  • 统计学基础-数据的图表展示

    理论基础 什么是统计学 统计学分为描述统计和推理统计 统计学研究什么 统计学没有固定的研究对象 统计学研究的是来自各个领域的数据 靠解决其他领域内的工作而生存 我们并不能因此就看轻统计学 就好像计算机现在渗透在各行各业 我们生活中的方方面面

  • iOS支付宝支付接入的几个坑—以及解决办法

    因为近期项目中需要接入支付宝支付功能 自己也爬了很多的坑 所以做了一下这边文章供大家学习参考 远离爬坑 文章主要讲到以下五部分 一 支付宝开放平台创建应用 二 签约移动支付功能 三 接入支付前的准备工作附准备工作中遇到难题的解决方法 四 配

  • window.open打开新窗口报错ie 位指明错误,原因是window没有加引号!

    function JsMod htmlurl tmpWidth tmpHeight htmlurl getRandomUrl htmlurl var newwin window open htmlurl window height tmpH

  • VUE前端框架

    目录 vue 概述 MVVM框架 入门案例 创建HTML文件 并引入vue js 练习 Vue的基础语法 1 运算符 函数 2 解析类型丰富的data 3 data的三种写法 二 Vue的指令 1 概述 2 v model v cloak

热门标签