15、定义一个页面

激动人心的时刻到来了! 接下来我们要通过自己动手,开始下一步的学习!

请各位同学务必准备好电脑。 只有一边学习一边敲代码,才能真正的看到效果。 调试代码的过程是无法脑补出来的。切记切记!

在Vuejs中创建页面需要两步:

1、 新建路由;
2、 新建vue页面;

新建路由

默认的路由文件是 src/router/index.js, 打开之后, 我们增加两行:

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

// 增加这一行, 作用是引入 SayHi 这个component 
import SayHi from '@/components/SayHi' 

Vue.use(Router) 
export default new Router({ 
  routes: [ 

    // 增加下面几行, 表示定义了  /#/say_hi 这个url 
    { 
      path: '/say_hi', 
      name: 'SayHi', 
      component: SayHi 
    }, 
  ] 
}) 

上面的代码中,

import SayHi from '@/components/SayHi' 

表示从当前目录下的 components ,引入 SayHi 文件。 @ 表示当前目录。

然后,用下面的代码来定义一个路由:

routes: [ 
    { 
      path: '/say_hi',   // 对应 一个url 
      name: 'SayHi',     // Vuejs 内部使用的名称 
      component: SayHi   // 对应的 .vue 页面的名字 
    }, 
] 

也就说,每当用户的浏览器访问 http://localhost:8080/#/say_hi 时, 就会渲染 ./components/SayHi.vue 文件。

name: 'SayHi' 定义了该路由在Vuejs内部的名称。 后面会对此有所解释。

创建一个新的Component

由于上面我们在路由中引用了component: src/components/SayHi.vue, 接下来,我们要创建这个文件.

代码如下:

<template> 
  <div > 
    Hi Vue! 
  </div> 
</template> 

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

<style> 
</style> 

在上面的代码中:

  • <template> </template> 代码块中,表示的是 HTML模板. 里面写的就是最普通的HTML 。
  • <script/>表示的是 js 代码. 所有的js代码都写在这里. 这里使用的是 EM Script.
  • <style>表示所有的 CSS/SCSS/SASS 文件都可以写在这里.

现在,我们可以直接访问 http://localhost:8080/#/say_hi 这个链接了. 打开后,页面如下图所示:

 

为页面增加一些样式

接下来,我们可以为页面加一些样式, 让它变得好看一些:

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

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

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

注意上面代码中的 <style>标签,里面跟普通的CSS一样, 定义了样式。

.hi { 
  color: red; 
  font-size: 20px; 
} 

刷新浏览器,可以看到, 文字加了颜色, 如下图所示:

 

定义并显示变量

如果要在vue页面中定义一个变量,并把它显示出来,就需要事先在 data 中定义:

export default { 
  data () { 
    return { 
      message: '你好Vue! 本消息来自于变量' 
    } 
  } 
} 

可以看到,上面的代码是通过 Webpack的项目来写的。 回忆一下, 原始的Vuejs中是如何定义一个变量(property) 的?

答案是:

var app = new Vue({ 
  data () { 
    return { 
      message: '你好Vue! 本消息来自于变量' 
    } 
  } 
}) 

所以,我们可以认为, 之前用“原始的Vuejs”的代码中,写的 new Vue({...})中的代码,在webpack的框架下,都要写到 export default { .. } 中来。

完整的代码(src/components/SayHi.vue)如下所示:

<template> 
  <div> 
    <!--  步骤2: 在这里显示 message --> 
    {{message}} 
  </div> 
</template> 

<script> 
export default { 
  data () { 
    return { 
      // 步骤1: 这里定义了变量 message 的初始值 
      message: '你好Vue! 本消息来自于变量' 
    } 
  } 
} 
</script> 

<style> 
</style> 

页面打开如下图所示:

 

版权声明:「DDKK.COM 弟弟快看,程序员编程资料站」本站文章,版权归原作者所有