Vuejs基本知识(二)【定义一个页面】

傷城~ 2021-06-26 16:06 549阅读 0赞

# 创建一个页面 #

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

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

在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][http_localhost_8080_say_hi] 这个链接了. 打开后，页面如下图所示：

![在这里插入图片描述][20181219225109879.png]

## 为页面增加一些样式 ##

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

<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;
    }

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

![加了颜色的文字][Image 1]  
![在这里插入图片描述][20181219225216529.png]

## 定义并显示变量 ##

如果要在`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>
        
        {
       {message}}
      </div>
    </template>
    
    <script> export default { data () { return { // 步骤1: 这里定义了变量 message 的初始值 message: '你好Vue! 本消息来自于变量' } } } </script>
    
    <style> </style>

页面打开如下图所示:

![来自于变量的消息][20181219225340184.png]

[http_localhost_8080_say_hi]: http://localhost:8080/#/say_hi
[20181219225109879.png]: /images/20210626/e9464302c4fe4a6d8178ef28c4d1f74b.png
[Image 1]: 
[20181219225216529.png]: /images/20210626/8985672ec1594857a16d3bbecbd25a8e.png
[20181219225340184.png]: /images/20210626/18d6e506fd8e45deb4de12ec8c84c589.png