vue + d3项目

1、安装好node环境

2、安装vue-cli

    淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

    

3、创建项目（名称小写）安装依赖

4、路由

5、resourse和axios（推荐使用）插件

    resourse：vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

axios功能特性：
1）、在浏览器中发送 XMLHttpRequests 请求
2）、在 node.js 中发送 http请求
3）、支持 Promise API
4）、拦截请求和响应
5）、转换请求和响应数据
6）、取消请求

7）、自动转换 JSON 数据

8）、客户端支持保护安全免受 CSRF/XSRF 攻击

//为了方便起见，已经为所有支持的请求方法提供了别名。
axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）
//注意:当使用别名方法时，不需要在config中指定url，method和data属性。

//并发
//帮助函数处理并发请求。
axios.all（iterable）
axios.spread（callback）
//创建实例
//也可以使用自定义配置创建axios的新实例。
axios.create（[config]）

//添加请求拦截器
axios.interceptors.request.use（function（config）{
  //在发送请求之前做某事
  return config;
}，function（error）{
  //请求错误时做些事
  return Promise.reject（error）;
}）;

//添加响应拦截器
axios.interceptors.response.use（function（response）{
  //对响应数据做些事
  return response;
}，function（error）{
  //请求错误时做些事
  return Promise.reject（error）;
}）;

//您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。
axios.get（'/ user / 12345'，{
  validateStatus：function（status）{
    return status < 500; //仅当状态代码大于或等于500时拒绝
  }}
}）

6、export和import

    

/**
 * 1、匿名导出
 */
export default new Router({
  mode: 'history', //TODO 访问路径不带井号 hash :带#号 默认带#号
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

/**
 * 匿名接收
 */
import router from './router/index';

/**
 * 2、命名导出
 */
export let router = new Router({
  mode: 'history', //TODO 访问路径不带井号 hash :带#号 默认带#号
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

/**
 * 命名接收1
 */
import {router} from './router/index';

 

/**
 * 命名接收2
 */
import * as routers from './router/index';
let router = routers.router;

 

7、mogodb常用指令及运算符

        db.user.find({age:{$gt:20}})//查数据集里面age字段大于20的数据  

• (>) 大于 - $gt
• (<) 小于 - $lt
• (>=) 大于等于 - $gte
• (<= ) 小于等于 - $lte

8、node和vue项目本地互通

在vue项目中

 

proxyTable: {
  '/card':{//node配置的路由
    target:'http://localhost:3000'
  }
},

9、谷歌中安装vue插件

插件目录：

C:\Users\acer\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\4.1.3_0

10、Vuex

1）安装Vuex 

npm install vuex --save

2）基础知识点

引入和定义

import Vuex from 'vuex'

const store = new Vuex.Store({ ...options })

 

11、vue父子通信

1）父向通信

本身就支持，通过可以通过props属性来实现

2）子向父通信

vue不允许，可通过触发事件来通知父组件改变数据。

父组件中定义方法，子主键中通过$emit去调用和传参数，来达到通信的目的。

3）组件之间的通信

A:通过vuex来实现

B:通过定义一个中转站来实现

11、vue语句

1）vue条件判断语句及循环语句

v-if
v-else
v-else-if
v-show
v-for  3个参数 1、对象的val值，2、key名，3、索引

2）vue绑定事件语句

v-model 双向绑定（函数，变量）

watch  定义事件

3）样式和时间绑定

v-bind  绑定class

v-on    绑定事件

4）自定义语句

// 注册一个全局自定义指令

v-focusVue.directive('focus',
{
//当绑定元素插入到DOM中。inserted: function(el){
//聚焦元素el.focus()
}

})

// 注册一个局部自定义指令

new Vue({
el: '#app',
directives: {
//注册一个局部的自定义指令v-focusfocus: {
//指令的定义inserted: function(el){
//聚焦元素el.focus()
}
}
}
})

13、D3初体验

 

<template>
	<div class="body_padding">
	<modelTitle title="专业技能"></modelTitle>
	<div class="content_padding" id="dashboard_skill_svg"></div>
	</div>
	</template>
	<script>
	import * as d3 from 'd3';
	import d3tooltip from 'd3-tooltip'
	import modelTitle from './title.vue'
	export default
	{
	//el : "#dashboard_skill_svg",
	data(){
	return {
	msg: ''
	}
	},
	mounted() {
	this.getSvgDom();
	},
	methods : {
	getSvgDom(){
	var height = 200; //画布的高度
	var width = this.$el.parentNode.offsetWidth-301;
	var svg = d3.select('#dashboard_skill_svg')//选择文档中的body元素
	.append("svg") //添加一个svg元素
	.attr("width", width) //设定宽度
	.attr("height", height); //设定高度
	var dataset = [650, 230,200,180,150,130,100,90,50,10];
	var num = dataset.length-1;
	var dataX = ['javaScript','CSS','HTML','canvas','svg','webgl','vue.js','jQuery','node.js','java'];
	var dataY = ['0','1年','2年','3年','4年'];
	var dataAx = dataX.concat(dataY);
	var top = 10,
	left = 80,
	right = 30,
	bottom = 30,
	rectHeight = (height-bottom-top-5)/dataset.length, //每个矩形所占的像素高度(包括空白)
	rectWidth = (width-left-right)/(dataY.length-1);
	var tooltip = d3tooltip(d3);
	/**
	* 绘制外层边框
	*/
	svg.append("rect")
	.attr("x",left)
	.attr("y",top)
	.attr("width",width-left-right)
	.attr("height",height-top-bottom)
	.attr("fill",'#F6F6F6')
	.attr("stroke","#555");
	/**
	* 绘制柱子
	*/
	svg.selectAll("svg")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",left)
	.attr("y",function(d,i){
	return i * rectHeight+top+5;
	})
	.attr("rx",5)
	.attr("ry",5)
	.attr("width",function(d,i){
	return d;
	})
	.attr("height",rectHeight-5)
	.attr("fill","steelblue")
	.on('click',function(d,i){
	//return alert(d);
	})
	.on("mouseover", (d,i)=> {
	var html = d.toString();
	tooltip.html(dataX[i]+': '+Math.round((html/width)*12*4)+'个月')
	tooltip.show()
	})
	.on("mouseout", (d,i)=>{
	tooltip.hide();
	})
	.attr('cursor','pointer')
	.attr('opacity',0.8)
	.append("animate")
	.attr('attributeName','width')
	.attr('attributeType','XML')
	.attr('begin','0s')
	.attr('dur','1s')
	.attr('fill','freeze')
	.attr('from','20')
	.attr('to',function(d){
	return d;
	});
	svg.selectAll("text")
	.data(dataAx)
	.enter()
	.append("text")
	.attr("x",function(d,i){
	if(i>num){
	return (i-num-1) * rectWidth+left-10;
	}
	return 0;
	})
	.attr("y",function(d,i){
	if(i>num){
	return height-bottom+12;
	}
	return i * rectHeight+23;
	})
	.attr("fill","#555")
	.attr('font-size',12)
	.text(function(d,i){
	return d;
	});
	}
	},
	components : {
	modelTitle
	}
	}
	</script>