Vue官网教程学习过程中值得记录的一些事情

luxixing 发布于2019-08-29 17:30 / 2425人阅读

摘要：今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图代码如下标签名例如工作，学习添加标签删除代码如下赵喜娜其中，官网上讲到了一个按键修饰符在监听键盘事件时，我们经常需要检查常见的键值。

今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图

html代码如下


        
            标签名: 
        
        

        
            
               {{index}} {{item.something}}

js代码如下

var app = new Vue({
        el:"#app",
        data(){
            return{
                content:"",
                datalist:[
                    {id:0,something:"赵喜娜"},
                    {id:1,something:"Jhon Sena"},
                    {id:2,something:"visual studio code"},
                ],
                nextId:3,
            }
        },
        methods:{
            addlist(){
                this.datalist.push(
                    {id:this.nextId++,something:this.content}
                )
                this.content=""
            },
            remove(index){
                this.datalist.splice(index,1)
                console.log(index)
            }
        },
        created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },
    })

其中，官网上讲到了一个按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

我在代码里加上了@keyup.enter 然而，按回车键并没有什么用，要先获得一次焦点以后才能够按键触发，当然也百度到了解决办法，办法就是在created里面添加一个键盘事件

    created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },

就ok了

私有云专线服务深度学习的一些应用深度学习的过程机器学习的过程 php存储过程记录集

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114371.html

Vue官网教程学习过程中值得记录的一些事情

摘要：今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图代码如下标签名例如工作，学习添加标签删除代码如下赵喜娜其中，官网上讲到了一个按键修饰符在监听键盘事件时，我们经常需要检查常见的键值。今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图showImg(https://segmentfault.com/img/bVbkJ3w?w=328&h=134); html代码如下...

flyer_dev 2019-08-23 13:55 评论0 收藏0
Vue官网教程学习过程中值得记录的一些事情

摘要：今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图代码如下标签名例如工作，学习添加标签删除代码如下赵喜娜其中，官网上讲到了一个按键修饰符在监听键盘事件时，我们经常需要检查常见的键值。今天在官网上学习过程中看到了一个挺有趣的东西，具体效果如下图showImg(https://segmentfault.com/img/bVbkJ3w?w=328&h=134); html代码如下...

lowett 2019-08-02 12:11 评论0 收藏0
B站Up主-山地人-这位老哥2019年的前端自学计划进展如何？——讲一个B站Up主自学前端85天的故

摘要：前言自从上次在掘金发布年山地人的前端完整自学计划讲一个站主山地人的天前端自学故事以来，一眨眼山地人老哥在站做主已经有天了。所以这个体系里的一些框架包括也是山地人年自学计划的一部分。月底，山地人老哥开启了的两个专题。前言自从上次在掘金发布【2019年山地人的前端完整自学计划——讲一个B站UP主山地人的40天前端自学故事】以来，一眨眼山地人老哥在B站做Up主已经有85天了。时隔一个...

cocopeak 2019-08-23 15:36 评论0 收藏0
uni-app官方教程学习手记

摘要：当时下载了一个，下载了官方提供的示例教程。关于项目目录开发规范一定要遵守，直接通过官网学习即可。最后就是发布安卓包和苹果包了。我将自己做的第一个新闻列表新闻详情程序打包，安装到了安卓手机上测试了下，效果非常棒。本人微信公众号：前端修炼之路，欢迎关注背景介绍大概在今年的十月份左右，我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X，下载了官方提供的hell...

chanthuang 2019-06-25 12:28 评论0 收藏0
uni-app官方教程学习手记

摘要：当时下载了一个，下载了官方提供的示例教程。关于项目目录开发规范一定要遵守，直接通过官网学习即可。最后就是发布安卓包和苹果包了。我将自己做的第一个新闻列表新闻详情程序打包，安装到了安卓手机上测试了下，效果非常棒。本人微信公众号：前端修炼之路，欢迎关注背景介绍大概在今年的十月份左右，我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X，下载了官方提供的hell...

miracledan 2019-06-25 17:00 评论0 收藏0