vue入门

将新建的vue项目导入到idea

使用idea的Terminal窗口启动vue服务,命令:vue run serve

可以看到一个App.vue(主窗口):

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

对应的界面:

其中:

<router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>

分别对应顶部的Home 和about

点击可以动态改变页面

router-link是映射路由

路由的设置是通过index.js文件中设置的:

        index.js:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

vue是单页面,即只有一个App.vue

       上述的页面切换都只是主页面内的部分页面的动态改变(即使是url的切换,实际上还是同一个页面)

接下来写一个简单的vue页面

        首先在views中创建一个页面(这里是book.vue)

        接着在index.js中导入此页面,这个页面就能够被访问到

import Book from '../views/Book.vue'

...
,{
  path:'/book',
    component: Book
  }

 编写book.vue界面

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>图书名称</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>

        </table>

    </div>
</template>

<script>
    export default {
        name: "Book",
        data(){
            return{
                msg:'hello vue',
                books:[
                    {
                        id:1,
                        name:"java",
                        author:"张三"

                    },{
                        id:2,
                        name:"java",
                        author:"张三"

                    },{
                        id:3,
                        name:"java",
                        author:"张三"

                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

在浏览器中访问该页面即可(无需重启服务)

一个造假数据的简单vue界面就完成了