Vue 第二天
第一天的时候学了简单的环境搭建和Vue项目的创建,今天先复习一下Vue项目的创建,多练习,才能理解的更透彻。
Vue项目搭建:
-
在硬盘上找到一个合适的文件夹放工程,比如:E:\vueDemo,和昨天搭建的第一个Vue项目放在了同一级目录下,执行命令:
-
vue init webpack secondvue
-
-
初始化一些设置后,此处省略…
-
安装项目依赖:
-
npm install
-
-
启动项目:
-
npm run dev
-
-
访问
http://localhost:8080
,看到下图所示:
- 到这里,一个简单的Vue项目就搭建好了
执行的
vue init webpack secondvue
命令中,webpack 会将 secondvue 这个项目在开发和完成阶段帮我们自动打包代码,比如将 js 统一合成一个文件,将 css 文件统一合并压缩等。也就是说 webpack 在编译时会将.vue
文件中的 html、js、css 都抽出来合成新的单独的文件。
-
开发完成后,执行:
-
npm run build
会编译我们的源代码生成最终的发布代码,在dist目录下。
-
组件库:
组件库是把一个按钮、导航、列表之类的元素封装起来,方便日常使用,调用方法只需直接写上 <qui-button></qui-button>
或者 <qui-nav></qui-nav>
这样的代码就可以了。
今天就练习一个组件库的首页,包括三个子页面,按钮页面、列表页面、导航页面,点击进去会由路由来配置。
入口页App.vue
<template>
<div id="app">
<h1 class="page-title"><a href="#/">开发组件库</a></h1>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped>
@import "./assets/css/App.css";
</style>
入口页代码中,h1标签是一个公用元素,也就是说每个子页面都会带着这个h1,它的作用就是方便我们快速回到首页,子页面的内容会注入到 router-view
中。style标签中,可以直接写样式,也可以直接引入一个样式文件,scoped关键字标识这个样式是私有的 ,也就是说, 即使两个组件写着一样的 #app{}
样式也不会冲突,程序会加上命名空间,这也就是为什么在script标签中有个name参数。
首页index.vue
<template>
<div class="mod-module mod-parallel">
<div class="img-list type-full">
<div class="img-box">
<p class="img-item">
<a class="page-link" href="#/btn">按钮</a>
</p>
</div>
<div class="img-box">
<p class="img-item">
<a class="page-link" href="#/list">列表</a>
</p>
</div>
<div class="img-box">
<p class="img-item">
<a class="page-link" href="#/nav">导航</a>
</p>
</div>
</div>
</div>
</template>
<style scoped>
@import "./css/index.css";
</style>
首页代码写了几个跳转链接调到对应的子页面,程序运行的时候,会将 template
标签里面的内容都注入到 App.vue
页面中的 router-view
标签中,从而实现无刷新的路由跳转。
接下来先不急写其他子页面,因为子页面只是引用对应的组件,所以先写组件。
按钮组件quiButton.vue:
<template>
<button class="qui-btn">
<span> {{msg}} </span>
</button>
</template>
<script>
export default {
data: function () {
return {
msg: '下载'
}
}
}
</script>
<style scoped>
@import "./css/reset.import.css";
@import "./css/qui-btn.import.css";
</style>
按钮组件就是一个正常的button标签,script标签中暴露这个组件的data属性(data是Vue的属性值)。当按钮组件被初始化的时候,msg自定义属性会被绑定到 <span>
标签中的 {{msg}}
中,两个花括号用来绑定属性。如果不是组件的话,正常data写法可以直接写成一个对象,比如: data:{ msg : '下载'}
,但由于组件是会在多个地方引用的,JS中直接共享对象会造成引用传递,也就是修改了msg后所有按钮的msg都会跟着修改,所以这里用function来每次返回一个对象实例。
使用按钮组件pageQuiButton.vue:
写完按钮组件后,写一个调用它的pageQuiButton子页面。
<template>
<div id="pageQuiButton">
<!--使用-->
<qui-btn msg="确认" class="small"></qui-btn>
</div>
</template>
<script>
import quiBtn from '../components/quiButton' /* 引用 */
export default {
name: 'pageQuiButton',
components: {
'qui-btn': quiBtn /* 注册自定义标签 */
}
}
</script>
先看script标签,首先引入按钮组件赋值给quiBtn,使用的时候直接将quiBtn作为对象的一部分写进components属性,这是Vue用来存储引用组件的关键字,同时对应我们自定义的标签 qui-btn
,完成这些操作之后,就可以在template中使用自定义的按钮组件 <qui-btn>
上面也说了用msg属性来自定义按钮的文案。
路由配置:
接下来把路由配置好,就可以看到页面中具体效果了
在 src/router/index.js
配置:
import Vue from 'vue'
import Router from 'vue-router'
// 引用页面模板 =》 供路由使用
import index from '../pages/index'
import pageQuiButton from '../pages/pageQuiButton'
import HelloWorld from '@/components/HelloWorld'
import page from '@/pages/page'
import page1 from '@/pages/page1'
import page2 from '@/pages/page2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: index
},
{
path: '/btn',
name: 'btn',
component: pageQuiButton
},
{
path: '/page',
name: 'page',
component: page,
children: [
{
path: '/',
component: page1
},
{
path: '/page2',
component: page2
}
]
},
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
}
]
})
页面效果:
点击 确认
按钮后:
一口不能吃个胖子,今天先学习这些,还要在巩固巩固学的东西
总结:
- 页面路由的配置
- 按钮组件自定义属性props
- 按钮组件点击事件