vue你不知道的奇淫绝技

ixlei 发布于2019-08-22 13:58 / 2286人阅读

摘要：之前做过的组件配置系统核心就是它。但是如果你想改动到这个元素的样式，但是又不想改动公用模板。

1.placeholder与computed巧用

表单开发肯定是日常开发中必不可少的环节，可是设计图经常会有表单默认值的设计，比如:

需求方的需求点是：在没有输入值的时候显示默认值，在输入值的时候显示输入值。

通常就能想到用placeholder来解决这个问题，并且通常会用v-model来绑定data中的值。然后，data的值再设定默认值为空

//script
data(){
    return {
        index:0,
        name:""
    }
}
//template

以上这种效果是,第一个input的placeholder的值显示不出，显示了index的值：0，不符合需求
第二种能显示placeholder的值,需求满足。

但是一些复杂的需求，比如，让用户选择城市名(city)和国家名(country)，最后在一个变量(countryAndCity)上显示，这个时候就要用computed

//template




//script
data(){
    return {
        city:"",
        country:""
    }
},
computed:{
    countryAndCity () {
        let str = ""
        if(this.city && this.country){
            str = `${this.city}+${this.country}`
        }
        return str
    }
}

在上面就需要做个判断，当city和country有值的情况才显示结果，否则显示placeholder的值。

2.单选选中和多选选中的设计

诸如经过设计师设计的单选和多选按钮

单选按钮就比较简单了

//template
{{item}}

//script

data(){
    return {
        currentIndex:0，
        list:["aa","bb","cc","dd"]
    }
},
methods:{
    select(index){
        this.currentIndex = index
    }
}

上面很简单，大概看看就懂了，这是单选的情况，那要是多选的情况呢，那就要换个思路了

首先换个数据格式

data(){
    return {
        list:[
        {text:"aa",isActive:false},
        {text:"bb",isActive:false}
        {text:"cc",isActive:false}"
        ]
    }
},
methods:{
    select(index){
        this.list[index].isActive = !this.list[index].isActive
    }
}

然后template就要变成这样

{{item.text}}

3.动态组件和异步组件的使用

动态组件一般很少用到，但是要做动态引入组件的时候真的超级好用。之前做过的组件配置系统核心就是它。我用的是一个动态组件循环，然后用is获取组件名，用props获取各个组件的自定义props



componentList:[{ name:"index",props:{title:"title"}}]

4.created和mounted的服务端渲染

created和mounted在客户端渲染时期window对象都是存在的，所以可以直接操作。
但是在服务端渲染时期，它们两者的window都是不存在的，所以要加一句判断,在所有逻辑前面

if(typeof window !== "object") return ;

5.this.$emit的妙用

基于组件化思维，很多时候我们会把一个页面拆分成几个组件，然后会提取一些公用的组件，比如dialog弹窗组件，他的打开和关闭，都是根据引用组件页面的data的一个值来决定，

//app.vue


data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    }
}

但是关闭按钮通常是写在dialog组件内部的，也就是说，在引用组件页面是没有这个按钮可以点击的，
所以，可以在dialog里面将点击时间的信号传递出来，引用组件页面接收到了信号，再控制关闭

//dialog.vue
 
 点击关闭 

methods:{
    close() {
        this.$emit("close")
    }
}    

//app.vue


data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    },
    closeDialog(){
        this.isDialog = false
    }
}

大致的思路就是把真正关闭的操作，放在isDialog的页面，方便操作。
后续还会出一个不这样引用，直接在methods的方法中引用的公用组件写法，敬请期待

6.css的scoped

vue中的css可以用scoped这个关键子来限制css的作用域

这个日常就会用到，因为这样就不用考虑class的命名会重合，加上使用sass、less、stylus、postcss等css处理器，效果简直杠杠的。
但是如果你想改动到body这个元素的css样式，但是又不想改动公用layout模板。那你就可以在一个vue文件写两个style标签

大概就先写这么多啦，之后再补充，欢迎关注

GPU云服务器云服务器你不知道你不知道的你不知道的javascript 你不知道的javascript上卷

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

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

Gradle更小、更快构建APP的奇淫技巧

摘要：本文已获得原作者授权同意，翻译以及转载原文链接作者译文链接更小更快构建的奇淫技巧翻译人上个月，我有机会在发表演讲。禁用更新构建下一个技能是在中禁用更新构建。它将使每小时检查库的新版本，并增加构建时间。本文已获得原作者授权同意，翻译以及转载原文链接：Build your Android app Faster and Smaller than ever作者：Jirawatee译文链接：...

mcterry 2019-06-24 18:16 评论0 收藏0
Gradle更小、更快构建APP的奇淫技巧

摘要：本文已获得原作者授权同意，翻译以及转载原文链接作者译文链接更小更快构建的奇淫技巧翻译人上个月，我有机会在发表演讲。禁用更新构建下一个技能是在中禁用更新构建。它将使每小时检查库的新版本，并增加构建时间。本文已获得原作者授权同意，翻译以及转载原文链接：Build your Android app Faster and Smaller than ever作者：Jirawatee译文链接：...

zzir 2019-08-16 14:10 评论0 收藏0
NGINX的奇淫技巧 —— 2. IF AND 和 OR

摘要：在上一篇文章里的奇淫技巧字符串截断中我们介绍过了使用来进行截断字符串的用法这次我们来了解下的逻辑用法什么是逻辑用法呢就程序中的关系就叫做逻辑了支持的与或者与吗答案是当你尝试这样配置重载时会报出错误那么我们应该怎样来实现和的逻辑关系呢在上一篇文章:《NGINX里的奇淫技巧 —— 1. 字符串截断》中, 我们介绍过了使用if来进行截断字符串的用法, 这次我们来了解下if的逻辑用法: 什...

CarterLi 2019-07-25 13:27 评论0 收藏0
NGINX的奇淫技巧 —— 7. IF实现数学比较功能 (2)

摘要：接上文的奇淫技巧实现数学比较功能竟然不支持这样的写法随机从取随机从取如果正则匹配如果正则不匹配求大牛来实现接上文《NGINX的奇淫技巧 —— 6. IF实现数学比较功能 (1)》 NGINX竟然不支持这样的写法.... location = /test/ { default_type html; set_random $a 0 9; #$a 随机从0-...

lifefriend_007 2019-07-25 13:26 评论0 收藏0