vue学习记录 2

打开昨天的vue项目，没记错的话网上查到的信息说，代码编辑部分就只在src文件夹，包括asset,router和components，其他的全是配置文件。

项目新建默认是一个巨大的vue图标和两行链接，布局在HelloWorld.vue，但是我昨天还没找到那个名为logo.png的图标是哪里插进去的。今天先摸清页面，然后做一个扫雷难度选择界面，准备给扫雷棋盘的大小数据传参。

开始咯！不懂的或者准备回头看的全都黄底标记一下，欸嘿。

---

 

把一堆超链接删掉以后页面只留下标题和图标。

vue文件页面总结：template + script + style 我直觉style不是必须的

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul><li></li></ul>
  </div>
</template>

template看起来和HTML差不多，不过是双括号传参，至于页面跳转，原项目新建提供的方式是直接传url： <a href="https://vuejs.org" target="_blank">Core Docs</a> ，自制vue怎么跳转还不知道。

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

刚刚出现的参数msg赋值就在这，就是不知道怎么读其他页面传过来的值。我看了眼router文件夹下的App.vue，name应该是绑死vue文件的文件名。手贱试试改name。

把name改掉了，但是结果没有变化，网络也没有崩。上百度查了一下，这个只作为组件选项用的，全局注册的时候自动分配name。原来vue文件不止可以做页面喔，像这个属性可以用来捏树形组件，或许拿来做目录是不错的选择。

搜的网页先码住，vue树形组件： https://blog.csdn.net/weixin_39015132/article/details/83573896 。name除了自我调用以外，还可以方便出error的时候查看信息()，最常用的是“当我们使用 keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。指定的依据就是组件的name。”大佬说的很简练，但是我不知道keep-alive是啥，有点懵。码住，回头查。

至于下面的 data () {return {msg: 'Welcome to Your Vue.js App'}} 应该就是页面数据处理的地方。这个结构很像后端语言写的那种完整函数，应该能整很多活。但是百度搜了一下没查到data能不能递归，好像很少写很长的data，如果要写长data基本都是写data内的return。回头前辈有空了我问问。

最后对于整个export default查了一下，是模块导出，可以导出到本组件，也可以导出给其他页面（在其它页面用import）。百度发现还有一种是export不带default。码住一下网页： https://blog.csdn.net/qq_27674439/article/details/108094742 这个佬讲了export default干什么用的，还有它和default的区别，很详细。能懂但是代码还没记，回头实现一下代码试试。看了这个网页后好奇export能不能直接传参，又查了一下，发现一个很详细的vue组件传参教程，码住网页回头看： https://zhuanlan.zhihu.com/p/262530502?utm_id=0 大概是export和export default都是可以传的，但得通过内部的props或者添加其他修饰符什么的。回头可以挨个实现一下。

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
</style>

style部分很明显是格式设置，属性和css都是共通的。

scoped在创建的时候就有备注说明：能将格式限制在这个HelloWorld.vue里；

font-weight查了一下是字体粗细：细lighter 正常normal 粗bold 超粗bolder 继承父体inherit

list-style-type查了一下是列表子项之前的内容：什么都没有就是none，可以赋值字符串： 参考网址 https://blog.csdn.net/No1banana/article/details/122832241 这个网址顺带介绍了list-style-image、list-style-position、list-style，全是列表子项前符号的设置。padding据说是清除网页原有的padding，使设计和开发者预期的一致。display:垂直显示自定义宽高block，并排显示定死宽高inline，并排自定义宽高inline-block

 

总的来说，像是把html、js、css放在了一个文件里。

---

突然发现我忘了干什么——那个logo图标怎么插进去的？

原来是在App.vue里设置的。HelloWorld看着全，但只是页面布局的一个小组件。在App.vue中不过是一个<router-view>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

但为什么是router-view呢？找了一圈发现是router文件夹下index.js的设置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

这里将routes列表首项定为HelloWorld组件了，但和“router-view”还是没关系，我打算出手实验一下，让routes列表多一个HelloWorld组件。很遗憾的是，多出的这一个在页面上毫无反馈。这个时候，我看到了path，有了个大胆的想法。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hwPage',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

把它改成这样子以后，在代码运行的网页网址后加上hwPage，会进入一模一样的网页。

我百度查一查这个router到底是啥东西。

router相当于一个路由器，所以参数会有path、name、component，由index.js配置。

最开始的：

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

似乎是必写的，然后写组件的import用于配置路由相关信息： import HelloWorld from '@/components/HelloWorld' 该import的都import完了之后，给Vue安装插件 Vue.use(Router) 按照网络教程还需要创建routes然后const router=new VueRouter……但很明显，这个系统自建的要简练很多。再下面就是将路由和组件连接起来。

那么router-view其实是路由使用的一种方式：Router有两种标签。

<router-link>：据说会被渲染成一个<a>标签。我试了一下，直接把view改成link不显示，如果是 <router-link>goto</router-link> 的话，也不显示，太奇怪了，加了style也没用。搜了搜，原来正确的使用方法是： <router-link to="/">goto</router-link> to后面的字符串就是page，但是点击后仍跳转到的页面仍然有logo，非常奇怪。
<router-view>：该标签会根据当前的路径，动态渲染出不同的组件。link要to，而view要name。没有name的话就会默认default。比如系统生成的这一行还能显示成 <router-view name="HelloWorld"/> 。至于主页，通过main.js设定。

目前为止可算是串起来了。试图在主页写一个连接，点击跳转到全新的页面，只显示HelloWorld。尝试复刻自己的HelloWorld，但是跳错说script只能有一个，有点懵，这个文件里只有一个啊。搞了大半天，发现页面还是通过一个html控制的，这个不在src里……思维定势害死人。

我在src里改了大半天一无所获，查资料看别人怎么新建的，结果人家开头就整个html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>winmine</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

---

 

总结一下：src外html→src内main.js+App.vue→index.js+components

怎么感觉我从0学起一样的……