Vue.js随笔二(新建路由+component+添加样式+变量的显示)

创建一个页面：

1.首先让我们看一下整个vue.js的目录，如下图所示：

2.现在让我们创建一个页面吧：

2-1首先你需要新建路由（就和建立一个如何找到项目文件的目录一个意思）:进入src/router/index.js修改即可

 import Vue from 'vue'
 import Router from 'vue-router'

 //就拿下面这行作比方，下面这行就相当于引入Say这个component
 import SayHi from '@/components/SayHi'

 Vue.use(Router)

 export default new Router({
   routes: [
       //下面这几行，表示定义 /#/say_hi这个url
     {
       path: '/say_hi',  //对应一个url
       name: 'SayHi',    //Vue.js内部使用的名字，这个建议和component取一样的
       component: SayHi  //对应的.vue页面的名字，就是你的SayHi.vue去掉后面的拓展名就好
     },
   ]
 })

2-2然后就可以创建一个Component了(如下)：你所创建的.vue全部都放在src/components目录里哦

 <template>
   <div class='hi'>
     Hi Vue!   //注意内容一定要放在div里，否则是错误的
   </div>
 </template>

 <script>
 export default {
   data () {
     return { }
   }
 }
 </script>

 <style>
 </style>

2-3这样一个简单的页面就做好了，此时只需在浏览器中输入如下图所示的url就可以了，博主用的是8081端口，颜色先不用管博主只是加了个css，后面会讲到：

3.为页面添加样式style：

3-1还是上面的component只需要做简单的添加即可(在style里面写上css内容就好)，标红的地方，其他地方不用动:

 <template>
   <div class='hi'>
     Hi Vue!
   </div>
 </template>

 <script>
 export default {
   data () {
     return { }
   }
 }
 </script>

 <style>
 .hi {
   color: red;
   font-size: 20px;
 }
 </style>

3-2然后页面就会同你的style里的css设置得而改动啦

4.现在让我们看看如何定义并显示变量：{{变量名}}即为显示变量

 <template>
   <div>
     {{message}}
   </div>
 </template>

 <script>
 export default {
   data () {
     return {
       message: '你好Vue! 本消息来自于变量' //设置变量
     }
   }
 }
 </script>

 <style>
 </style>

4-2然后打开浏览器输入对应的url地址就可以出来啦，如下图所示: