nvue语法与vue的部分区别

1、仅支持flex布局

仅支持flex布局。而且默认的是 flex-direction: column;

2、字体样式

字体的样式，必须要写在 text 标签内，才能生效
错误示例：

<!-- 错误示例 -->
<div class="test">这是一段文字</div>
<style>
.test{
	color: red;
}
</style>

正确示例：

<!-- 正确示例 -->
<div>
	<text class="test">这是一段文字</text>
</div>
<style>
.test{
	color: red;
}
</style>

3、高度问题

nvue文件中，不支持100%，vh，vm等
例如，在uniapp中
错误写法：

<!-- 错误写法 -->
<div class="container"></div>
<style>
.container{
	height: 100vh
}
</style>

正确写法：

<!-- 正确写法 -->
<div class="container" :style="containerStyle"></div>
<script>
export default {
	data(){
		return {
			containerStyle:{
				height: '0px'
			}
		}
	},
	onLoad(){
		this.getScreenHeight()
	},
	methods:{
		// 获取屏幕高度
		getScreenHeight() {
			uni.getSystemInfo().then(info => {
				this.containerStyle.height = info[1].safeArea.height + 'px'
			})
		},
	}
}
</script>