基于Vue的简单的单页面应用的实现_html/css_WEB-ITnose
基于Vue的简单的单页面应用
在对Vue和webpack有了一定了解后,我们就可以开始利用所了解的东西做一个简单的webapp了,不了解的同学可以看下我的前两篇关于vue和webpack的基本应用:
webpack+vue起步
利用webpack和vue实现组件化构建项目
首先创建各个组件,我的目录结构如下:
//没有后缀名的都是文件夹|-wechat |-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
npm install vue-router
引入各个组件并配置路由:
//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。
配置好路由后,需要将匹配好的组件正确的渲染到页面中,此时用到
-
v-transition和 transition-mode的完整支持,为了切换效果能正常工作,路由组件必须不是一个 片段实例。
-
在路由的0.7.2+中支持 keep-alive( 关于keep-alive)
所以在app.vue写入:
打开命令行启动webpack-dev-server:
$ webpack-dev-server --inline --hot
此时我们在页面中看到的页面就是home.vue
在home.vue中实现tab切换
tab切换作为一个常见的效果,出现的频率很高,那么如何用vuejs写一个tab切换效果呢?
利用当前被点击的tab是第几个,从而动态的切换相应的动态组件是vuejs实现切换的一种方式。动态组件的介绍如下: https://vuejs.org.cn/guide/components.html#动态组件。所以实现代码如下:
两个动态组件为tab_1.vue和tab_2.vue。引入这两个模块,对外输出对组件的操作 export default{},在 template模板中将动态组件加载进去,使用保留的
由于默认情况下显示第一个组件且第一个 tab变灰,所以在 data设置默认值。为了切换有过渡,添加了 transition="fade" transition-mode="out-in"并在css中设置动画的执行过程:
/*切换动画*/.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内联选项来单独制定:
test
遇到的一些问题
1. v-for循环插入图片
在写循环插入图片的时候,写的代码如下:
此时在控制台会出现警告
[Vue Warn]: src="{{item.image}}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.这里意思是 在src属性插值将导致404请求。使用v-绑定:src代替。所以替换成如下:
这里需要主要,v-bind在写的时候不建议再用双花括号{{}},根据官方的说法:
这里 href是参数,它告诉 v-bind指令将元素的 href特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 href="{{url}}"获得同样的结果:这样没错,并且实际上在内部特性插值会转为 v-bind绑定。
2. v-model的使用
v-model用于在表单上创建双向绑定,只能用于 、
3.如何让组件的CSS样式只在组件中起作用
在每一个vue组件中都可以定义各自的css,js,如果想写的css只对当前组件起作用,则在 style中写入 scoped,即:
这样就完成了一个简单的基于Vue+webpack+vue-router的单页面应用,具体实现代码见github: vue_spa_demo。
推荐阅读
-
基于HTML标签marquee实现滚动效果的简单方法
-
使用 SVG 动画实现弹性的页面元素效果_html/css_WEB-ITnose
-
CSS中隐藏滚动条的简单实现方法_html/css_WEB-ITnose
-
CPropertySheet标签页 实现各个CPropertyPage页面之间的切换_html/css_WEB-ITnose
-
基于纯 CSS3 技术实现美观的标签云效果_html/css_WEB-ITnose
-
简单实现兼容各大浏览器的js复制内容到剪切板_html/css_WEB-ITnose
-
javascript - html5 单页面应用如何合理的安排后台管理数据
-
在帖子中点击“回复”按钮时,跳到本页面回复的表单位置,是怎么实现的?_html/css_WEB-ITnose
-
求一个简单的纯CSS3的实现_html/css_WEB-ITnose
-
简单实现"回车!=提交"(去除表单的回车即提交)_html/css_WEB-ITnose