Vue学习实践笔记（三）

原创 于 2020-05-05 02:18:32 发布 · 286 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

  • Demo1：品牌案例——ajax实现列表获取、添加删除
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/axios.js" charset="UTF-8"></script>
</head>
<body>
	<div id="app">
		<div>
			<div><h3>添加品牌</h3></div>
			<div>
				<label>Id:
					<input type="text" v-model="id">
				</label>
				<label>Name:
					<input type="text" v-model="name">
				</label>
				<button @click="add">添加</button>
				<label>关键字搜索:
					<input type="text" v-model="keywords">
				</label>
			</div>
		</div>
		<table>
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Ctime</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in search(keywords)" :key="item.id">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.ctime"></td>
					<td><a href="" @click.prevent="del(item.id)">删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript" charset="UTF-8">
		axios.defaults.baseURL = 'http://vue.studyit.io/'; // axios自定义全局根域名，每次单独发起http请求的时候，请求的url路径应该以相对路径开头，前面不能带/，否则不会启用根路径做拼接
		axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  // axios自定义全局post请求报头内容类型
		var vm = new Vue({
			el: '#app',
			data: {
				id: '',
				name: '',
				keywords: '',
				list: [ // 存放整个品牌列表
					{ id: 1, name: '奔驰', ctime: new Date() },
					{ id: 2, name: '宝马', ctime: new Date() }
				]
			},
			methods: {
				add() {
					axios.post('api/addproduct', { name: this.name }).then(response => {
						if (response.body.status === 0) {
							// 成功了
							this.getAllList()
							this.name = ''
						} else {
							// 失败了
							console.log('添加失败')
						}
					}).catch(function (error){})
				},
				del(id) {
					axios.get('api/delproduct/', { params: id }).then(response => {
						if (response.body.status === 0) {
							// 成功了
							this.getAllList()
						} else {
							// 失败了
							console.log('删除失败')
						}
					}).catch(function (error){})
				},
				getAllList() { // 获取整个品牌列表
					axios.get('api/getprodlist').then(response => {
						var response = response.body;
						if (response.status === 0) {
							// 成功了
							this.list = response.message
						} else {
							// 失败了
							console.log('获取数据失败')
						}
					})
				},
			},
			created() {
				this.getAllList()
			}
		})
	</script>
</body>
</html>
  • Demo2：动画——过渡类名实现动画、自定义v-前缀
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<style>
	/* v-enter是进入之前元素的起始状态，此时还没有开始进入 */
	/* v-leave-to是离开之后元素的终止状态，此时动画已经结束 */
		.v-enter,.v-leave-to{
			opacity: 0;
			transform: translateX(180px);
		}
	/* v-enter-active是入场动画的时间段 */
	/* v-leave-active是离场动画的时间段 */
		.v-enter-active,.v-leave-active{
			transition: all 0.8s ease;
		}
		.my-enter,.my-leave-to{
			opacity: 0;
			transform: translateY(70px);
		}
		.my-enter-active,.my-leave-active{
			transition: all 0.8s ease;
		}
	</style>
</head>
<body>
	<div id="app">
		<button @click="flag=!flag">toggle</button>
		<!-- transition是Vue官方提供的元素 -->
		<transition>
			<h4 v-if="flag">握着我的抱枕~</h4>
		</transition>
		<hr>
		<button @click="flag2=!flag2">toggle2</button>
		<!-- transition是Vue官方提供的元素 -->
		<transition name="my">
			<h4 v-if="flag2">握着你的抱枕~</h4>
		</transition>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				flag: false,
				flag2: false
			},
			methods: {}
		})
	</script>
</body>
</html>
  • Demo3：动画——使用animate.css实现动画
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<link rel="stylesheet" href="css/animate.min.css" charset="UTF-8">
</head>
<body>
	<div id="app">
		<button @click="flag=!flag">toggle</button>
		<!-- transition是Vue官方提供的元素 -->
		<!-- bounceIn和bounceOut是动画类型，前面要加基本类animated -->
		<!-- :duration="500"表示入场和离场的动画用时500毫秒 -->
		<!-- :duration="{ enter: 200, leave: 400 }"表示入场200毫秒，离场400毫秒 -->
		<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter: 200, leave: 400 }">
			<h4 v-if="flag">握着我的抱枕~</h4>
		</transition>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				flag: false,
				flag2: false
			},
			methods: {}
		})
	</script>
