vue 组件示例-demo1

本文主要是介绍vue 组件示例-demo1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue组件使用–示例一

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><ol><li>ddsss</li><!--创建一个todo-item组件的实例--><todo-item></todo-item><todo-item></todo-item><todo-item></todo-item></ol>
</div>
<script>//在vue里注册组件，定义todo-item的新组件Vue.component('todo-item',{template:"<li>This is a todo</li>"});var app=new Vue({el:"#app",});
</script>
</body>
</html>

Vue组件示例二:从父作用域将数据传到子组件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><ol><todo-item v-for="item in groceryList"v-bind:todo="item"v-bind:key="item.id"></todo-item></ol>
</div>
<script>//在vue里注册组件，定义todo-item的新组件Vue.component('todo-item',{//todo-item 组件props:['todo'],template:"<li>{{todo.text}}</li>"});var app=new Vue({el:"#app",data:{groceryList:[{id:0,text:'蔬菜'},{id:1,text:'奶酪'},{id:2,text:'白菜'},]}});
</script>
</body>
</html>

Vue示例三列表渲染-简单的 todo list 的完整例子

示例参照连接
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><form v-on:submit.prevent="addNams"><label>姓名</label><input v-model="newName" placeholder="请输入姓名"><button>添加</button></form><ul><liis="name-item"v-for="(item,index) in peoples"v-bind:key="item.id"v-bind:name="item.name"v-on:remove22="peoples.splice(index,1)"></li></ul><!--以下这种写法也可以-->
<!--    <ul><name-itemv-for="(item,index) in peoples"v-bind:key="item.id"v-bind:name="item.name"v-on:remove22="peoples.splice(index,1)"></name-item></ul>-->
</div>
<script>
//子组件可以使用 $emit 触发父组件的自定义事件。Vue.component('name-item',{template:'<li>{{name}}' +'<button v-on:click="$emit(\'remove22\')">remove</button></li>',props:['name']});new Vue({el:'#app',data(){return{newName:'',peoples:[{id:1,name:'小明'},{id:2,name:'小明2'},{id:3,name:'小明3'}],newId:4}},methods:{addNams(){if(this.newName!=''){this.peoples.push({id:this.newId,name:this.newName});this.newId++;this.newName="";}}}});
</script>
</body>
</html>