Vue组件vue-router使用方法小测

1.首先下载并载入js脚本:

	<script type="text/javascript" src="./vue.js" ></script>
	<script type="text/javascript" src="./vue-router.js" ></script>

2.创建一个实例供vue使用:

<div id="wrap"> 

<router-link  to="/index" > index </router-link>
<router-link  to="/user" > user </router-link>
//设置两个路由 /index和/user
<transition mode="out-in"  enter-active-class="animated  bounceInLeft"
leave-active-class="animated  bounceOutRight">
<router-view></router-view>//路由视窗
</transition>
</div>

script:

new Vue({
		    el:"#wrap",
//div的id名称  实例化
			data:{
//数据存放(暂时为空仅验证后面router)
			},
			router:router,
//添加router
		  })

3.接下(在vue中)来定义router,从官网上我们可以知道定义router的方法:var router = new VueRouter({ routes:routeName});

  

var router = new VueRouter({
  routes: [
    { path: ‘/index‘, component: list1},
    { path: ‘/user‘, component: list2},
    {path:"*",component:list1}
  ]
})

(注:routes是一个数组  同等于:

var  test = [
	{path:"/index",component:list1 },
	{path:"/user",component:list2 },
	{path:"*",component:list1}
            ]

var router = new VueRouter({
  routes: test
})

)

 4.定义component渲染模板:list1 和 list2  -----这部分用到了局部组件的知识 

  

<template id="list1">
		<div>
		<h3>  index 页面  </h3>
		<ul>
		<li>1111111111111</li>
		<li>222222222222222</li>
		<li>333333333333</li>
		<li>44444444444444</li>
		<li>4444444444444</li>
		</ul>
		</div>
		</template>

		<template id="list2">
		<div>
		<h3>  user 页面  </h3>
		<ul>
		<li>aaaaaaaaaaaaaaa</li>
		<li>bbbbbbbbbbbbbbbbbbb</li>
		<li>cccccccccccccccccc</li>
		<li>ddddddddddddddddd</li>
		<li>eeeeeee</li>
		</ul>

		</div>
		</template>

<!--注意template里面只能写一个div标签-->

  script中:

var  list1 = {
		template:"#list1",
		}
var  list2 ={

		template:"#list2",
		}

  就可以实现简单的路由功能了

时间: 2024-10-29 04:53:07

Vue组件vue-router使用方法小测的相关文章

Vue组件之间的传值方法

在vue当中有两种组件之间的传值方法,分别是 * 父子组件* 之间的传值和* 非父子组件 *之间的传值方法 父子组件之间的传值方法 父子组件之间的传值分为两种 * 父组件给子组件传值 子组件给父组件之间的传值 父组件给子组件传值方法 // 父 <div id = "app"> <my-content></my-content> </div> // 子 <template id="content"> <

千锋教育Vue组件--vue基础的方法

课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue基础的方法</title&

vue组件

require.js 加载 vue组件 r.js 合并压缩 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法r.js 合并压缩 参考司徒正美 r.js合并实践 准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data method

2.基础:Vue组件的核心概念

一.组件基础和注册 组件概念 组件系统是 Vue 的另一个重要概念,他的核心就是封装和复用. 细节 组件的name必须是全局唯一. 二.属性.事件和插槽 组件的三大核心概念:属性.事件和插槽. 属性,事件,插槽好文 1.属性 1.1导言 vue组件 = vue实例 = new Vue(options) 不同的组件只不过是options的不同,90%的工作都是围绕配置options来进行 1.2分类 2.事件 事件冒泡 阻止事件冒泡 3.插槽 分类: 默认插槽 具名插槽 作用域插槽 本质: 作用域

vue中组件的四种方法总结

希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: 第一步:实例化Vue对象 var app = new Vue({ el:"#app" })     第二步:定义组件 var myComponent = Vue.extend({ template: '<h1>vue全局组件写法一</h1>' });     第三步

Vue 父组件向子组件传值,传方法,传父组件整体

父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3.就可以在子组件中引用title Tips:避免父子组件传值时命名冲突 父子组件传方法方式一样 1.父组件调用子组件时绑定属性,例如-> :run="run" 2.子组件中props中声明run:props:['title','msg','run'] 3.子组件中的button引用r

vue(ref父组件使用子组件中定义的方法)

一.前言 二.主要内容 1.实现效果(其实可以直接在父组件中操作子组件的显示隐藏,但是这里通过在子组件定义自己的显示隐藏效果,让父组件调用,训练一下这种方式) 2.分析: (1)点击父组件的某一个li项,跳出这个商品详情(子组件项) (2)子组件中还是需要接收到父组件中的food,但是这个food不像上一篇那样是固定的,所以这里的这个food是根据我们点击的不同的项,传进去的 (3)为了实现上一步分析:我们需要在data中定义一个对象,点击的时候,将当前对象的food传进去,然后在传给子组件,这

VUe.js 父组件向子组件中传值及方法

父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以要想在子组件中使用父组件的数据的时候,就需要以属性绑定的形式,将父组件的数据传递到子组件中.     3. 通过属性绑定传递来的数据无法再子组件中直接使用,需要在props中重新定义以后才可以使用.例:props:['变量名'].props是一个数组.    4. 子组件中的data数据都是私有,子

nuxtjs在vue组件中使用window对象编译报错的解决方法

我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navagitor等,以及H5的FormData()方法,所以当你在created之前使用这些时,会报错,那么如何处理呢? 1.自己的写的函数里包含window等 因为nuxt为SSR框架,所以其编译打包时会区分服务端渲染还是客户端渲染(即浏览器),在vue文件中使用window对象报错的原因是,webpac