<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这是用vue-cli搭建项目后的App.vue文件
template 里是模板代码,这里一般是一个闭合的html标签,比如一个div
style 里是css代码,这个代码是作用到整个页面的,如果只想作用到当前的模板中,需要用scoped属性
<style scoped>
如果想用一些css预处理器,比如sass,只需要声明lang,然后vue-loader就会自动的加载,当然,前提是对应的 sass-loader安装好。
<style lang="sass">
template不仅是模板最外面的标签,同时,它也可以作为一个普通的标签使用。比如,当我们需要用 v-if 来控制部分区域的显示与隐藏时,就可以这样。
<template>
<template v-if="valid">
<div></div>
</template>
<template v-else>
<div></div>
</template>
</template>
而且,template是不会被渲染的,所以不会影响最终的dom结构。
注意:v-show 不能和 template 一起使用
Vue组件export时会自动调用new Vue()吗?
name属性在组件递归的时候有用。export出来的是一个Vue实例
分享到:
相关推荐
App.vue vue登录界面
资源共享
购物车案例前端的App.vue源码
2、App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 1、index.html文件入口 2、src放置组件和入口文件 3、...
主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下