简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vue-awesome-swiper 插件) 新闻列表 新闻详情 职位列表 联系我们页面(使用百度地图api) 技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js…

配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能) 更新一下 vue-cli:npm update vue-cli 一.使用路由在main.js中,需要明确安装路由功能: import Vue from 'vue' import VueRouter from 'vue-router' import App fr…

Vue2.0和1.0实现路由的方法有差别,现在我用Vue 2.0实现路由跳转,话不多说,直接上代码 HTML代码 <div class="tab"> <router-link to="/goods">商品</router-link> <router-link to="/rating">评论</router-link> <router-link to="/seller&qu…

1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Router支持3种路由模式: ◊ hash:使用URL hash值作为路由 ◊ history:依赖HTML5 History API和服务器配置 ◊ abstract:支持所有JavaScript运行环境,如node服务器端.如果发现没有浏览器的API,路由就会强制进入该模式. vue-router提供…

1.vue的应用场景.优势.劣势 优势 通常情况下,运行时效率更高:一个事件循环仅一次视图更新,无频繁的DOM操作: 数据与视图分离,通过管理数据流,控制页面的展现,便于维护.且高效: 数据双向绑定,表单操作方便.快捷: 代码风格简约,完全符合前端的书写习惯: 组件管理的方式,更便于代码的复用.管理:单文件组件将每一个独立的功能封装在独立文件中,更灵活: 有较好的插件支持:vue-router.vuex.vue-loader等. 劣势 初始化时间长: 要构建虚拟DOM,其代码风格更符合人的读写习…

一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  about按钮 => about 内容, 这是另一条路由. 2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组.[{home 按钮 =>home内容 }, { about按钮 => about 内容}] 3, router 是一个机制,相当于一个管理者,它来管理路由.因为…

什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新后再执行的操作:比如Swiper的调用 new Swiper ('.swiper-container', { direction: 'horizontal', pagination : '.swiper-pagination', loop: true, observer: true, // 修改sw…

引:http://www.cnblogs.com/zccblog/p/7192420.html Vue.set 的作用就是在构造器外部操作构造器内部的数据.属性或者方法.比如在vue构造器内部定义了一个count为1的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set. 一.引用构造器外部数据: 什么是外部数据,就是不在Vue构造器里里的data处声明,而是在构造器外部声明,然后在data处引用就可以了.外部数据的加入让程序更加灵活,我们可以在外部获取任何想要…

好的,接下来,我们来写路由.用的是vue2.0的路由. 步骤一:配置main.js import Vue from 'vue'; import App from './App'; import router from './router'; <!------------------------这里引入的是router目录,会默认识别里面的index.js文件(不能是其他名字) /*eslint-disable no-new*/ new Vue({ <!---------------------…

昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li a 为例 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 使用 rou…