vue组件使用样例

漫漫人生路^_^

已于 2022-03-17 19:39:55 修改

阅读量573

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-03-17 18:28:41 首次发布

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_46198929/article/details/123557250

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文展示了如何在 Vue.js 中创建并使用自定义组件，包括数据绑定、事件处理和组件嵌套。通过示例代码，可以看到如何定义组件模板、数据属性以及在父组件中使用这些组件。此外，还演示了如何在组件中添加输入元素并监听用户交互，以展示一个简单的电话号码输入和显示功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <runoob></runoob>
		</div>
		 
		<script>
		var Child = Vue.extend({
		  template:`<h1>自定义组件!{{address}}  
		  <p>{{name}}</p></h1> 
		  `,
		  data(){
			  return{
				  address:'北极',
				  name:'gcg'
			  }
		  }
		})
		 
		// 创建根实例
		new Vue({
		  el: '#app',
		  components: {
		    // <runoob> 将只在父模板可用
		    'runoob': Child
		  }
		})
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <runoob></runoob>
			<p>{{msg}}</p>
		</div>
		
		<script>
		var Child = Vue.extend({
		  template:`<h1>自定义组件!{{address}}  
		  <p>{{name}}</p></h1> 
		  `,
		  data(){
			  return{
				  address:'北极',
				  name:'gcg'
			  }
		  }
		})
		 
		// 创建根实例
		new Vue({
		  el: '#app',
		  data(){
			  return{
				  msg:'fff'
			  }
		  },
		  components: {
		    // <runoob> 将只在父模板可用
		    'runoob': Child
		  }
		})
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			.mybutton{
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="app">
		    <runoob></runoob>
			<p>{{msg}}</p>
			
			<people></people>
		</div>
		
		<script>
		var adult = Vue.extend({
		  template:`<h1>自定义组件!{{address}}  
		  <p>{{name}}</p></h1> 
		  `,
		  data(){
			  return{
				  address:'北极',
				  name:'gcg'
			  }
		  }
		})
		const people=Vue.extend({
			template:`
				<div>
					<input type="text" v-model="telphone">
					<p>{{telphone}}</p>
					<button type="button" @click="showtelephone" :class="mybutton" ></button>
				</div>
			`,
			data(){
				return{
					telphone:'17302275258',
					mybutton:'mybutton'
				}
			},
			methods:{
				showtelephone(){
					alert(this.telphone);
				}
			}
		})
		// 创建根实例
		new Vue({
		  el: '#app',
		  data(){
			  return{
				  msg:'fff'
			  }
		  },
		  components: {
		    // <runoob> 将只在父模板可用
		    'runoob': adult,
			people/*people:people的简写*/
		  }
		})
		</script>
	</body>
</html>

在这里插入图片描述

漫漫人生路^_^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件使用样例

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <runoob></runoob> </d
复制链接

扫一扫

专栏目录