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> |