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

创建一个页面：

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

               

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

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

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 //就拿下面这行作比方，下面这行就相当于引入Say这个component
 5 import SayHi from '@/components/SayHi'
 6 
 7 Vue.use(Router)
 8 
 9 export default new Router({
10   routes: [
11       //下面这几行，表示定义 /#/say_hi这个url
12     {
13       path: '/say_hi',  //对应一个url
14       name: 'SayHi',    //Vue.js内部使用的名字，这个建议和component取一样的
15       component: SayHi  //对应的.vue页面的名字，就是你的SayHi.vue去掉后面的拓展名就好
16     },
17   ]
18 })

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

 1 <template>
 2   <div class='hi'>
 3     Hi Vue!   //注意内容一定要放在div里，否则是错误的
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   data () {
10     return { }
11   }
12 }
13 </script>
14 
15 <style>
16 </style>

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

3.为页面添加样式style：

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

 1 <template>
 2   <div class='hi'>
 3     Hi Vue!
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   data () {
10     return { }
11   }
12 }
13 </script>
14 
15 <style>
16 .hi {
17   color: red;
18   font-size: 20px;
19 }
20 </style>

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

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

 1 <template>
 2   <div>
 3     {{message}}
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   data () {
10     return {
11       message: '你好Vue! 本消息来自于变量' //设置变量
12     }
13   }
14 }
15 </script>
16 
17 <style>
18 </style>

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