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>