</body>
</html>

Demo4：动画——使用钩子函数实现半场动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<style>
		.ball{
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<div id="app">
		<button @click="flag=!flag">toggle</button>
		<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" >
			<div class="ball" v-show="flag"></div>
		</transition>
	</div>
	<script type="text/javascript" charset="UTF-8">
		var vm = new Vue({
			el: '#app',
			data: {
				flag: false
			},
			methods: {
				// 动画钩子函数的第一个参数el，表示要执行动画的那个DOM元素，是个原生的JS DOM对象
				beforeEnter(el) { // 表示动画入场之前，此时动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
					el.style.transform = "translate(0, 0)"
					el.style.opacity = 1
				},
				enter(el, done) { // 表示动画开始之后的样式
					el.offsetWidth // 触发强制渲染
					el.style.transform = "translate(150px, 450px)"
					el.style.transition = "all 1s ease"
					el.style.opacity = 0
					// 这里的done是afterEnter函数的引用，当动画完成时立即调用afterEnter函数，必须要有
					done()
				},
				afterEnter(el) { // 动画完成之后
					// Vue把一个完整的动画，使用钩子函数拆分为了两部分
					// 这句话第一个功能是控制小球的显示与隐藏，第二个功能是直接跳过后半场动画，让flag标识符直接变为false
					this.flag = !this.flag
				}
			}
		})
	</script>
</body>
</html>

Demo5：动画——使用transition-group元素实现列表动画、appear、tag属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<style>
		li{
			border: 1px dashed #999;
			margin: 5px;
			line-height: 35px;
			padding-left: 5px;
			font-size: 12px;
			width: 100%
		}
		.v-enter,.v-leave-to{
			opacity: 0;
			transform: translateX(80px);
		}
		.v-enter-active,.v-leave-active{
			transition: all 0.6s ease;
		}
		li:hover{
			background-color: hotpink;
			transition: all 0.8s ease;
		}
		.v-move{
			transition: all 0.6s ease;
		}
		.v-leave-active{
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="app">
		<div>
			<label>Id：<input type="text" v-model="id"></label>
			<label>Name：<input type="text" v-model="name"></label>
			<button @click="add">添加</button>
		</div>
		<ul>
			<!-- 在实现列表过渡时，如果需要过渡的元素是通过v-for渲染出来的，不能使用transition包裹，需要使用transition-group -->
			<!-- 给transition-group添加appear属性，实现页面刚展示出来时候的入场效果 -->
			<!-- tag属性指定transition-group要渲染成什么元素，默认渲染为span元素 -->
			<transition-group appear tag="ul">
				<!-- 为v-for渲染的元素设置动画，必须要设置:key属性 -->
				<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
					{{ item.id }} --- {{ item.name }}
				</li>
			</transition-group>
		</ul>
	</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: '魏忠贤' }
				]
			},
			methods: {
				add() {
					this.list.push({ id: this.id, name: this.name })
					this.id = this.name = ''
				},
				del(i) {
					this.list.splice(i, 1)
				}
			}
		})
	</script>
</body>
</html>

Demo6：组件——全局组件的三种创建方式和私有组件的创建方式

