发表于： 2019-10-08 00:25:58
1 769
今天完成的事情：
今天配置好了路由，这都要多亏了刘超师兄，亲自上阵给我配的，配完之后开始学习怎么在vue里面写东西，vue里写的跟以前任务中写的不一样，以前的任务中强调结构表现分离，但是在vue中所有的东西都写在一个页面上了：
<template>
<body>
<div id="app">
<div class="zero"></div>
<input class="" v-model="message"/>
<p>{{ message }}</p>
<input class="" v-model="message"/>
<p>{{ message }}</p>
<button v-on:click="show">点我</button>
</div>
</body>
</template>
tempte的这个标签写html；
<script>
export default {
el: '#app',
data: {
message: 'Hello world'
},
methods: {
show: function () {
}
}
}
</script>
script中写js，也是vue中的js，这个标签经常见的，跟以前的一样，
<style scoped>
button{
font-size: 25px;
}
body {
margin: 0;
height: 98vh;
display: flex;
justify-content: center;
align-items: center;
background-size: 100%;
.zero{
width: 100%;
height: 6rem;
}
}
#app{
width: 20rem;
height: 16rem;
background-color: bisque;
}
</style>
style中写css的页面。
这个总算是知道怎么写，写到哪里了，前几天一直处于懵逼状态，然后看了一下师兄给发的一篇博客，上面讲的是几个页面之间的关系，暂时还是有点懵：
使用到vue项目的文件包括一个.html，两个.js，两个.vue文件，关系如上图所示
由图可见，文件关键处在于main.js，管理着所有需要的资源，其中new Vue的参数，解释如下：
el：官方解释为实例提供挂载的元素。此处为index.html中的<div id="app"><div>。
router：为router:router,的简写，指向引入文件中的routes:[]
components：注册哪些组件，需在顶部引入文件。
template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用template替换index.html里面的<div id="app"></div>
此时，可知main.js文件调用关系分为三步，如图中序号
确定将被挂载（替换）的元素，此处为index.html中的<div id="app"><div>。
注册组件（此处只有组件App），选择其中用于替换挂载元素（第一步中的元素）的模板组件（<App/>），即用App.vue替换index.html中的<div id="app"><div>。
注入路由器router：
模板组件（App.vue）中有<router-view/>，将在其中渲染路由匹配到的组件
注入（import）路由时指定的是router文件夹，即文件夹下所有routes
router文件夹下此时只有index.js文件，其中routes:[]规定了文件地址及其url地址映射
根据文件地址，载入组件（First.vue），组件被渲染在<router-view/>中，显示在index.html中
明天计划的事情：
明天写登陆页面，尽快的把这些先写完。
收获：
搭建好了路由（虽然不是我建的），知道了在哪里写页面，然后就是简单的了解一下常用的指令，也叫语句。
返回列表
评论