前端vue学习笔记（一）尚硅谷vue基础

已于 2022-04-25 20:29:21 修改
阅读量1.7k 收藏 7
点赞数 2
分类专栏： # Java 文章标签： html 前端 vscode vue
于 2022-04-19 22:54:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46838605/article/details/124279759
版权

目录

必备网站

尚硅谷B站vue学习视频，天禹老师逻辑很清晰
vue官网，如何食用官网学习视频有讲
element组件官网，在学习的过程中会不断用到，用来查一些前端组件

关于插件

如果想看当前html文件在页面展示出来是什么样子，可以点击右键菜单中的Open with Live Server：
在这里插入图片描述
如果你的右键菜单没有Open with Live Server选项，需要下载一个Live Server插件：
在这里插入图片描述
为了方便调试，可以在你使用的浏览器中安装一个vue_dev_tools插件。

关于注释

注释和取消注释快捷键：Ctrl + /
浏览器不会显示注释，但是能够帮助记录 HTML 文档。

<!DOCTYPE html>
<html lang="en">
<!-- head 开始 -->
<head>
    <meta charset="UTF-8"><!-- 当前文档采用UTF-8编码，可以正常显示中文 -->
    <title>这是html文件名</title>
</head>
<!-- head 结束 -->
<!-- body 开始 -->
<body>  
    <!-- 这是单行HTML注释 -->
    <!-- 这是一个HTML多行注释
         注意：在开始标签中有一个感叹号，但是结束标签中没有  -->
    <h1>这是标题</h1>
    <p>这是一个段落</p>
</body>
<!-- body 结束 -->
</html>

条件注释仅对 Windows 系统的IE浏览器有效，其他浏览器会忽略它们。从 IE5 开始支持条件注释，可以使用条件注释为使用 IE 浏览器的用户提供一些说明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE浏览器条件注释</title>
</head>
<body>
<h4>根据不同的 IE 版本显示不同的内容</h4>
<!-- 如果使用 IE，则显示 -->
    <!--[if IE]>
        <p>您正在使用IE浏览器</p>
    <![endif]-->

    <!-- 如果使用 IE8，则显示 -->
    <!--[if IE 8]>
        <p>您正在使用 IE8</p>
    <![endif]-->

    <!-- 如果不是使用 IE7，则显示 -->
    <!--[if !IE 7]>
        <p>您使用的不是 IE7</p>
    <![endif]-->

    <!-- 如果版本小于 IE10，则显示 -->
    <!--[if lt IE 10]>
        <p>您正在使用 IE10 以下的版本</p>
    <![endif]-->

    <!-- 如果版本大于等于 IE6，则显示 -->
    <!--[if gte IE 6]>
        <p>您正在使用 IE6 及其以上的版本</p>
    <![endif]-->
</body>
</html>

条件注释在IE浏览器上的效果如图：
在这里插入图片描述

0 Hello Vue

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象（例如起码要有一个el对象）。Vue实例和容器是一一对应的，一个容器只能使用一个实例中的属性。真实开发中只有一个Vue实例，Vue实例不一定会特别长，因为它会配合着组件一起使用；
  2. 容器里的代码被称为Vue模板，依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. el用于指定为哪个容器服务；
  4. 数据存储在data对象中，后续最好把data设计成一个函数。一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
  5. {{xxx}}是插值语法，见1.1。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>这里是html文件名</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器 -->
		<div id="root">
			<h1>Hello，{{name}}，{{address}}</h1>
		</div>

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

			//创建Vue实例
			new Vue({
				el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象，后续data最好写成一个函数。
					name:'wangdake',
					address:'喜马拉雅山'
				}
			})
			
			//el的两种写法，用哪个区别不大
			// 第一种，直接在对象里引入容器，当你已经想好用哪个容器时，就用它
			// new Vue({
			// 	el:'#root',
			// 	data(){
			// 		name:'尚硅谷'
			// 	}
			// })
			// 第二种，间接引入容器，当你还没想好用哪个容器时，就用它
			// const v = new Vue({
			// 	data:{
			// 		name:'尚硅谷'
			// 	}
			// })
			// console.log(v)
			// v.$mount('#root')
			
			//data的两种写法，后续用到组件时必须用函数式
			// 第一种，对象式：
			// data:{
			// 	name:'尚硅谷'
			// }
			// 第二种，普通函数式，不可以写成箭头函数，实际开发中最常用：
			// data(){
			// 		console.log('@@@',this) //此处的this是Vue实例对象
			// 		return{
			// 			name:'尚硅谷'
			// 		}
			// 	}

		</script>
	</body>
