项目实战 - b13wen/vue.js-study GitHub Wiki

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),

	<template>	

		组件代码区域

	</template>

	<script>

		js代码区域

	</script>

	<style scoped>

		样式代码区域

	</style>

2、修改路由
	import Vue from 'vue'	
	import Router from 'vue-router'
	import Home from '@/components/first/Home' #导入

	Vue.use(Router)  

	export default new Router({   #导出默认为Router的vue实例
	  routes: [
		{
		  path: '/',			#路由匹配的hash地址
		  name: 'Home',			#在 vue-router 中的标识符
		  component: Home,		#则代表此页面渲染时的所用到的组件
		#还可以加入一个redirect:"/XX"	 重定向新地址
		}
	  ]
	})

	在main.js中
		router, 挂载了router实例
		
		router:nyRouter, 挂载自定义nyRouter实例
	

3、说明
	
	1）路由
		1、是什么：路由本质就是一种对应关系，比如据地址获取对应地址的数据资源
		
		2、有什么：路由分为前端路由和后端路由
			后端路由室友服务器端进行实现的，并完成资源的分发
			前端路由是依靠hash值（锚连接）的变化实现的
			
		3、前端路由的体验
				原生的href跳转
		
		4、Vue Router简介
			它是vue.js官方提供的路由管理器，是一个功能强大的前端工具
			
		5、嵌套路由
			当我们进行路由是在显示组件中还有新的子级路由连接以及内容
			
			
			
			
	2）组件生命周期
	
	3）监听属性
		watch:{
			myvalue: function() {  #监听myvalue
				console.log("XXX") 
			}
		}
	4）组件之间的通信 （数据、方法、）
		父到子 
			a、父 <child v-bind:personinfo="msg"></child>  personinfo 自定义标签属性
			b、父 msg: "传的数据" 
			c、子组件props:['personinfo']
			d、子 {{personinfo}}
		
		子组件调用父组件方法
			a、父 <child @func="show"></child>
			b、 父 定义show(参数) 方法
			c、子接收并传参 $emit('func',参数) 
			
		子组件与传一个方法给父组件
			a、父组件中 <child v-on:increment="incrementToal"></child> 父组件监听自定义事件increment
			b、子组件<child v-on:click="increment">{{ counter }}</child>
			c、 increment: function () {      this.counter += 1      this.$emit('increment')    }  $emit向外暴露这个方法
			
	5）通道
		<div id="app" v-cloak>
		   <p>{{ timeDate | formatDate }}</p>
		</div>
		将时间new Date()参数转化成自己需要的日期格式
		
	6)路由过程中的参数传递	
		param传参和query传参
		1）param传参
			a、父路由使用"显示传参"/edit/123
				子路由使用接受{{$route.params.id}} id为接受的值
				
			b、url不显示传参
				父 <router-link :to="{name:'Log',param:{num:666}}"></router-link> 	name值参数是指子路由名
				子 {{this.$route.params.num}}
				
		2）Query实现路由传参
			父 <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
			子 {{this.$route.query.num}}
	
	7）slot内容分发
			<children>
				<span>子组件内容</span><!--上面这行不会显示-->
			</children>
			
		slot 内容分发：
			解决父组件需要在子组件内放一些DOM,这些DOM在哪显示
			父组件在子组件 内套内容，默认是不显示的
			
		a、单个slot
			父计算机属性中
				components: {
				  children: {   
					template: `<p>我是子组件：<slot></slot></p>`
				  }
				}
		b、具名slot 
		
			父组件中
			<children>
				<span slot="first">子组件内容1</span>
				<span slot="second">子组件内容2</span>
			</children>
			
				将放在子组件 父计算机属性所配置的对应位置
				<p>我是子组件：<slot name="first"></slot>---<slot name="second"></slot></p>
			
	8）event
	
		
4、使用路由进行页面跳转
	商品展示列表
	商品详情
	购物车
	后端管理页面
	
	步骤一、修改App.vue 
		加入三个router-link 方便让用户跳转自己想看的页面
		<template>
		  <div id="app">
			<nav>
			  <div class="container">
				<ul class="nav_left">
				  <li>
					<!--router-link 和 a 标签类似，只不过 Vue 为它添加一些额外的优化逻辑。-->
					<router-link to="/">Home</router-link>
				  </li>
				  <li>
					<router-link to="/admin">Admin</router-link>
				  </li>
				  <li>
					<router-link to="/cart">Cart</router-link>
				  </li>
				</ul>
			  </div>
			</nav>

			<router-view/>
			<!--router-view显示的是当前路由地址所对应的的内容-->
		  </div>
		</template>
			
	步骤二、编写Admin.vue组件，cart.vue与他一样
		页面级一般放在src/pages 中
		<template>
			<div>
			  <div class="title">
				<h1>{{msg}}</h1>
			  </div>
			</div>
		</template>

		<script>
			export default {
				name: "Admin",
				data() {
					return{
						msg: 'Welcome to the Admin Page'
					}
				}
			}
		</script>

		<style scoped>

		</style>
		
	步骤三、
		路由router.js中配置路由，与home配置一致
		
		
	步骤四、嵌套路由和动态路由组织页面

	2、介绍
		核心： 路由和中间件