Vue入门todolist组件


<html>
<head>
<meta charset="utf-8">
<title>todoListstitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
	<div id="root">

		<input v-model="inputValue"/>
		<button @click="handleClick">添加button>
		<ul>
			<li v-for="(item,index) of lists">{{item}}li>
		ul>
	div>
<script>
	new Vue({
		el:"#root",
		data:{
			msg:"hello world",
			inputValue:'',
			lists:[]
		},
		methods:{
			handleClick: function(){
				this.lists.push(this.inputValue);
				this.inputValue='';
			}
		}
	})
script>
body>
html>

向一个列表中添加元素,并显示出来

组件


<html>
<head>
<meta charset="utf-8">
<title>todoListstitle>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
	<div id="root">

		<input v-model="inputValue"/>
		<button @click="handleClick">添加button>
		<ul>
			<todolist v-for="(item,index) of lists" :content="item">todolist>
		ul>
	div>
<script>

	Vue.component('todolist',{
		props:['content'],
		template:'
  • {{content}}
  • '
    }) new Vue({ el:"#root", data:{ msg:"hello world", inputValue:'', lists:[] }, methods:{ handleClick: function(){ this.lists.push(this.inputValue); this.inputValue=''; } } })
    script> body> html>

    每个组件都是新的Vue实例,Vue的项目都是有一个个的实例组成的,父组件向子组件传数据通过属性来进行,如程序中的content

    子组件中的方法

    
    <html>
    <head>
    <meta charset="utf-8">
    <title>todoListstitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    head>
    <body>
    	<div id="root">
    
    		<input v-model="inputValue"/>
    		<button @click="handleClick">添加button>
    		<ul>
    			<todolist v-for="(item,index) of lists" :content="item">todolist>
    		ul>
    	div>
    <script>
    
    	Vue.component('todolist',{
    		props:['content'],
    		template:'
  • {{content}}
  • '
    , methods:{ handleClick: function(){ alert('123') } } }) new Vue({ el:"#root", data:{ msg:"hello world", inputValue:'', lists:[] }, methods:{ handleClick: function(){ this.lists.push(this.inputValue); this.inputValue=''; } } })
    script> body> html>

    子组件向父组件传参数

    
    <html>
    <head>
    <meta charset="utf-8">
    <title>todoListstitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    head>
    <body>
    	<div id="root">
    
    		<input v-model="inputValue"/>
    		<button @click="handleClick">添加button>
    		<ul>
    			<todolist v-for="(item,index) of lists" :content="item" :index="index" @delete="handleDelete">todolist>
    		ul>
    	div>
    <script>
    
    	Vue.component('todolist',{
    		props:['content','index'],
    		template:'
  • {{content}}
  • '
    ,//1.点击要删除的元素会触发子组件中handleClick方法 methods:{ handleClick: function(){//2.执行方法,触发一个delete事件(此事件是自定义的),并向事件中传递一个参数 this.$emit('delete',this.index) } } }) new Vue({ el:"#root", data:{ msg:"hello world", inputValue:'', lists:[] }, methods:{ handleClick: function(){ this.lists.push(this.inputValue); this.inputValue=''; }, handleDelete: function(index){//4.监听到delete事件后执行删除动作 alert("删除"+this.lists[index]); this.lists.splice(index,1); } } })
    script> body> html>

    你可能感兴趣的:(vue,vue)