Vue学习实践笔记（一）

最新推荐文章于 2024-11-01 14:29:13 发布
最新推荐文章于 2024-11-01 14:29:13 发布
阅读量181 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FED_AF/article/details/105779759
版权
  • Demo1——vue对象、v-cloak、v-text、v-html、v-bind、v-on
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		[v-cloak] {
			display: none !important;/*加!important是为了避免被其他高优先级属性覆盖*/
		}
	</style>
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
	<!-- 使用v-vloak命令解决刷新时暴露vue代码的问题，需要额外定义css样式但可以结合标签内容 -->
		<p v-cloak>{{ msg }}</p>
	<!-- 使用v-text命令解决刷新时暴露vue代码的问题，不需要额外定义css样式但会覆盖标签内容 -->
		<p v-text="msg"></p>
		<p>{{ msg2 }}</p>
		<p v-html="msg2"></p>
		<!-- v-bind命令用于绑定自定义属性，且可以写合法的js表达式 -->
		<input v-bind:placeholder="mytitle + '？'" type="text">
		<!-- v-bind:可简写为: -->
		<input :placeholder="mytitle + '？'" type="text">
		<!-- v-on命令用于绑定自定义事件，且可以写合法的js表达式 -->
		<button v-on:click="show"></button>
		<!-- v-on:可简写为@ -->
		<button @click="show"></button>
		<button @click="msg='欢迎学习微优异'"></button>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '欢迎学习Vue',
				msg2: '<p>奥利给</p>',
				mytitle: '你瞅啥'
			},
			methods:{
				show() {
					alert('瞅你咋地');
				}
			}
		})
	</script>
</body>
</html>
  • Demo2：实现滚动字幕——定时器、this、箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<button @click="start">开始</button>
		<button @click="pause">暂停</button>
		<p>{{ msg }}</p>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '我们遇到什么困难，也不要怕!',
				intervalId: null
			},
			methods:{
				start() {
					if (this.intervalId != null) return
					this.intervalId = setInterval( () => {
						var start = this.msg.substring(0, 1)
						var end = this.msg.substring(1)
						this.msg = end + start
					}, 100)
				},
				pause() {
					clearInterval(this.intervalId)
					this.intervalId = null
				}
			}
		})
	</script>
</body>
</html>
  • Demo3：事件修饰符——stop、self、capture、prevent、once
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<style>
		.lz{background-color: #f00;width: 300px;height: 180px;}
		.lyl{background-color: #0f0;height: 100px;}
		.twlz{background-color: #ff0;height: 50px;}
	</style>
</head>
<body>
	<div id="app">
		<!-- .stop表示阻止所有事件的冒泡 -->
		<div class="lz" @click="dxstop">大雄
			<div class="lyl" @click="jxstop">静香
				<div class="twlz" @click.stop="phstop">胖虎</div>
			</div>
		</div>
		<br>
		<!-- .self表示阻止自身事件的冒泡 -->
		<div class="lz" @click="dxself">大雄
			<div class="lyl" @click.self="jxself">静香
				<div class="twlz" @click="phself">胖虎</div>
			</div>
		</div>
		<br>
		<!-- .capture表示由外向内捕获事件 -->
		<div class="lz" @click.capture="lzcapture">旅长
			<div class="lyl" @click="lylcapture">李云龙</div>
		</div>
		<!-- .prevent表示阻止默认事件 -->
		<a href="www.jnpgc.com" @click.prevent="prevent">江南皮革厂官网</a>
		<!-- .once表示只触发一次事件 -->
		<p @click.once="once">自宫指南</p>
		<!-- .once和.prevent连用（不分顺序先后）表示只阻止一次默认事件 -->
		<a href="http://www.baidu.com" @click.once.prevent="onceprevent">葵花宝典</a>
		
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
			},
			methods:{
				prevent() { console.log('本厂已倒闭，产品全白送') },
				once() { console.log('自宫成功，不可再宫') },
				onceprevent() { console.log('自宫成功，不可再宫，趁热打铁，练就神功') },
				lzcapture() { console.log('李云龙！') },
				lylcapture() { console.log('哟，旅长') },
				phstop() { console.log('我倒看看是谁不给我胖虎面子') },
				jxstop() { console.log('...') },
				dxstop() { console.log('...') },
				phself() { console.log('我倒看看是谁不给我胖虎面子') },
				jxself() { console.log('...') },
				dxself() { console.log('我大雄不出手，你胖虎要上天不成') }
			}
		})
	</script>