<!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">
		<!--  -->
		<my-com1></my-com1>
		<hr>
		<my-com2></my-com2>
		<hr>
		<my-com3></my-com3>
	</div>
	<!-- 在被控制的#app外面，使用template元素，定义组件的html模板结构 -->
	<template id="tmpl">
		<div>
			<p>通过template元素，在外部定义的组件结构，这种方式可以用代码提示和高亮</p>
		</div>
	</template>
	<template id="tmpl2">
		<div>
			<p>私有login组件</p>
		</div>
	</template>
	<div id="app2">
		<my-com3></my-com3>
		<login></login>
	</div>
	<script type="text/javascript" charset="UTF-8">
		// 组件创建方式一
		Vue.component('myCom1', Vue.extend({
			template: '<div><p>组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来拆分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件</p><p>组件化和模块化的区别：模块化是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能；组件化是从UI界面的角度进行划分的，方便UI组件的重用</p></div>'
		}))
		// 组件创建方式二
		Vue.component('myCom2', {
			template: '<div><p>如果要使用组件，直接把组件的名称，以html标签的形式引入到页面中，组件名称含大写字母时，要把每个大写字母换成“-小写字母”</p><p>通过 template 属性，指定了组件要展示的html结构，template属性中只能有一个根元素</p></div>'
		})
		// 组件创建方式三
		Vue.component('myCom3', {
			template: '#tmpl'
		})
		var vm = new Vue({
			el: '#app'
		})
		var vm2 = new Vue({
			el: '#app2',
			components: {
				login: {
					template: '#tmpl2'
				}
			}
		})
	</script>
</body>
</html>

Demo7：组件——组件中的data与methods

<!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">
		<mycom1></mycom1>
		<counter></counter>
		<hr>
		<counter></counter>
	</div>
	<template id="tmpl">
		<div>
			<p>组件可以有自己的data，但data必须是一个方法，必须返回一个对象</p>
			<p>为了保证组件之间的data相互独立，返回的对象必须在组件内部初始化，不能引用外部的对象</p>
			<p>{{ msg }}</p>
		</div>
	</template>
	<template id="tmpl1">
		<div>
			<button @click="increment">+1</button>
			<p>{{ count }}</p>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		Vue.component('mycom1', {
			template: '#tmpl',
			data: function() {
				return {
					msg: '组件中的data调用方式和实例中的完全一样'
				}
			}
		})
		var dataObj = { count: 0 }
		Vue.component('counter', {
			template: '#tmpl1',
			data: function() {
				return dataObj
			},
			methods: {
				increment() {
					this.count++
				}
			}
		})
		var vm = new Vue({
			el: '#app'
		})
	</script>
</body>
</html>

Demo8：组件切换——使用v-if和v-else结合flag进行切换

<!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">
		<a href="" @click.prevent="flag=true">登录</a>
		<a href="" @click.prevent="flag=false">注册</a>
		<login v-if="flag"></login>
		<register v-else="flag"></register>
	</div>
	<template id="tmpl">
		<div>
			<p>登录组件</p>
		</div>
	</template>
	<template id="tmpl1">
		<div>
			<p>注册组件</p>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		Vue.component('login', {
			template: '#tmpl'
		})
		Vue.component('register', {
			template: '#tmpl1'
		})
		var vm = new Vue({
			el: '#app',
			data: {
				flag: true
			}
		})
	</script>
</body>
</html>

Demo9：组件切换——使用vue提供的component元素进行切换、应用动画和mode属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
	<style>
	.v-enter,.v-leave-to{
		opacity: 0;
		transform: translateX(150px);
	}
	.v-enter-active,.v-leave-active{
		transition: all 0.5s ease;
	}
	</style>
</head>
<body>
	<div id="app">
		<a href="" @click.prevent="comname='login'">登录</a>
		<a href="" @click.prevent="comname='register'">注册</a>
		<!-- mode="out-in"表示上个动画离开后下个动画再进入 -->
		<!-- mode="in-out"表示下个动画先进入上个动画再离开 -->
		<transition mode="out-in">
			<component :is="comname"></component>
		</transition>
	</div>
	<template id="tmpl">
		<div>
			<p>登录组件</p>
		</div>
	</template>
	<template id="tmpl1">
		<div>
			<p>注册组件</p>
		</div>
	</template>
	<script type="text/javascript" charset="UTF-8">
		Vue.component('login', {
			template: '#tmpl'
		})
		Vue.component('register', {
			template: '#tmpl1'
		})
		var vm = new Vue({
			el: '#app',
			data: {
				comname: 'login'
			}
		})
	</script>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值