Vue-cli(四) Vue文件

最新推荐文章于 2021-07-12 10:32:16 发布

转载最新推荐文章于 2021-07-12 10:32:16 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sdlvzg/blog/1798365

文章标签：

#javascript #ViewUI

本文详细介绍了Vue-cli中.vue文件的组成部分，包括HTML结构、JavaScript逻辑及CSS样式，并解释了如何使用scoped限制样式作用范围。

为什么80%的码农都做不了架构师？>>>

Vue-cli中代码都写在*.vue文件中，vue主要分为三部分：

<template></template>标签包裹的内容：这是模板的HTMLDom结构，所有的HTML代码写在这部分。
<script></script>标签包括的js内容：可以在这里些一些页面的动态效果和Vue的逻辑代码。
<style></style>标签包裹的css内容：这里就是你平时写的CSS样式，对页面样子进行装饰用的，需要特别说明的是你可以用<style scoped></style>来声明这些css样式只在本模板中起作用。

<template>
  <div class="hello">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

转载于:https://my.oschina.net/sdlvzg/blog/1798365