vue中的组件

最新推荐文章于 2020-12-22 10:16:55 发布

GastonPeng

最新推荐文章于 2020-12-22 10:16:55 发布

阅读量149

点赞数

分类专栏：前端文章标签： vue中的组件

本文链接：https://blog.csdn.net/qq_36421955/article/details/81022325

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

还有一个vue.js文件请看vue基础语法部分,注意,每个模块主讲的内容在title标签中有说明

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>todolist功能开发</title>
  <script src="./Vue.js"></script>
</head>
<body>
<!--

-->
	<div id="root">
      <div>
	    <input v-model="inputValue"/>
		<button @click="clickSubmit">提交</button>
		<ul>
		  <li v-for="(item,index) of list" :key="index">
		    {{item}}
		  </li>
		<ul>
	  </div>
	</div>
	<script>
		new Vue({         
		   el: "#root",
		   data:{
		     inputValue:'',
			 list:[]
		   },
		   methods:{
		     clickSubmit:function(){
			   this.list.push(this.inputValue);
			   this.inputValue='';
			 }
		   }
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>todolist中的组件拆分</title>
  <script src="./Vue.js"></script>
</head>
<body>
<!--
组件就是页面的一部分
定义组件,各个组件通信
component是全局组件页面都可以用该组件
还有局部组件定义TodoItem此时需要做组件声明components
-->
	<div id="root">
      <div>
	    <input v-model="inputValue"/>
		<button @click="clickSubmit">提交</button>
	  </div>
	  <ul>
		<todo-item v-for="(item,index) of list" :key="index" :content="item">
		  {{item}}
		</todo-item>
	  </ul>
	</div>
	<script>
      /*  Vue.component('todo-item',{
	      props: ['content'],/*表示组件从外边接收一个数据
		  template: '<li>hello</li>'
		}) */
		var TodoItem={
		  props: ['content'],/*表示组件从外边接收一个数据*/
		  template:'<li>{{content}}</li>'
		}

		new Vue({         
		   el: "#root",
		   components:{
		     'todo-item':TodoItem
		   },
		   data:{
		     inputValue:'',
			 list:[]
		   },
		   methods:{
		     clickSubmit:function(){
			   this.list.push(this.inputValue);
			   this.inputValue='';
			 }
		   }
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件和实例的关系</title>
  <script src="./Vue.js"></script>
</head>
<body>
<!--
组件就是一个实例,一个大的项目就是由万万千千的实例组成
如果一个实例没有template就会去找挂载点,次处为root把root标签的所有内容
当成模板使用,模板就是挂载点内的内容
-->
	<div id="root">
      <div>
	    <input v-model="inputValue"/>
		<button @click="clickSubmit">提交</button>
	  </div>
	  <ul>
		<todo-item v-for="(item,index) of list" :key="index" :content="item">
		  {{item}}
		</todo-item>
	  </ul>
	</div>
	<script>
      /*  Vue.component('todo-item',{
	      props: ['content'],/*表示组件从外边接收一个数据
		  template: '<li>hello</li>'
		}) */
		var TodoItem={
		  props: ['content'],/*表示组件从外边接收一个数据*/
		  template:'<li @click="handleClick">{{content}}</li>',
		  methods:{
		    handleClick:function(){
			  alert('clicked')
			}
		  }
		}

		new Vue({         
		   el: "#root",
		   components:{
		     'todo-item':TodoItem
		   },
		   data:{
		     inputValue:'',
			 list:[]
		   },
		   methods:{
		     clickSubmit:function(){
			   this.list.push(this.inputValue);
			   this.inputValue='';
			 }
		   }
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件和实例的关系</title>
  <script src="./Vue.js"></script>
</head>
<body>
<!--
组件是实例的子组件,实例给子组件传值是通过属性比如上一个例子的content属性
实现点击li的内容时能够删除该li内容,显示与否取决于父组件的list里的数据
实现父组件和子组件通信,通过发布订阅模式来做这件事情
$emit触发事件,delete事件,这个事件里携带了index的值,此时子组件可以监听这个事件
@delete="handleDelete"然后在父组件中写handleDelete方法并且可以传参数index
-->
	<div id="root">
      <div>
	    <input v-model="inputValue"/>
		<button @click="clickSubmit">提交</button>
	  </div>
	  <ul>
		<todo-item v-for="(item,index) of list" 
		:key="index" 
		:content="item"
		:index="index"
		@delete="handleDelete"
		>
		</todo-item>
	  </ul>
	</div>
	<script>
      /*  Vue.component('todo-item',{
	      props: ['content'],/*表示组件从外边接收一个数据
		  template: '<li>hello</li>'
		}) */
		var TodoItem={
		  props: ['content','index'],/*表示组件从外边接收一个数据*/
		  template:'<li @click="handleClick">{{content}}</li>',
		  methods:{
		    handleClick:function(){
			  this.$emit('delete',this.index)
			}
		  }
		}

		new Vue({         
		   el: "#root",
		   components:{
		     'todo-item':TodoItem
		   },
		   data:{
		     inputValue:'',
			 list:[]
		   },
		   methods:{
		     clickSubmit:function(){
			   this.list.push(this.inputValue);/*在list里添加数据*/
			   this.inputValue='';
			 },
			 handleDelete:function(index){
			   this.list.splice(index,2)/*从list里删除从最后一个数据开始数的两条数据*/
			 }
		   }
		})
	</script>
</body>
</html>