vue入门

将新建的vue项目导入到idea

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

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

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

对应的界面:

其中:

Home |    About

分别对应顶部的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界面

    
 
     
  
编号
  
图书名称
  
作者
     
     
  
{{item.id}}
  
{{item.name}}
  
{{item.author}}
     
 
    
    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:"张三"      }  ]     } }    }

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

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

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系