1、绑值
绑定值
{{message}}
绑定属性值
v-bind:title=""
注意:如果绑定的值是字符串,记得再加'',如"'vue'"
2、数组生成生表格,每隔七列换行显示
VUE一般使用template来创建HTML,查了下template没有语法可以实现这种情况。查看了element的源码,它先把数组先处理成行,再循环行中的列。这个写法还是觉得复杂了。可以使用javascript来创建html,这时候我们需要使用render函数,采用jsx来实现:
render(h) {
const { list, defaultValue } = this;
let tdDom = [], thisDom = [];
return (
<div class="calendar-item">
<div class="calendar-item-header">{defaultValue.y}年{defaultValue.m + 1}月</div>
<table class = "calendar-table">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
{
list.map(function(item, index){
tdDom.push(<td><span class={item.class} data-value={item.value}>{item.text}</span></td>)
if(index !== 0 && (index + 1) % 7 === 0){
thisDom = tdDom;
tdDom = [];
return(
<tr>
{thisDom}
</tr>
)
}
})
}
</tbody>
</table>
</div>
)
}
其中无论是props传下来的属性,还是data中自带的属性值,统一通过this获取,不需要像react区分this.props,this.state
3、scoped属性
在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。但是为什么要慎用呢?在实际业务中我们往往会对公共组件样式做细微的调整,如果添加了scoped属性,那么样式将会变得不易修改。
查看dom渲染了几次
在react中养成的习惯,代码写完后,需查看dom渲染了几次,是否有多余的渲染。在vue中想找对应的生命周期来实现,结果发现vue中多数用的template渲染模板,很少用render函数,不能在render中输出语句来判断是否渲染了DOM,可在mounted和updated中输出查看。
vue router打开新窗口
const {href} = this.$router.resolve({
name: 'foo',
query: {
bar
}
})
window.open(href, '_blank')
2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。
关于打开新标签页遇到的问题:
1. 新标签页每打开一次,cookie更新一次,在FF中有效,在Chrome中无效
2. 打开新标签页,新标签页中的请求,在原标签页中会执行一次
4、事件调用
父调子事件:
感悟
学习vue的各种用法,再来看react的用法,其实他们的不同,很多来自dom实现的不同。甚至vue中也可以像react一样使用jsx模板语言实现,他们的事件触发后的处理语句写的位置是一样的。
两者都了解后,考虑问题的方式也逐渐开始跳出框架。像移动端的上滑下滑事件,这个无论是在哪个框架中,这个事情都需要由原生来处理。
原来接触vue的时候,觉得这玩艺耦合性低,入侵性也比较强,和react的思想相比,模块化不是很清晰,一度不想深入了解。最近参与了一些项目,让我认识到,无论哪个技术栈,只要能快速解决问题的都是好的。