Vue学习笔记重点（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo-list组件版</title>
    <script src="js/vue.js"></script>
    <style>
        #app{
            width: 300px;
            border: 1px solid #ccc;
        }
    </style>
    <script>

    </script>
</head>
<body>
<div id="app">
    <form @submit.prevent="addNewTodo">
        <!--⬆️这里使用表格的submit属性，是为了符合规范，将表格的submit属性绑定给addNewTodo这个变量，在vue实例中再对addNewTodo赋予具体要操作的函数-->
        <label for="new-todo">add to list</label>
        <!--label的for标签与表单元素的id绑定，实现效果为：点击表单文字时，会自动在表格中的input出现光标-->

        <!--v-model用于绑定input中的文字与vue数据中的变量，在后面vue实例中，直接使用了newTodoText来获取当前input中的值-->
        <input
                v-model="newTodoText"
                id="new-todo"
                type="text"
                placeholder='请输入文字'>
        <input type="submit"  value="add">
        <!--<button type="button" id="btn1">add</button>-->
        <!--此处如果用button标签，必须给button标签加上type-->
    </form>
    <ul class="ul1">
        <todo-item
            v-for="(todo,index) in todos"
            :key="todo.id"
            :title="todo.title"
            :index="index"
            v-on:removec="todos.splice(index,1)"
        >
            <!--splice中第一项为数组中要执行删除的位置，第二项为删除的数量.ps：index是不跟随项的，一直都是固定的0123456-->
            <!--removec是自定义的事件，在后面使用$emit()方法绑定到了删除按钮的click事件上。此处使用v-on绑定在组件上，是因为函数的操作就在todos上-->
        </todo-item>
    </ul>
</div>
</body>
<script>
    Vue.component('todo-item',{
        props:['title','index'],//这里主要需要传的是本来在组件里不出现的东西
        template:'<li>{{ index }}--{{ title }}<input value="删除" v-on:click="$emit(\'removec\')" type="button"></li>'
        //$emit(eventName)是触发事件的函数，removec是自定义的事件，绑定在了html中的todo-item中。由删除按钮的click来触发，相当于按钮按下时经过了两层事件，首先是click，然后是自定义的removec。

    });
    new Vue({
        el:'#app',
        data:{
            newTodoText:'',
            todos:[
                {
                    id:1,
                    title:'学习vue'
                },
                {
                    id:2,
                    title:'学习组件的基础'
                },
                {
                    id:3,
                    title:'实践一个小项目'
                }
            ],
            nextTodoId:4
        },


        methods:{
            addNewTodo:function(){   //这里的addNewTodo绑定的是form表格的sublime属性，即表格提交时（也就是按提交按钮时），触发该函数
                this.todos.push(//此处的this为整个vue实例，这里直接把新的id和title推进实例中的todos[]中，而没有直接与html、dom交互，实在是妙啊（之前也说过，vue实例是会随改变刷新局部页面）。
                    {
                        id:this.nextTodoId++,//每次递增自定义id编号，然后赋值给id
                        title: this.newTodoText //data中的newTodoText用v-model与input绑定了，这里直接取到了文本框中的内容
                    }
                );
                this.newTodoText = '';   //此行代码作用为每次点增加按钮时，清空文本框中的内容
            }
        }

    })


</script>
</html>
Vue学习笔记重点（1）

猜你喜欢
