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>

 

 

 

Logo

前往低代码交流专区

更多推荐