基于Vue的简单的单页面应用
来源:互联网 发布:java迭代器 实现类 编辑:程序博客网 时间:2024/05/19 19:58
基于Vue的简单的单页面应用
在对Vue和webpack有了一定了解后,我们就可以开始利用所了解的东西做一个简单的webapp了,不了解的同学可以看下我的前两篇关于vue和webpack的基本应用:
webpack+vue起步
利用webpack和vue实现组件化
构建项目
首先创建各个组件,我的目录结构如下:
123456789101112131415
//没有后缀名的都是文件夹|-dist|-src| |-components //存放vue组件| | |-tab //存放home.vue中的tab,动态切换的模板| | | |-tab_1.vue| | | |-tab_2.vue| | |-home.vue //app的首页| | |-list.vue //点击home中的链接跳转到| | |-detail.vue //点击list中的链接跳转到| |-app.vue //主要的vue文件(用于将各个组件的挂载)| |-main.js //主要的js(用于配置路由)|-static //存放静态资源|-index.html
配置路由
首先在我们的项目中安装vue-router
1
npm install vue-router
引入各个组件并配置路由:
1234567891011121314151617181920212223242526272829303132333435
//main.jsimport Vue from 'vue';import VueRouter from 'vue-router';//引入组件import App from './app.vue';import home from './components/home.vue';import list from './components/list.vue';import detail from './components/detail.vue';Vue.use(VueRouter);var app=Vue.extend(App);var router=new VueRouter();//配置路由router.map({'/home': {component: home},'/list': {component: list},'/detail': {component: detail}});//设置默认情况下打开的页面router.redirect({'/':'home'});router.start(app,'#app');//暴露路由接口调试window.router = router;
关于vue-router的介绍,官方文档介绍很清楚,地址:http://router.vuejs.org/zh-cn/index.html。
配置好路由后,需要将匹配好的组件正确的渲染到页面中,此时用到<router-view></router-view>
,它基于Vue的动态组件系统,所以它会继承一个正常动态组件的很多特性。在这里我们用到两个:
v-transition
和transition-mode
的完整支持,为了切换效果能正常工作,路由组件必须不是一个片段实例。- 在路由的0.7.2+中支持
keep-alive
(关于keep-alive)
所以在app.vue写入:
12345678
<template><div class="main"><router-viewkeep-alivetransition="fade"transition-mode='out-in'></router-view></div></template>
打开命令行启动webpack-dev-server:
1
$ webpack-dev-server --inline --hot
此时我们在页面中看到的页面就是home.vue
在home.vue中实现tab切换
tab切换作为一个常见的效果,出现的频率很高,那么如何用vuejs写一个tab切换效果呢?
利用当前被点击的tab是第几个,从而动态的切换相应的动态组件是vuejs实现切换的一种方式。动态组件的介绍如下:https://vuejs.org.cn/guide/components.html#动态组件。所以实现代码如下:
12345678910111213141516171819202122232425262728293031323334353637383940414243
<template><div class="home"><div class="bd" style="height: 100%;"><div class="weui_tab"><ul class="weui_navbar"><li class="weui_navbar_item"v-for="tab in tabs":class="{'weui_bar_item_on':$index===selected}"@click="choose($index)">{{tab.tabName}}</li></ul><div class="weui_tab_bd"><component :is="currentView" transition="fade" transition-mode="out-in"></component></div></div></div></div></template><script>import tab_1 from './tab/tab_1.vue';import tab_2 from './tab/tab_2.vue';export default{data(){return{tabs:[{tabName:'Vuejs'},{tabName:'VueTab'}],selected:0,currentView:'view_0'}},components:{'view_0':tab_1,'view_1':tab_2},methods:{choose(index) {this.selected=index;this.currentView='view_'+index;}}}</script>
两个动态组件为tab_1.vue和tab_2.vue。引入这两个模块,对外输出对组件的操作export default{}
,在template
模板中将动态组件加载进去,使用保留的<component>
元素,动态地绑定它的is
特性,从而根据不同的值动态的切换组件,在需要点击的tab导航上,需要v-for
循环出两个导航,然后动态绑定class,根据当前点击的tab导航$index
动态的切换class名:class="{'weui_bar_item_on':$index===selected}"
,然后给li
绑定click事件,从而让其在被点击时执行事件@click="choose($index)"
。
由于默认情况下显示第一个组件且第一个tab
变灰,所以在data
设置默认值。为了切换有过渡,添加了transition="fade" transition-mode="out-in"
并在css中设置动画的执行过程:
12345678
/*切换动画*/.fade-transition {transition: opacity 0.3s ease;}.fade-enter,.fade-leave {opacity: 0;}
利用v-link
实现路由链接
在组件中,用到了路由,在给a
写路由链接时候要使用v-link
而不是href
。在带有v-link
指令的元素,如果v-link
对应的URL匹配当前路径,则该元素会被添加一个特定的class,默认为.v-link-active
,这个默认值,我们可以通过在创建路由时指定linkActiveClass
全局选项来自定义,也可以通过activeClass
内联选项来单独制定:
1
<a v-link="{path:'/a',activeClass:'active'}">test</a>
遇到的一些问题
1.v-for
循环插入图片
在写循环插入图片的时候,写的代码如下:
123
<div class="bio-slide" v-for="item in items"><img src="{{item.image}}"></div>
此时在控制台会出现警告[Vue Warn]: src="": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.
这里意思是在src属性插值将导致404请求。使用v-绑定:src代替。
所以替换成如下:
123
<div class="bio-slide" v-for="item in items"><img v-bind:src="item.image"></div>
这里需要主要,v-bind在写的时候不建议再用双花括号,根据官方的说法:
1
<a v-bind:href="url"></a>
这里href
是参数,它告诉 v-bind
指令将元素的 href
特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值href=""
获得同样的结果:这样没错,并且实际上在内部特性插值会转为v-bind
绑定。
2.v-model
的使用
v-model
用于在表单上创建双向绑定,只能用于<input>
、<select>
、<textarea>
,如果用在其他元素中,则会在产生警告。
3.如何让组件的CSS样式只在组件中起作用
在每一个vue组件中都可以定义各自的css,js,如果想写的css只对当前组件起作用,则在style
中写入scoped
,即:
1
<style scoped></style>
这样就完成了一个简单的基于Vue+webpack+vue-router的单页面应用,具体实现代码见github:vue_spa_demo。
- 基于Vue的简单的单页面应用
- 基于Vue的简单的单页面应用
- 基于Vue的简单的单页面应用
- 基于Vue2.0+Vue-router构建一个简单的单页应用
- 基于Vue2.0+Vue-router构建一个简单的单页应用
- 基于Vue2.0+Vue-router构建一个简单的单页应用
- 基于Vue2.0+Vue-router构建一个简单的单页应用
- 处理 Vue 单页面应用 SEO 的另一种思路
- 基于vue2 + vue-router + vuex 构建的一个新闻类大型单页面应用 —— 今日头条
- 基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声
- 基于 vue-cli 的 Vue js 单页应用项目模板
- 基于 vue-cli 的 Vue js 单页应用项目模板
- 基于 vue 的单页滚动插件
- SPA(单页面应用)的简单实现
- 单页面应用(SPA)的简单介绍
- 单页面应用的核心
- vue-cli搭建单页面应用
- 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
- 有关SQL中取前几条数据
- Xcode8 兼容iOS 10 整理笔记
- 1007. Maximum Subsequence Sum (25) 第二种想法
- 快速构建AngularJs 2.0 教程
- iOS10 注册极光推送(干货)
- 基于Vue的简单的单页面应用
- ★leetcode10_Regular Expression Matching[附动态规划]
- 361M以下的Linux名单
- 5. Longest Palindromic Substring(最长回文串)
- Jersey在spring环境下的实现
- 《汇编语言》学习(一)基础知识
- Markdown 常用格式记录
- 分享一个酷炫广播轮播demo
- MySQL存储过程详解