初学Vue

最新推荐文章于 2023-05-13 21:52:33 发布

个人向日记

最新推荐文章于 2023-05-13 21:52:33 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/hooandlee/article/details/90515735

vue 专栏收录该内容

1 篇文章

订阅专栏

此博客围绕初学者学习Vue展开，虽无具体内容，但可推测会涉及Vue的基础学习，如基本概念、使用方法等，帮助新手开启Vue学习之旅。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
	<script src="vue.js"></script>
</head>
<body>
<!--挂载点-->
<div id="demo">
	<!--双向绑定-->
	<input v-model="v"/><button v-on:click="submitData">add</button>
	<!--插值;v-if -->
	<p v-if="show">{{count}}</p>
	<p>
		<!--事件；方法-->
		<button v-on:click="disappear">display switch</button>
	</p>
	<p>{{vAndCount}}</p>
	<ul>
		<!-- 组件，v-for,template--><!--监听delete-event事件，触发就执行deleteData方法-->
		<lie v-for="(element,index) of list"
				v-bind:item="element"
				v-bind:key="index"
				v-bind:index="index"
				v-on:delete-event="deleteData"
		></lie>
	</ul>
</div>

<script>
	<!--组件-->
	Vue.component('lie',{
		props:['item','index'],
		template:'<li v-on:click="sentDeleteCmd">{{item.id}}&nbsp;&nbsp;&nbsp;{{item.name}}&nbsp;&nbsp;{{index}}</li>',
		methods:{
			sentDeleteCmd:function(){
							<!--定义delete-event事件-->
				this.$emit('delete-event',this.index)
			}
		}
	})
	
	var app=new Vue({
		<!--挂载点-->
		el:'#demo',
		<!--数据-->
		data:{
			v:'',
			count:0,
			show:true,
			list:[{id:1,name:'zhao'},{id:2,name:'ming'}]
		},
		<!--方法-->
		methods:{
			disappear:function(){
				this.show=!this.show
			},
			submitData:function(){
				this.list.push({id:this.list.length+1,name:this.v})
				this.v=''
			},
			deleteData:function(i){
				this.list.splice(i,1)
			}
		},
		<!--计算-->
		computed:{
			vAndCount:function(){
				return '当前内容为：'+this.v+',变动了'+this.count+'次'
			}
		},
		<!--监听-->
		watch:{
			v:function(){
			this.count++
		}
		}
	})
</script>
</body>
</html>