vue:19.9.15日記

非父子組件通信：
用bus這個中間人，A組件發佈事件$emit,B組件訂閱on，來源於js的觀察者模式（發佈者-訂閱者模式）。
bus.js

import Vue from 'vue'
const bus=new Vue();
export default bus

A.vue

created():{
bus.$emit('val','我是A收到了嗎')
}

B.vue

created():{
bus.$on('val',(data)=>{
        console.log(data);//我是A收到了嗎
    });
    }

路由傳參

在獲取文章列表後，點擊跳轉到詳情頁。

  created(){
  	this.$axios.get('blog').then(res=>{ 
  		  for(let key in res.data.data){	
				res.data.data[key].id=key; //創造了一個新屬性id然後將key賦值給id 必須要這一步來生成id做路由跳轉參數
				this.middleBlogs.push(res.data.data[key]);

				 }
  			this.showBlog();//寫的分頁函數
  		});
  
  }

拿到十個單獨對象後，在router-link裏傳入。注意，這裏如果不遍歷創造一個新id屬性然後將key賦值給id，直接在blog.js裏定義id的話，會報類型錯誤，因爲i是number，但是
:to 接收的參數是string | Location。即使使用toString(i),傳入的也不是動態的id值，只是一堆亂碼。但是傳入blog.title 路由地址成功跳轉。

<router-link v-bind:to="blog.id">
				<h1>{{blog.title}}</h1>
				 </router-link>

mockjs的使用

install mockjs --save
新建文件夾mockjs下新建一個bolg.js

import Mock from 'mockjs'
const Random=Mock.Random;

var arr=[];
for(let i=0;i<10;i++){
	let template={
		'content':Random.paragraph(3,10),
		'title':Random.string(2,10),
		'date':Random.date(),
		'nav_id':i
	} 
	arr.push(template);
}

let blog=function(opstions){
let rtype=opstions.type.toLowerCase();//判斷類型
switch(rtype){
  case 'get':
  break;
  case 'post':
  let id=parseInt(JSON.parse(opstions.body).params.id);
    arr=arr.filter(val=>{
       return val.id!=id;
		});
  break;
  default:		
}	
return {
	data:arr
	}
}
   Mock.mock('blog',/get|post/i,blog);

組件中使用:先 import marked from ‘marked’

this.$axios.post('blog',{
					params:{
						id:id
					}
				}).then();

三角形css的寫法

向右，父元素是position：relative。

.span_triangle{
	position: absolute;
	width: 0;
    height: 0;
    top:50px;
    right:-30px;
    border-top: 15px solid transparent;
    border-left: 30px solid red;
    border-bottom: 15px solid transparent;
	}