</html>

效果：
在这里插入图片描述

1 Vue模板语法

1.1 插值语法

  1. 功能：用于指定标签体内容；
  2. 写法：两组花括号{{xxx}}括起来；
  3. xxx可以是data里面的任何属性；
  4. xxx可以是js语句；
    注意区分：js表达式 和 js语句。js表达式是特殊的js语句。
    js表达式会产生一个值，可以放在任何一个需要值的地方：
    (1). a
    (2). a+b
    (3). demo(1)
    (4). x === y ? ‘a’ : ‘b’
    js语句：
    (1). if(){}
    (2). for(){}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>这里是html文件名</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<!-- name.toUpperCase()是一个js表达式，将data的name属性转换成大写。address是data里的一个属性 -->
			<h1>Hello，{{name.toUpperCase()}}，{{address}},{{Date.now()}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false

			new Vue({
				el:'#demo', 
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象，后续data最好写成一个函数。
					name:'wangdake',
					address:'喜马拉雅山'
				}
			})

		</script>
	</body>
</html>

1.2 指令语法

  1. 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
  2. 写法：Vue中有很多指令，形式都是：v-xxx。
  3. 举例：绑定指令v-bind:href=“xxx”（v-bind:可以简写为:，但不是所有的指令都可以简写） ，此时xxx与插值语法中双括号里的xxx用法相同。注意，前面加了指令，那么此处双引号中的内容就不再是字符串，而是当成一个js表达式去执行。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>这里是html文件名</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>插值语法</h1>
			<!-- 这里的name是data下的jack -->
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<!-- 这里的name是data下的school下的尚硅谷，用到了多级结构 -->
			<a :href="school.url.toUpperCase()" :x="hello">点我去{{school.name}}学习Vue</a>
			<a :href="school.url" :x="hello">点我去{{school.name}}学习前端</a>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
	
			new Vue({
				el:'#root',
				data:{
					name:'插值语法',
					school:{
						name:'尚硅谷',
						url:'http://www.atguigu.com',
						hello:'你好呀！'
					}
				}
			})
		</script>
	</body>
</html>

2 数据绑定

除了1.2中的v-bind可以绑定数据之外，还有更高级的一种绑定方法。

  1. 单向绑定(v-bind)：数据只能从data流向页面。
  2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
    双向绑定一般都应用在表单类元素上（如：input、select等）
    v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 普通写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

			<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'小毛毛'
			}
		})
	</script>
</html>

3 事件处理

3.1 事件的基本使用

  1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  2. 事件的回调需要配置在methods对象中，最终会在vm上；
  3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
  5. @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；
<!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">
			<h2>欢迎来到{{name}}学习</h2>
			<button @click="showInfo1">点我不传参</button>
			<!-- 事件回调，传参 -->
			<button @click="showInfo2($event,66)">点我传参</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
				
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo1(event){
					alert('同学你好')// 触发点击事件后弹出的信息
				},
				showInfo2(event,number){
					// target在控制台输出事件，innerText输出事件的信息
					console.log(event.target.innerText) 
					// 在控制台输出传进来的参数
					console.log(number)
					alert('同学你好!')
				}
			}
		})		
	</script>
</html>

3.2 事件修饰符

修饰符可以连环使用，例如 @click.prevent.stop既可以阻止默认事件，也可以阻止冒泡。

  1. 阻止默认事件修饰符。
    默认事件：元素默认会触发的事件，如：a标签的跳转，button(type=submit)按钮的提交行为，input输入框默认的点击获取焦点等，当你不想触发执行默认事件时，可以阻止元素的默认事件。
    两种方式：
    1.click.prevent;
    2.在实例中的methods中加.preventDefault()
<!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">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 如果不加阻止默认事件，默认行为会点击完后显示提示信息，显示完后自动跳转到链接 -->
			<!-- 阻止默认事件两种方式，1.click.prevent;2.showInfo函数中用参数.preventDefault() -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					// e.preventDefault()//阻止默认事件的第二种方法
					alert('同学你好！')
				}
			}

		})
	</script>
</html>
  1. 阻止冒泡事件修饰符
    冒泡事件：js中事件会以冒泡的形式由内向外传递。由最内层点击元素向外扩散到最外层元素，激活外层元素注册的相应事件。但有时它的存在会影响我们的操作，可以阻止元素的冒泡事件。
    两种方式：
    1.在里层加@click.stop会阻止外层的冒泡事件；
    2.在实例中的methods中加.stopPropagation()；
    3.为外层事件增加.self修饰符，只有操作外层元素时，event.target才是外层事件，才会触发外层事件执行
<!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">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 如果不加阻止冒泡修饰符，点击按钮会显示两次，因为showInfo和demo都可以响应点击事件，冒泡冒到了外面那层demo身上 -->
			<!-- 阻止冒泡事件的三种方法：1.在里层加@click.stop会阻止外层的冒泡事件；2. 在实例中的methods中加.stopPropagation()；3.为外层事件增加.self修饰符-->
			<div class="demo" @click="showInfo">
				<button @click.stop="showInfo">点我显示欢迎语</button>
			</div>
			<!-- 第三种方法：只有event.target是当前操作的元素时才触发事件； 
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>-->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					// e.stopPropagation() 阻止冒泡的第二种办法
					alert('同学你好！')
				}
			}

		})
	</script>
</html>
  1. 想让一个事件只能触发一次，加once修饰符
<!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">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 如果不加once修饰符，每次点击按钮都会触发点击事件，加了之后第一次点击能触发，第二次就失效了 -->
			<button @click.once="showInfo">点我显示欢迎语</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
				}
			}

		})
	</script>
</html>
  1. scroll：当屏幕上的滚动条滚动时触发事件；wheel：当鼠标滚轮滚动时触发滚动事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>滚动事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 配置样式 -->
		<style>
			/* 通配符* 让所有元素之间有20的间距 */
			*{
				margin-top: 20px;
			}
			.list{
				width: 100px;
				height: 100px;
				background-color: blueviolet;
				overflow:scroll;/* 子元素距离太大溢出时，增加滚动条 */
			}
			li{
				height: 1000;
			}
		</style>

	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 给某个结构写样式，要在前面的<>里写class="样式名"，在head下的style里写.样式名{需要展示的样式} -->
			<!-- scroll：当滚动条滚动时触发事件；wheel：当鼠标滚轮滚动时触发滚动事件 -->
			<ul @scroll="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				demo(msg){
					// 在控制台输出传进来的参数
					console.log(msg)
				}
			}

		})
	</script>
</html>

3.3 键盘事件

  1. input输入框，placeholder是显示在输入框里面的提示消息;
  2. 绑定键盘事件有两种：keydown（一按下按键就触发事件）和keyup（按下再松手才触发事件）;
  3. keyup.enter表示回车按下再松手才会触发按键事件,常用的九个按键可以效仿enter的用法；
    Vue中常用的九个按键：
    回车 => enter
    删除 => delete (捕获“删除”和“退格”键)
    退出 => esc
    空格 => space
    换行 => tab (特殊，必须keydown.tab，否则还没松手就切走了。这中特殊的按键还有ctrl、alt、shift、meta)
    上 => up
    下 => down
    左 => left
    右 => right
  4. 其他按键需要定制，用原始key值绑定；
  5. 在Vue实例前面写Vue.config.keyCodes.别名=键码，可以定制按键别名；
  6. @keyup.ctrl.y可以实现同时按下ctrl和y才可以触发键盘事件。
<!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">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					// if(e.keyCode != 13) return
					// 输出input框里输入的值
					console.log(e.target.value)
				}
			}
		})
	</script>
</html>

4. 计算属性

  1. 一个Vue实例中的data中的数据都是属性，可以直接用；data中的已有属性经过计算加工后成为计算属性，相当于直接使用计算属性，间接使用了data中的已有属性；
  2. 底层借助了Objcet.defineproperty方法提供的getter和setter，所以computed对象中有get和set两个方法；
  3. 调用get方法的两种情况：
    1.把计算结果放在return里，再放到get函数中，再放到计算属性对象中，再放到computed对象中；然后第一次使用计算属性对象时，Vue会去实例中找computed下的计算属性对象，然后调用get函数，根据函数返回值拿到结果，并把结果保存下来，进行复用（缓存机制）；第二次再取计算结果时，就不需要调用get函数了；
    2.当计算属性所依赖的数据发生变化时，也会调用get函数，相当于更新；
  4. 调用set方法的一种情况：
    直接修改计算属性对象的值；
  5. 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便；
  6. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变；
  7. 当没有直接修改计算属性的需求，只有读取的需求时，可以简写，将计算对象属性写成函数的形式，直接return计算结果，在使用计算属性时千万不能加小括号。
<!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">
			<!-- br可以换行-->
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			<!-- 这里的fullName千万不能加小括号-->
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写，只有在不需要直接修改fullName时才能用简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>
</html>
卡卡西~
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用条件注释判断 IE 浏览器版本适用于IE5.0及以上版本
12-13
IE条件注释是一种特殊的HTML注释，这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是： <!–This is a comment–> 而只有IE可读的IE条件注释是： <!–[if IE]> <![endif]–> “非IE条件注释”： <!–[if !IE]>–> non-IE HTML Code <!–<![endif]–> “非特定版本IE条件注释”（很少用到）： <!–[if ! lt IE 7]><![IGNORE[–><![IGNORE[]]>Code for browsers that match the if condition<!–<![en
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
Vue笔记-1-环境搭建/入门学习
の博客
06-30 2175
Vue系列入门教程
vue3快速上手笔记(尚硅谷)
最新发布
weixin_41844140的博客
05-29 1131
修改名字
vue 键盘快捷键标注
Lycoris_Red的博客
07-24 2440
使用vue，Css ,js 做一个虚拟键盘并添加快捷键的标注信息
VsCode开发vue项目快捷键持续更新
Bruce小鬼
05-13 3661
VsCode开发vue项目快捷键持续更新 1.概述 这篇文章总结开发vue项目中常用的快捷操作，提升开发效率。 2.开发项目常用快捷键 1.格式化代码 创建vue项目使用了代码规范检查插件，在开发项目时不符合规范的代码将报错，影响项目的启动。下面提供npm run lint 命令自动格式化修复不符合规范代码，具体插件的安装和配置参考文章。 https://brucelong.blog.csdn.net/article/details/113687627 ...
vscode中使用快捷键注释Vue代码，页面显示//注释失败的处理方法
Shivy_的博客
08-11 1万+
vscode中使用快捷键注释Vue代码，页面显示//注释失败的处理方法
VS Code 的常用快捷键和插件
qq_37935324的博客
05-08 3928
1.注释:a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)c) 多行注释：[alt+shift+A]d) 多行注释：/**2、移动行：alt+up/down3、显示/隐藏左侧目录栏 ctrl + b4、复制当前行：shift + alt +up/down5、删除当前行：shift + ctrl + k6、控制台终端显示与隐藏：ctrl + ~
尚硅谷VUE核心技术课件资料-笔记总结
04-17
【Vue.js核心技术详解】 ...通过尚硅谷的Vue核心技术课程，开发者可以系统地学习并掌握Vue.js的各个方面，为实际项目开发打下坚实基础。配合提供的代码示例、课件资料和笔记总结，学习效果将更加显著。
尚硅谷vue3的学习笔记
05-09
"尚硅谷vue3的学习笔记"很可能是记录了关于Vue3的详细学习过程，包括其核心概念、新特性、最佳实践以及常见问题的解决方法。 Vue3 的主要改进点包括： 1. **Composition API**：Vue3 引入了Composition API，这是...
Vue2+Vue3笔记（黑马程序员+尚硅谷）
05-26
学习Vue2+Vue3笔记可以帮助开发者全面掌握Vue.js的两种主要版本，理解它们的异同，以及如何在实际项目中选择合适的版本。黑马程序员和尚硅谷是知名的在线教育平台，它们提供的笔记内容通常覆盖了基础概念、实战案例...
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
多行注释快捷操作键
番薯大佬的专栏
09-22 7966
使用组合快捷键：Cmd + Alt + /，出自动在代码前一行添加标识方法名称、参数、返回类型的注释类型，格式为： /** Description @param url url description @param message message description @return return value description */ 实操时，如下所示： /** Descri...
VsCode常用插件和快捷键
Litt_White的博客
09-30 4561
格式化 .vue 文件，包括里面的 CSS、JS，至于模板即 HTML 部分，官方维护者说没有比较好的工具支持，默认是不格式化的。支持缩写：常用的类声明、ES 模块声明、CMD 模块导入等，支持的缩写不下 20 种。给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。修改标签对，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签。使用说明：shift+alt+l（小写），shift+alt+u（大写）使用说明：Alt+Shift+F （格式化全文)，可以设置自动化格式。
vscode--vue注释快捷方式
这里是迷阵的博客耶
07-27 5964
目录vscode配置配置文件vuejavascript vscode配置 1.F1–> 输入：首选项:配置用户代码片段 2.选择下面这个 3.输入或选择需要的配置 配置文件 vue vue.json { "Print to vueTitle": { "prefix": "vueTitle", "body": [ "<!-- ", " * @description: ", " * @au
vscode和HBuilderx设置快捷键注释
qq_42717015的博客
09-15 1593
vscode和HBuilderx设置快捷键注释！vscode和HBuilderx设置快捷键注释！vscode和HBuilderx设置快捷键注释！vscode和HBuilderx设置快捷键注释！vscode和HBuilderx设置快捷键注释！
VS注释快捷键
热门推荐
karute的博客
12-07 1万+
添加注释：先CTRL+K，然后CTRL+C 取消注释：先CTRL+K，然后CTRL+U
Vue项目WebPack打包删除注释和console
qq_45585640的博客
08-18 5413
在本地开发环境中肯定都会去打印一些数据，但是你如果上传到正式环境呢这些肯定不能再有了，但是你也不能一行一行的去注释掉吧，这样很麻烦所以vue在配置的时候其实是有这个配置的但是需要你自己去配置文件里面修改一下，这样才能方便你的开发二可以达到偷懒的地步。下面就说一下这个配置其实就两行代码就可以了。...
vue上注释全部都注释为//的解决方法
u010086628的博客
05-14 1941
在vue下一般分成两部分注释： 一、在<template>下注释为：<!-- >; 二、在<script>下注释为：//; 三、快捷键：ctrl+/; 问题：经常会遇到在<template>也注释为：//; 解决办法：在vscode下点扩展，搜：Vuter，搜到了后，安装，最后重启，就可以了。 ...
vue3学习笔记尚硅谷
08-12
在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值