点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

值得收藏的vue开发技巧实例

来源：动视网责编：小采时间：2020-11-27 20:04:46

值得收藏的vue开发技巧实例

值得收藏的vue开发技巧实例:本文我们会从很多方面来细说vue的一些很好用的开发技巧，值得收藏起来哦，希望能帮助到大家。1.placeholder与computed巧用表单开发肯定是日常开发中必不可少的环节，可是设计图经常会有表单默认值的设计，比如:需求方的需求点是：在没有输入值的时候显示默认

推荐度：

点击下载本文 文档为doc格式

导读值得收藏的vue开发技巧实例:本文我们会从很多方面来细说vue的一些很好用的开发技巧，值得收藏起来哦，希望能帮助到大家。1.placeholder与computed巧用表单开发肯定是日常开发中必不可少的环节，可是设计图经常会有表单默认值的设计，比如:需求方的需求点是：在没有输入值的时候显示默认

本文我们会从很多方面来细说vue的一些很好用的开发技巧，值得收藏起来哦，希望能帮助到大家。

1.placeholder与computed巧用

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

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

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

//script
data(){
 return {
 index:0,
 name:''
 }
}
//template
<input type="number" placeholder="默认值index" v-model="index"/>
<input type="text" placeholder="默认值name" v-model="name"/>

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

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

//template
<input type="text" placeholder="城市" v-model="city"/>
<input type="text" placeholder="国家" v-model="country"/>
<input type="text" placeholder="国家+城市" v-model="countryAndCity"/>

//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
<li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li>

//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就要变成这样

<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>

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

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

<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components>

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
<dialog v-if="isDialog"></dialog>

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

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

//dialog.vue
 
<p @click="close"> 点击关闭 </p>

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

//app.vue
<dialog v-if="isDialog" @close="closeDialog"></dialog>

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

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

6.css的scoped

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

<style scoped>...</style>

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

<style> body{...} </style>
<style scoped> .. .</style>

值得收藏的vue开发技巧实例

推荐度：

点击下载本文 文档为doc格式

标签：方法技巧 VUE

热门焦点

值得收藏的vue开发技巧实例

值得收藏的vue开发技巧实例

本文我们会从很多方面来细说vue的一些很好用的开发技巧，值得收藏起来哦，希望能帮助到大家。

1.placeholder与computed巧用

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

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

4.created和mounted的服务端渲染

5.this.$emit的妙用

6.css的scoped

值得收藏的vue开发技巧实例

最新推荐

猜你喜欢

热门推荐