vue基础3

最新推荐文章于 2024-09-18 17:27:15 发布

哈哈哈哈哈哈3

最新推荐文章于 2024-09-18 17:27:15 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/penliyoushui/article/details/105777921

本文深入探讨了Vue.js框架中的关键概念，包括过滤器、计算属性和生命周期钩子的使用，通过实例展示了如何利用这些特性增强应用的功能性和响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤器

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<div id="app"></div>
	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('myReverse', function (value, arg1) {
			return arg1 + ' ' + value.split('').reverse().join('');
		});
		// 过滤器的作用： 对你当前的数据添油加粗
		/*在组件内部用 filters:{
			过滤器的名字:function(value){
				//内部一定要return 
			}
			调用过滤器 ：  数据属性 | 过滤器的名字
		}
		*/
		var App = {
			data() {
				return {
					price: 0,
					msg: 'hello filter'
				}
			},
			template: `
				<div>
					<input type="number" name = 'price' v-model = 'price'/>
					<h3>{{price | myCurrentcy}}</h3>
					<h4>{{ msg  | myReverse('hehe')}}</h4>
				</div>
			`,
			filters: {
				myCurrentcy: function (value) {
					return '¥' + value;
				}
			}
		}
		new Vue({
			el: '#app',
			components: {
				App
			},
			template: '<App />'
		});
	</script>
</body>
</html>

watch

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<div id="app">
		<input type="text" name="" v-model='msg'>
		<h3>{{msg}}</h3>
		<button @click='stus[0].name = "rose"'>改变</button>
		<h4>{{stus[0].name}}</h4>
	</div>
	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: function () {
				return {
					msg: '',
					stus: [{
						name: 'jack'
					}]
				}
			},
			watch: {
				msg: function (newV, oldV) {
					// console.log(newV,oldV);
					if (newV === 'tusir') {
						console.log('tusir 出来了');
					}
				},
				// 监听复杂数据类型  object array 深度监视  
				stus: {
					deep: true, //深度监视
					handler: function (newV, oldV) {
						console.log(newV[0].name);
					}
				}
			}
		});
	</script>
</body>
</html>

computed 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
		}
		ul li{
			margin: 20px 20px;
			padding: 10px 5px;
			border-radius: 3px;
		}
		ul li.active{
			background-color: #66FFFF;
		}

	</style>
</head>
<body>
	<div id="app">
		<audio :src = 'getCurrentSongSrc' autoplay  controls></audio>
		<ul>
			<li v-for = '(item,index) in musicData' :class = '{active:currentIndex == index}' @click = 'clickHandler(index)'>
				<h2>{{item.id}}- 歌名：{{item.name}}</h2>
				<p>歌手:{{item.author}}</p>
			</li>
		</ul>
	</div>
	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		
		var musicData = [
			{id:1,name:'于荣光 - 少林英雄',author:'于荣光',songSrc:'./static/于荣光 - 少林英雄.mp3'},
			{id:2,name:'Joel Adams - Please Dont Go',author:'Joel Adams',songSrc:'./static/Joel Adams - Please Dont Go.mp3'},
			{id:3,name:'MKJ - Time',author:'MKJ',songSrc:'./static/MKJ - Time.mp3'},
			{id:4,name:'Russ - Psycho (Pt. 2)',author:'Russ',songSrc:'./static/Russ - Psycho (Pt. 2).mp3'}
		];
		new Vue({
			el:'#app',
			data(){
				return {
					musicData:musicData,
					currentIndex: 0
				}
			},
			computed:{
				getCurrentSongSrc:function() {
					// 默认只有getter
					return this.musicData[this.currentIndex].songSrc
				}
			},
			methods:{
				clickHandler(index){
					this.currentIndex = index;
				}
			}
		});
	</script>
</body>
</html>