美文网首页
vue.js学习(二)

vue.js学习(二)

作者: 小岛wink | 来源:发表于2019-05-09 14:59 被阅读0次

1、简单的todoList()
实现输入框输入值显示在下方,每添加一次,清空输入框。

    <div id="root">
         <input  v-model="inputValue"/>
         <button @click="handleClick">change</button>
         <Ul>
            <li v-for="(item,index) of list " :key="index">{{item}}</li>
         </ul>
    </div>

    <script>
    
    new Vue({
        el:"#root",
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            }
        }
    })
    </script>

2、组件
组件:页面上的某一部分,
把li标签作为一个组件,先定义一个组件

         <ul>
            <todo-item > </todo-item>
         </ul>

在js中,定义一个全局组件,

    //全局组件
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>item</li>'
    })

界面显示一个li标签内容


image.png

我们依旧想每次在input框中输入内容后点击按钮,添加一个li标签显示输入的内容,那么组件中也循环添加list;其中循环时我们调用这个模版时候,通过属性的方式传参,定义一个content属性,值为循环每一项的内容(item)

        <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            > 
            </todo-item>
         </ul>

此时,在模版中直接写{{content}}是不行的,组件必须接收这个属性,因此需要定义一个props的属性,值为数组,可以将content写在这里,就可以应用了,代码如下:

      //全局组件
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>item</li>'
    })

以上是全局组件,我们也可以定义局部组件,vue中需要定义components,就是应用局部组件了

    //局部组件
    var todoItem = {
        props:['content'],
        template:'<li>{{content]}}</li>'
    }

    new Vue({
        el:"#root",
        components:{
            'todo-item':todoItem
        },
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            }
        }
    })

全局组件和局部组件的完整代码如下,以供参考:

    <div id="root">
         <input  v-model="inputValue"/>
         <button @click="handleClick">change</button>
         <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            > 
            </todo-item>
         </ul>
    </div>      
    <script>
    //全局组件
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>item</li>'
    })
    
    //局部组件
    var todoItem = {
        props:['content'],
        template:'<li>{{content}}</li>'
    }

    new Vue({
        el:"#root",
        components:{
            'todo-item':todoItem
        },
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            }
        }
    })
    </script>

组件也是一个实例,在组件中也可以添加methods,data等

    //局部组件
    var todoItem = {
        props:['content'],
        template:'<li @click="clickhere">{{content}}</li>',
        methods:{
            clickhere:function(){
                alert()
            }

        }
    }

实现tudoList删除功能(父子组件相互传值)
功能实现:input添加的li标签,点击后删除该项。
在子组件模版中添加点击事件,子组件数据删除,是需要将父组件中list对应的一项删除,因此点击时候需要子组件与父组件通信:发布订阅模式,不要忘了子组件需要接受点击项的下表 (index),在props里记得添加上index,模版中也记得加上参数;

        <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            :index="index"
            @delete="handleDelete"
            > 
            </todo-item>
         </ul>

通知父组件把需要的项删掉:this.$emit方法,出发delete事件,并吧index传递出去,父组件中需监听并出发父组件的方法,添加@delete="handleDelete"
则需添加

//局部组件
    var todoItem = {
        props:['content','index'],
        template:'<li >{{content}}</li>',
        methods:{
            clickhere:function(){
                this.$emit('delete',this.index)
            }

        }
    }

之后在父组件中,添加上handleDelete方法,获取index参数值,并应用splice将对应项删除,完成
完整代码:

    <div id="root">
         <input  v-model="inputValue"/>
         <button @click="handleClick">change</button>
         <ul>
            <todo-item 
            v-for="(item,index) of list" 
            :key="index"
            :content="item"
            :index="index"
            @delete="handleDelete"
            > 
            </todo-item>
         </ul>
    </div>      
    <script>
    //局部组件
    var todoItem = {
        props:['content','index'],
        template:'<li @click="clickhere">{{content}}</li>',
        methods:{
            clickhere:function(){
                this.$emit('delete',this.index)
            }

        }
    }

    new Vue({
        el:"#root",
        components:{
            'todo-item':todoItem
        },
        data:{
             inputValue: '',
             list:[]
        },
        methods:{
            handleClick:function(){
                this.list.push(this.inputValue) ;
                this.inputValue = ''
            },
            handleDelete:function(index){
                this.list.splice(index,1)
            }
        }
    })
    </script>

相关文章

  • vue.js学习(二)

    1、简单的todoList()实现输入框输入值显示在下方,每添加一次,清空输入框。 2、组件组件:页面上的某一部分...

  • vue框架基本使用

    一、下载vue.js https://cn.vuejs.org/ 学习-》教程-》安装 开发版本 二、路径 将vu...

  • 前端基础知识学习---Vue.js学习(一)模板语法

    Vue.js学习笔记 Vue.js的使用之HelloWord 引入Vue.js 创建Vue对象其中el:指定根el...

  • Vue.js 学习之路(二)

    npm install npm install 模块安装机制简介 关于 npm install 模块安装机制的简介...

  • vue.js学习笔记二

    Vue.js 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以...

  • Vue.js学习笔记(二)

    声明:本文章并非原创,而是参考黑马程序员Vue.js教程配套资料,仅供学习使用,侵删。 数组操作 注: 数组操作具...

  • Vue.js 学习笔记(二)

    自定义指令 示例,文本框自动获取焦点 自定义全局指令 使用 Vue.directive() 定义全局指令。 和样式...

  • Vue.js 介绍

    建议学习时长: 30分钟学习方式:了解 学习目标 知道什么是 Vue.js 了解 Vue.js 的特点 能运行 H...

  • Vue.js开发常见问题解析

    此前的Vue.js系列文章: Vue.js常用开发知识简要入门(一) Vue.js常用开发知识简要入门(二) Vu...

  • 2018-04-24 vue.js

    这是关于vue.js学习的心得。

网友评论

      本文标题:vue.js学习(二)

      本文链接:https://www.haomeiwen.com/subject/vtzioqtx.html