上一篇把框架搭建起来了,这篇就修改一下框架的内容,看看效果。
稍微查了下资料,知道vue框架的代码入口是“App.vue(style模块没变化,这里就不贴出来了)”:
<!--这个template模块就是整个网站的起始页面配置-->
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png"> <!-- 这一行就是那个页面那个大图标-->
<HelloWorld msg="Welcome to Your Vue.js App"/> <!-- 接着就是将HelloWorld的内容引进来-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
所以这里我们可以想到,想要修改这个页面的内容,可以在两个地方改,一个是直接在App.vue的“template”里加,也可以去HelloWorld 里面加。
首先可以试试在App.vue里加:
<template>
<div id="app">
<span>测试添加内容</span> <!-- 添加了这一行-->
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
可以看到页面上显示了,只是这个位置不符合预期,不过先不管他,以后学到再说。
现在再去HelloWorld.vue 中改,改之前要把刚才加的那一句话删掉,不要影响我们测试。
<template>
<div class="hello">
<span>测试添加内容2</span> <!-- 添加了这一行-->
<h1>{{ msg }}</h1>
<p>
由于篇幅,这里只粘贴前后几行,这里就是HelloWorld.vue的前五行,下面内容都是没改动的。
可以看到也生效。到这里可以发现稍微懂一点前端,想要改一些简单的东西还是不难的。
这篇就是很基础的东西,主要是帮助理解vue框架的代码从哪进入,该修改哪里。