vue-router2使用

由于学习的是router1.0的设置方法,但是现在都是支持2.0的,都报错,那些方法没定义,所以只好又来研究一下router2.0. vue-router2.0对路由的设置有了很大的改变,在HTML中将之前的用a标签link path改成了直接用一个router-link标签,但是你在网页审查元素会发现它还是一个a标签,router-view没有改变,在js中也将原本的router.map 直接改成了一个数组然后在new VueRouter时直接将数组用进去,将之前的挂载由router.star

以下是vue默认模板结构,自动加载HelloWorld (1)@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径,是在webpack.base.config.js里面配置好别名 (2)import VueRouter1 from 'vue-router'  含义:将vue-router模块中的对象赋值给VueRouter1变量 (3)import router2 from './router' 含义:将router目录的对象赋值给router2变量 (4)router:router2,

文档 https://router.vuejs.org/zh-cn npm  install vue-router --save 调用 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 流程 a. views目录内组件 b. router目录映射路由js   (路径与a中组件) c. main.js 对象属性router d. 标签router-link / router-view 1.基本路由

效果展示: ============================================================================ 应写成下图这种形式: :id为占位 现在是通过什么路径向路由组件传递数据的? 通过请求参数${message.id}传递的 请求参数有两种: 1).Param 2).Query  (?后面,类似于get) ================================================================

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools. 2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序. 3)编译完成后,目录结构如下: 修改shells.chrome目录

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

VUE项目搭建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev