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
<div @click="close"> 点击封闭 </div>
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>也许就先写这么多啦，以后再补充，迎接关注
