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>