vue.js学习

初探Vue.js：任务列表应用

最新推荐文章于 2025-03-26 11:00:06 发布

gdragon_nana

最新推荐文章于 2025-03-26 11:00:06 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/gdragon_nana/article/details/83416443

本篇博客介绍了一位新手通过视频教学学习Vue.js的过程，重点展示了一个任务列表应用的开发步骤，包括如何使用v-model双向绑定输入框，通过v-for循环渲染列表项，以及自定义组件和事件传递等核心概念。

最近跟着视频教学学习vue.js。

说真的，我觉得vue.js应该算作后端，函数，循环，增删改查功能。

一遍遍的跟着练习，回放练习，真的想哭脸。

头部的js，可以直接去vue.js官方下载也可以引用链接。

链接：https://cdn.staticfile.org/vue/2.4.2/vue.min.js

以下的代码是根据教学内容来编写的。

之后在学习几次，才来进行项目的编写，到时候可能会分享上来。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>TooList</title>
   <script src="vue.js"></script>
</head>
<body>
   <div id="root">
       <div>
           <input v-model="inputValue"/>
           <button @click="handlesubmit">提交</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','index'],
   template:'<li @click="handclick">{{content}}</li>',
   methods:{
       handclick:function(){
           this.$emit('delete',this.index)
       }
   }
// 模板
})
// 局部组件
// var todoitem={
//    template:'<li>item</li>'
// }
       new Vue({
           el:"#root",
           // 调用局部组件
           // components:{
// 'todo-item':todoitem
           // },
           data:{
               inputValue:"",
               list:[]
           },
           // template:'',
           methods:{
               handlesubmit:function(){
                   this.list.push(this.inputValue)
                   this.inputValue=''
               },
               handleDelete:function(index){
                   this.list.splice(index,1)
               }
           }
       })
   </script>
</body>
</html>