精华内容
下载资源
问答
  • 相信很多初学Vue的小伙伴都有一个疑惑,为什么使用Vue所制作的网页是单页面的呢?下面我们一起来探讨一下这个问题。 我们都知道Vue的工作就是将我们的数据渲染到页面上。想要在模板上渲染数据,首先就要把Vue的实例...

            相信很多初学Vue的小伙伴都有一个疑惑,为什么使用Vue所制作的网页是单页面的呢?下面我们一起来探讨一下这个问题。

            我们都知道Vue的工作就是将我们的数据渲染到页面上。想要在模板上渲染数据,首先就要把Vue的实例对象挂载到模板上,下面我们就以一个使用vue-cli创建的项目来讲解:

    首先我们点开 src/mian.js 文件:

     

            可以看到vue-cli首先是帮我们引入了vue和App组件,通过new Vue建立了一个Vue的实例对象,然后就通过$mount方法将这个Vue实例挂载到了一个 id 名为 app 的标签上,然后通过render函数将App组件插入到了这个标签内。

    那么这个 id 名为 app 的标签在哪呢?我们进入到 public/index.html 文件:

     

            可以发现这个 id 名为 app 的标签是一个 html 里面的一个 div 标签。这说明我们在 App组件 内写的代码都会汇集到这个 index.html 文件内,而我们写的 Component组件 都由这个App组件所管理,所以说我们写所有代码最终都会汇集到这一个 HTML文件中。

            这就是为什么说Vue写的网页都是单页面的。

            我们平常看到的页面跳转其实大多数都是后端路由,而我们在Vue中写的路由是属于前端路由,是用于实现组件间跳转的。后端路由在跳转时会向服务器发送请求,而前端路由则不会向服务器发送请求。

    展开全文
  • 单页Web应用(single page web application,SPA),就是只有一张Web页面应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。[1]浏览器一开始会加载必需的HTML、...

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 [1]  浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。                                                                                                                ------百度百科

    在vue中路由切换有两种方式(暂不谈服务端渲染),分别为hash和history 。

    回答标题的问题,其实就是回答vue中hash模式和history模式的实现原理。

    hash模式

            hash模式在vue中的实现是通过监听hashChange事件,获取地址改变后#后面的值,通过这个值在路由表routes中匹配相对应的component,并执行render来实现的。整个过程中并没有向后台发送请求获取一个新的HTML页面。

    history模式

            history允许开发者直接更改前端路由(H5新特性),也就是改变地址栏url路径,但是并不会重新发起请求

            history模式的实现利用了它的两个重要的API:pushState和replaceState,这两个API都是可以改变url的,此时就通过监听url的变化来进行更新页面部分内容。

    展开全文
  • 昨天大学同学问我小程序的子页面可不可以也有...回想起以前的项目基本都是CRM,单页面怎么应用的来着,我竟然忘了,于是今天花一个小时,巩固一下。 这里单页面的设计与应用的精髓是路由的设置,写下来给大家看代码吧 i

    昨天大学同学问我小程序的子页面可不可以也有tabbar,他用的是uniapp,从来没遇到这样的需求,于是我查了uniapp的官方文档以及各个博客,都没有给出一个满意的答案。一是可以在子页面的下方绝对定位一个一模一样的tabbar,但这样页面跳转的时候tabbar会一闪而过,用户体验不是很好。第二个方法呢就是spa,这只是我的一个想法,没有去实践。回想起以前的项目基本都是CRM,单页面怎么应用的来着,我竟然忘了,于是今天花一个小时,巩固一下。
    这里单页面的设计与应用的精髓是路由的设置,写下来给大家看代码吧

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import TestNexttick from '../components/Test_nexttick.vue'
    import Login from '../components/login.vue'
    import Index from '../components/index.vue'
    import Welcome from '../components/Welcome.vue'
    import AddUser from '../components/user/AddUser.vue'
    import UserList from '../components/user/UserList.vue'
    import AddGoods from '../components/goods/AddGoods.vue'
    import GoodsList from '../components/goods/GoodsList.vue'
    Vue.use(VueRouter)
    
    const routes = [//添加路由对象
    {path:'/',component:Login},
    { path: '/index',
        component: Index,
        children: [//子路由,表示在index页面的路由
          { path: '/index', component: Welcome },//默认显示welcome页面
    	  { path: '/user/list', component: UserList },
    	  { path: '/goods/list', component: GoodsList },
        ] }
    ]
    
    const router = new VueRouter({
      mode:'history',//采用哪种路由模式,默认是history,可改为hash
      routes
    })
    
    export default router
    
    

    第二借助elementui的layout进行布局(index.vue)

    <template>
    	<div>
    		<el-container>
    		  <el-header>Header</el-header>
    		  <el-container>
    		     <el-aside width="200px">Aside</el-aside>
    		    <el-container>
    		      <el-main>
    				  <router-view></router-view>
    			  </el-main>
    		      <el-footer>Footer</el-footer>
    		    </el-container>
    		  </el-container>
    		</el-container>
    	</div>
    </template>
    
    <script>
    	export default {
    		data(){
    			return{
    				isCollapse:false
    			}
    		},
    		methods:{
    			login(){
    				this.$router.push('/index')
    			},
    			
    		}
    	}
    	
    </script>
    
    <style>
    	  .el-header, .el-footer {
    	    background-color: #B3C0D1;
    	    color: #333;
    	    text-align: center;
    	    line-height: 60px;
    	  }
    	  
    	  .el-aside {
    	    background-color: #D3DCE6;
    	    color: #333;
    	    text-align: center;
    	    line-height: 200px;
    	  }
    	  
    	  .el-main {
    	    background-color: #E9EEF3;
    	    color: #333;
    	    text-align: center;
    	    line-height: 160px;
    	  }
    	  
    	  body > .el-container {
    	    margin-bottom: 40px;
    	  }
    	  
    	  .el-container:nth-child(5) .el-aside,
    	  .el-container:nth-child(6) .el-aside {
    	    line-height: 260px;
    	  }
    	  
    	  .el-container:nth-child(7) .el-aside {
    	    line-height: 320px;
    	  }
    </style>
    
    

    这样在el-main里面理由路由占位符,可以在el-main里面进行页面切换,从而实现单页面。

    展开全文
  • webpack2.x请移步至基于Vue的简单的单页面应用在对Vue和webpack有了必定了解后,咱们就能够开始利用所了解的东西作一个简单的webapp了,不了解的同窗能够看下个人前两篇关于vue和webpack的基本应用:webpack+vue起步...

    本文基于vue1.x

    基于vue2.x&webpack2.x请移步至

    基于Vue的简单的单页面应用

    在对Vue和webpack有了必定了解后,咱们就能够开始利用所了解的东西作一个简单的webapp了,不了解的同窗能够看下个人前两篇关于vue和webpack的基本应用:

    webpack+vue起步

    利用webpack和vue实现组件化vue

    构建项目

    首先建立各个组件,个人目录结构以下:webpack

    //没有后缀名的都是文件夹

    |-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-routergit

    npm install vue-router

    引入各个组件并配置路由:github

    //main.js

    import 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。

    配置好路由后,须要将匹配好的组件正确的渲染到页面中,此时用到,它基于Vue的动态组件系统,因此它会继承一个正常动态组件的不少特性。在这里咱们用到两个:web

    v-transition和transition-mode的完整支持,为了切换效果能正常工做,路由组件必须不是一个片断实例。vue-router

    在路由的0.7.2+中支持keep-alive(关于keep-alive)npm

    因此在app.vue写入:segmentfault

    keep-alive

    transition="fade"

    transition-mode='out-in'>

    打开命令行启动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#动态组件。因此实现代码以下:

    • v-for="tab in tabs"

      :class="{'weui_bar_item_on':$index===selected}"

      @click="choose($index)">{{tab.tabName}}

    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;

    }

    }

    }

    两个动态组件为tab_1.vue和tab_2.vue。引入这两个模块,对外输出对组件的操做export default{},在template模板中将动态组件加载进去,使用保留的元素,动态地绑定它的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中设置动画的执行过程:

    /*切换动画*/

    .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循环插入图片

    在写循环插入图片的时候,写的代码以下:

    %7B%7Bitem.image%7D%7D

    此时在控制台会出现警告

    [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:https://github.com/MrZhang123...

    展开全文
  • 1、概念 就是只有一个页面的Web应用。单页面应用程序 Single page application (SPA) 是加载单个HTML 页面并...2、单页面应用的优点 1、提供了更加吸引人的用户体验:具有桌面应用的即时性、网站的可移植性和可访...
  • 1.将main.js、app.vue文件移入views文件夹中,新建分页的文件加未template,文件目录如下: 2.vue.config.js中增加如下配置: pages: { 'default/index': { entry: 'src/views/main.js', template: 'public/...
  • 单页面应用,翻译single-page application,简称SPA。单页面应用不像多页面应用,每次页面跳转时都会请求一个新的HTML文档,单页面应用只会请求一个HTML文档。页面内容变化时,仅仅在刷新页面中的组件。用vue-cli...
  • Vue单页面应用的优缺点 // 优点1、单页应用的内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。2、单页应用没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象3、...
  • 因为我们单页面应用中是没有页面这样一个概念的,它只有一个页面,也就是我们常见的index.html,那么我们是通过组件切换来模拟页面跳转的效果,所以这就是vue-router要实现的作用。 b、vue-router使用 那么我们怎么...
  • 先讲讲这个功用的完成场景吧,我们小组运用vue百口桶完成了一个单页面运用,最初就斟酌对登录状况做限定。比方登录后不能退却到登录页面,退出到登录页面后,不能退却方才登录的页面。在main.js中:new Vue({store,...
  • 前端开发不再以页面为单位,更多采用组件化的思想,代码结构和组织方式更加规范,便于修改和调整; API共享,同一套后端程序代码不用修改可以用于web,手机平板等客户端体验。 vue-cli提供的几种脚手架模板 vue-cli ...
  • 在使用vue-router时,咱们能够很方便地实现单页面应用,当咱们想要跳转到“另外一个页面”的时候,只要调用vue-routerAPI中的方法,传入相应的路由做参数便可。javascript单页面应用的一个特色是,若是某个路由...
  • 我们都知道,单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-rouetr在实现单页面前端路由时,提供了两种方式:Hash模式和History模式;根据mode参数来决定采用哪一种方式。 那为什么这两种方式能够实现...
  • 首先是引入组件,然后通过v-if指令,设置关键字,然后在data中设置属性true 或者 false 实现模板之间的切换,或者通过定义方法,改变关键字的值,因为在vue中一切皆数据,通过改变数据改变组件,实现组件切换显示...
  • 絮叨:前段时间要做一个混合开发 h5+Android,以及微信公众号开发,商城模块+订单模块由h5开发,想着若以vue-cli开发的话实在不方便,不需要那么多的依赖,每次有不同的页面入口,又要重新更换默认路由和打包,很是...
  • 摘要:这篇Vue栏目下的“vue单页面应用打开新窗口显示跳转页面的实例”,介绍的技术点是“vue单页面应用、vue单页面、单页面应用、打开新窗口、跳转页面、新窗口”,希望对大家开发技术学习和问题解决有帮助。...
  • 前端在未登录的情况下打开应用时,跳转到微信授权页面 确认授权后微信服务器会重定向到之前设定的redirect_url,我们这里设置/oauth 重定向后,前端从url中获取到code后,请求服务器来获取access_token及用户信息...
  • app内嵌vue单页面应用的一些坑

    千次阅读 2020-12-22 09:02:24
    写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!!1、白屏项目第一次上线正常项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!),一时定位不到问题...
  • vue页面应用

    2021-06-11 02:08:17
    Vue.config.js是一个可选的配置文件,其中pages选项是构建多页面应用。需求:vue搭建的项目中,需要多页面,并单独设置路由。前提:利用Vue CLI创建项目。目录结构:跟多页面相关的文件在红色框里面。 Public文件夹...
  • 单页面应用是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中,内容较多时首页加载速度比较慢 多页面是指一个应用中有多个页面,页面跳转时是整页...
  • vue路由、单页面应用

    2021-07-23 18:10:49
    路由 路由 : 是浏览器URL 中的哈希值( #hash ) 与 展示视图内容...单页面应用程序 单页面应用的优缺点: 优点: 1、用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作。 2、适合前后端分离开发,服
  • vue单页面应用及其优缺点有哪些? 原生页面:实现页面之间跳转,就是真实的页面挑战(N个.HTML) 单页面:实现页面跳转,通过路由实现 优点: 用于体验更优,用户跳转页面时,基本通过ajax请求数据; 做前后端分类,...
  • 经过分析可以知道项目的显示第一个URL组件是login文件夹下的index.vue login文件夹下的index.vue里使用<script type="text/javascript" src="./index.js"></script>做js处理 login的js文件 可以看出来...
  • 问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验。我想要的...
  • vue配置页面应用,多页面应用设置默认跳转页面
  • 很好的问题呀~JQuery和Vue.js首先,JQuery和Vue.js作为两个JS库,当然不冲突,你可以在任何情景下同时使用它们。但是,JQuery和Vue.js的设计理念不同,较少会同时选择。JQuery作为事件驱动的经典框架,简化了事件、...
  • ↑关注 + 星标,每天学Python新技能后台回复【大礼包】送你Python自学大礼 今天使用我们一起来尝试,使用 Vue + Flask 搭建一个简单的单页面应用。前端环境配置首先安装 vue1npminstallvue创建 vue 工程1#使用...
  • </rule> </rules> </rewrite> </system.webServer> </configuration> 增加 并设置想要匹配的路径, 如:我想所有nav/路由的子页面都能通过 url 进行访问则配置如下: ...
  • 我们是不是可以第一次加载全部的页面内容,以后的更新,仅仅更新变化的数据,答案是可以的,这就是单页面应用SPA。 下图是总体上比较单页面应用和多页面应用的流程: 从上图可以看到: 多页面应用: 每次请求...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,810
精华内容 17,924
关键字:

vue为什么是单页面应用

vue 订阅