`

App.vue

    博客分类:
  • Vue
vue 
阅读更多
<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实例
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics