二、Vue菜鸟小教程-vue-router的简单入门程序

使用vue.js做项目的时候，一个页面是由多个组件构成，所以在页面跳转的时候，并不适合用传统的href，于是vue-router应运而生。这算是学习Vue的第二阶段吧，前几天大概的把一些基本知识浏览了一遍，今天就在网上找了这么一个小程序来巩固一下吧。

vue-router入门小程序

1.首先引入vue和vue-router包。

可以使用cdn和npm的方式，作为初学者还是先使用cdn的方式比较好。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

淘宝镜像  cnpm install vue-router

2.构建页面结构

<div id="app"><top-bar></top-bar><!--定义头部--><hr /><p>email to: {{email}}</p><hr /><!--路由出口，路由匹配到的组件将在这里渲染--><router-view></router-view><footer-bar></footer-bar>
</div>

//router-link相当于<a>标签通过to属性来制定链接var topbarTemp = `//这里是es6的模板字符串，不是单引号，是Tab键上面的符号。<nav><ul>

//NavList是源数据组，item是数组元素迭代的别名。<li v-for="item in NavList"><router-link to="item.url">{{item.name}}</router-link>//v-bind:to="item.url"缩写:to="item.url"</li></ul></nav>`;

定义组件

 Vue.component(tagName,options)其中tagName为组件名，options为配置选项。

Vue.component('top-bar',{template:topbarTemp,data:function(){return{NavList:[{name:'首页',url:'/home'},{name:'产品',url:'/product'},{name:'服务',url:'/service'},{name:'关于',url:'/about'}]}}});//        定义组件footer-barVue.component('footer-bar',{template:`<footer><hr/><p>版权所有@flydragon</p></footer>`});

4.创建home和product模板

var home = {template:`<div> {{ msg }} </div>`,data:function(){return { msg:'this is home view' }}};
//      创建product模块var product = {template:`<div>{{msg}}</div>`,data: function () {return { msg:'this is product view' }}}

5.定义路由对象

var router = new VueRouter({routes:[{path: '/home', component : home },{path: '/product', component : product }]});

6.创建和挂载根实例，这里有两种方式书写。

var app = new Vue({el:"#app",data:{email:'flydragon@gmail.com',},router:router});
//      var app = new Vue({
//          router
//      }).$mount("#app");

注：在vue组件中data必须写为函数，且需要用return来返回参数，但是当data为空时，即使不写return也不会报错。

v-if和v-show的区别：

同样都是条件判断语句，那么这两者有什么却别呢？

v-if是惰性的，如果在初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译，（编译会被缓存起来），

相比之下，v-show简单的多元素适中被编译并保留，只是简单的基于css切换。一般来说v-if有更高的切换消耗，而v-show有更高的初始渲染消耗，因此如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。

同上面的例子，但是这里遇到一个问题，就是如何定义样式呢，怎么添加class呢，后续会讲解。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>火星时代导航简写二程序</title><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-router.js"></script><style>*{margin: 0px;padding: 0px;}#app{min-width: 1400px;}img{position: absolute;top: 5px;left: 20px;}nav{width:100%;height:50px;background: pink;position: relative;}ul{position: absolute;top: 20px;left: 250px;}li{list-style: none;width: 100px;height: 20px;display: inline-block;text-align: center;background: cyan;margin: 0px 5px;padding: 5px 0px;border-radius: 5px 5px 0px 0px;}a{text-decoration: none;color: gray;}</style>
</head>
<body><div id="app"><top-bar ></top-bar><!--头部导航部分--><router-view></router-view><!--内容显示区域--></div>    <script>var topbarTemp=` <nav><img src="3.png" /><ul><li v-for="item in NavList"><router-link :to="item.url">{{item.name}}</router-link></li></ul></nav>`;Vue.component('top-bar',{template:topbarTemp,data:function(){return{NavList:[{name:'首页',url:'/home'},{name:'产品',url:'/product'},{name:'服务',url:'/service'},{name:'关于',url:'/about'}]}}});//创建模块var home = {template:"<div><h2>{{msg}}</h2></div>",data:function () {return {msg:"这是首页页面内容"}}};var product = {template:"<div><h2>{{msg}}</h2></div>",data: function () {return{msg:"这是产品页页面内容"}}};var service = {template:"<div><h2>{{msg}}</h2></div>",data: function(){return {msg:"这是服务页页面内容"}}};var about = {template:"<div><h2>{{msg}}</h2></div>",data: function (){return {msg:"这是关于页页面内容"}}}//定义路由对象var router = new VueRouter({routes:[{path:"/home",component:home},{path:"/product",component:product},{path:"/service",component:service},{path:"/about",component:about}]});var app = new Vue({el:"#app",router})</script>
</body>
</html>

二、Vue菜鸟小教程-vue-router的简单入门程序相关推荐

vue学习笔记（一）：vue devtools+简单入门程序
离线安装vue devtools 1.vue devtools下载 https://pan.baidu.com/s/1MtYvMPew4lb14piIrs9x6w 提取码:6666 2.写一个简单的v ...
VUE购物车小案例—vue指令的综合应用
需求: 运用Vue基础指令知识实现小小购物车: 涉及到的指令有:v-for.v-model .v-on.v-text 1.能够显示商品名,价格,以及当前商品在购物车的数量 2. 点击加+ 减- 可 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
用Vue实现小Q聊天机器人（二）
GitHub:https://github.com/baiyuliang/Qrobot_Vue 项目完整结构: 接下来,开始着手修改刚刚创建完成的项目! 打开main.js,引入相关插件,本项目的网络 ...
vue项目实践教程1：vux项目搭建和简介
vue作为比较受欢迎的前端开发框架之一,因为其优雅的代码结构,轻量化代码设计,简介易懂的API,灵活易用的指令和属性广受前端开发者的喜爱,其学习成本和学习难度相对react来说要简单很多. 这里,笔者 ...
白话uni-app 【也是html、vue、小程序的区别】
传统的h5只有1端,即浏览器.而uni-app可跨多端,虽仍属前端,与传统h5有不同. 如果你对h5比较了解,可通过本文快速了解uni-app. 网络模型的变化以前网页大多是b/s,服务端代码混合在 ...
前端模板-2【vue部分小功能、bug处理】
前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...
Vue.js基础教程
一.简单介绍是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...
用Vue开发小程序的框架
在尤大微博铺垫着"将会引入一些关于 TypeScript 的改进"一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前.从 Release Note ...

二、Vue菜鸟小教程-vue-router的简单入门程序

二、Vue菜鸟小教程-vue-router的简单入门程序相关推荐

最新文章

热门文章