</body>
</html>
  • Demo4：数据双向绑定——v-model
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<p>{{ msg }}</p>		
		<!-- v-bind只能实现数据从m到v的单向绑定，无法实现双向绑定 -->
		<input placeholder="" :value="msg" type="text" style="width: 100%;">
		<!-- v-model可以实现表单元素和Model中数据的双向绑定 -->
		<!-- v-model只能运用在表单元素中 -->
		<input placeholder="" v-model="msg" type="text" style="width: 100%;">
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				msg: "boy♂next♂door"
			},
			methods:{
			}
		})
	</script>
</body>
</html>
  • Demo5：实现简单计算器——数据双向绑定练习
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="n1">
		<select v-model="opt">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" v-model="n2">
		<button @click="calc">=</button>
		<input type="text" v-model="result">
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				n1: 0,
				opt: '+',
				n2: 0,
				result: 0
			},
			methods:{
				calc() {
					switch (this.opt) {
						case '+':
						this.result = parseInt(this.n1) + parseInt(this.n2)
						break
						case '-':
						this.result = parseInt(this.n1) - parseInt(this.n2)
						break
						case '*':
						this.result = parseInt(this.n1) * parseInt(this.n2)
						break
						case '/':
						this.result = parseInt(this.n1) / parseInt(this.n2)
						break
					}
				}
			}
		})
	</script>
</body>
</html>
  • Demo6：绑定样式——css类样式、style行内样式
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<style>
	.red{color: red;}
	.thin{font-weight: 200;}
	.italic{font-style: italic;}
	.active{letter-spacing: 0.5em;}
	</style>
</head>
<body>
	<div id="app">
	<h1 :class="['red', 'thin']">使用v-bind绑定class属性，给class传递一个数组</h1>
	<h1 :class="['italic', 'thin', flag?'active':'']">在数组中使用三元表达式</h1>
	<h1 :class="['italic', 'thin', {'active': flag}]">在数组中使用对象来代替三元表达式，提高代码的可读性</h1>
	<h1 :class="classObj">给class属性传递一个对象</h1>
	<h1 :style="{ color: 'green', 'font-weight': 2000 }">直接在style属性中书写样式</h1>
	<h1 :style="styleObj1">给style属性传递一个对象</h1>
	<h1 :style="[styleObj1, styleObj2]">给style属性传递一个数组</h1>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				flag: true,
				classObj: { red: true, thin: false, italic: true, active: false },
				styleObj1: { color: 'blue', 'font-weight': 2000 },
				styleObj2: { 'font-style': 'italic' }
			},
			methods: {
			}
		})
	</script>
</body>
</html>
  • Demo7——v-for和key属性
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<span v-for="item in list1">{{ item }}&nbsp;</span>
		<p v-for="(item, i) in list1">索引值为{{ i }}的元素值为{{ item }}</p>
		<p v-for="user in list2">{{ user.id }}，字{{ user.name }}</p>
		<p v-for="(user, i) in list2">{{ i+1 }}号选手{{ user.id }}，字{{ user.name }}</p>
		<p v-for="(val, key, i) in daren">{{ i }}&emsp;{{ key }}：&nbsp;{{ val }}</p>
		<p v-for="count in 10">第{{ count }}次循环（从1开始迭代）</p>
		<div>
			<label>ID：
				<input type="text" v-model="id">
			</label>
			<label>Name：
				<input type="text" v-model="name">
			</label>
			<button @click="add">添加</button>
		</div>
		<!-- 当使用v-for出现问题时，必须为迭代的元素指定唯一的key属性，key只能是数字或字符串 -->
		<p v-for="item in list" :key="item.id">
			<input type="checkbox">
			{{ item.name }}
		</p>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				id: '',
				name: '',
				list: [
				{ id: 1, name: '刘能' },
				{ id: 2, name: '赵四' },
				{ id: 3, name: '广坤' },
				{ id: 4, name: '玉田' }
				],
				list1: [1, 2, 3, 4, 5, 6],
				list2: [
				{ id: '赵云', name: '子龙' },
				{ id: '关羽', name: '云长' },
				{ id: '周瑜', name: '公瑾' }
				],
				daren: {
					id: "同凤格鸾台平章事",
					level: "当朝宰辅",
					name: "内史狄仁杰"
				}
			},
			methods: {
				add() {
					this.list.unshift({id: this.id, name: this.name})
				}
			}
		})
	</script>
</body>
</html>
  • Demo8——v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
	<button @click="toggle">toggle</button>
	<h3 v-if="flag">v-if每次都重新删除或创建元素，有较高的切换性能消耗，如果元素涉及到频繁的切换，最好不要使用v-if，用v-show</h3>
	<h3 v-show="flag">v-show每次不会重新进行DOM的删除创建操作，只是改变了元素的display属性，有较高的初始渲染消耗，如果元素可能永远也不会显示出来被用户看到，最好不要使用v-show，用v-if</h3>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				flag: true
			},
			methods: {
				toggle() {
					this.flag = !this.flag;
				}
			}
		})
	</script>
</body>
</html>

 

 

FED_AF
关注
专栏目录
Vue应用实践实例总结
小小默：进无止境
10-24 1980
【1】Vue常见标签应用 ① v-if、v-else、v-for <div class="layui-carousel" id="test3" lay-filter="test3" style="height: 500px;"> <div carousel-item v-if="swiperList.length<1"> <div style=""> <img src="/common/images/swiper1.j
vue学习笔记（超详细）
jiey0407的博客
03-09 5829
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
vue学习 20实战Demo
Shelly Long的博客
04-28 284
App.vue <template> <div id="app"> <app-header></app-header> <users></users> <app-footer></app-footer> </div> </template> ...
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 2万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue学习笔记
qq_69331283的博客
10-11 994
Vue (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架vue2vue3什么是构建用户界面：基于数据渲染用户看到的界面什么是渐进式：也就是循序渐进，不一定要学习vue中的所有API学完才能开发Vue，可以学一点开发一点自己定义的指令，可以封装一些DOM操作，扩展额外的功能语法;全局注册//在main.js中Vue.directive('指令名', {// 可以对 el 标签，扩展额外功能el.focus()})局部注册//在Vue组件的配置项中"指令名": {
Vue 2.0 学习笔记（一）
weixin_44772326的博客
12-01 9572
前端工程化与Webpack：概括了前端工程化的概念与特点，讲述了webpack的安装配置与使用，并使用插件解决实时打包项目的问题。介绍了webpack加载器。介绍项目如何打包发布。认识Source Map在调试中的作用。
《vue leaflet学习实践笔记》
yk_ddm的博客
10-16 361
目录vue leaflet学习实践笔记 vue leaflet学习实践笔记
vue学习笔记整理
weixin_48020259的博客
03-17 1258
vue学习笔记整理 初识VUE 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用； 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录vue学习笔记整理前言一、MVVM模型1.模式演示2.总结二、模板语法1.插值语法2.指令语法3.代码演
Vue学习实践笔记（六）
FED_AF的博客
05-17 248
结合webpack实现render函数渲染组件、vue-router路由、子路由
Vue学习实践笔记（三）
FED_AF的博客
05-05 257
ajax实现列表获取、添加删除、过渡类名实现动画、自定义v-前缀、使用animate.css实现动画、使用钩子函数实现半场动画、使用transition-group元素实现列表动画、appear、tag属性、全局组件的三种创建方式和私有组件的创建方式、组件中的data与methods、使用v-if和v-else结合flag进行切换、使用vue提供的component元素进行切换、应用动画和mode属性
vue 3.0学习笔记(从入门到精通)
10-07
Vue 3.0是Vue.js框架的最新版本，它带来了许多...总之，Vue 3.0学习涵盖了许多方面，从基础的模板语法到高级的响应式机制，以及组件开发和路由管理。通过深入理解这些知识点，你将能够熟练地运用Vue 3.0进行前端开发。
初学Vue(学习笔记 一) day one
01-20
Vue.js 是一个渐进式的JavaScript框架，它设计的目标是让开发者能够轻松地构建用户界面，尤其是在Web应用开发中。Vue的核心特性包括声明式渲染、组件...对于初学者来说，逐步理解并实践这些概念是掌握Vue的关键步骤。
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
TypeError: Cannot read property ‘parentNode‘ of undefined.
DN金猿的博客
10-29 360
使用node js+vue+element plus开发。
扩展el-table，实现当showOverflowTooltip时，鼠标可移入tooltip功能
最新发布
Bitter的博客
11-01 300
1.在utils里创建elTable.js。2.在main.js中引入 并绑在vue上。
基于SSM+VUE历史车轮网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
11-01 773
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
Vue.js 构建可复用的组件
Davina_yu的博客
10-31 427
通过以上步骤，创建了一个可复用的按钮组件，并在主应用中注册和使用了它。这样的组件可以很容易地在不同的场景下重复使用，只需传递不同的属性即可定制其外观和行为。这对于构建大型的、复杂的前端应用是非常有用的。
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值