vue 组件示例-demo1

最新推荐文章于 2024-08-05 11:00:00 发布

Torey_Li

最新推荐文章于 2024-08-05 11:00:00 发布

阅读量684

点赞数

分类专栏： Vue 文章标签： vue组件示例

本文链接：https://blog.csdn.net/Torey_Li/article/details/88364002

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>
        <li
        is="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-item
        v-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>