标签：exp ack turn color data 通过 ret 定义 col
1.定义：vue中分成三个模块，template,script,style。然后在script中需要导出组件对象 export default.
代码如下：
<template> <div class="mypage"> <h1>我的vue页面</h1> <p class="info">{{info}}</p> </div> </template> <script> export default { //这个里面可以放name,data,methods,生命周期函数,computed等 name:"MyPage", data:function(){ return{ info:"欢迎来到我的vue页面" } } } </script> <style scoped> .info{ background-color: brown; color: #fff; } </style>
2.导入： import XXX from "xxx"
代码如下：
<script> //es6的语法要导入MyPage.vue文件 import MyPage from "./components/MyPage" //import MyPage中的MyPage可以随便气名字 export default { name: ‘app‘, components: { MyPage } } </script>
3.在XXX.vue中定义的样式默认是全可用的，可以通过在 style上添加 scoped 属性，这样只能在当前组件有效，利用这一点，我们可以在App.vue中使用全局样式的特点，去除浏览器默认的样式。
代码如下：
XXX.vue中的样式:
<style scoped> .info{ background-color: brown; color: #fff; } </style>
App.vue中的样式比如：
<style> body,div,p,span,h1,h2,h3,h4,h5{ margin:0; padding: 0; list-style: none; } </style>
标签：exp ack turn color data 通过 ret 定义 col
原文地址：https://www.cnblogs.com/Mr-Simple001/p/12108692.html
