阿土

阿土 查看完整档案

合肥编辑安徽财经大学  |  工商管理 编辑  |  填写所在公司/组织 1562216678@qq.com 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

阿土 发布了文章 · 2020-04-14

React-bug(一)

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.createClass is not a function
错误提示

var HelloMessage = React.createClass({
    render: function() {
      return <h1>Hello {this.props.name}</h1>;
    }
  });
  
  ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('root')
  );

解决办法
手动更改一下版本号package.json中的react
image.png
改成
image.png
然后重新运行npm install
并启动npm start就整好了;
有些问题是官方版本问题,不需要太纠结,知道怎么解决就行了。

查看原文

赞 0 收藏 0 评论 0

阿土 发布了文章 · 2020-03-31

Vue---自定义指令(二)

一:position定位元素:
HTML:

<input text="text" v-directivess="200+200" />
ecport default {
   
  directives: {
    directivess: {
      bind(el, binding) {
      },
      inserted(el, binding) {
      //el dom
        console.log(el);
        
        console.log(binding);
        el.style.position = "fixed";
        el.style.top = binding.value + "px";
      }
    }
  },
}

打印结果:
微信图片_20200331101539.png

效果图
input使用定位元素 位置元素高于下面的图表
微信图片1_20200331102122.png
二:数据监听
HTML

<template>   
    //原始数据
    <div v-json="color">{{num}}</div>
    //监听后数据
    <div>{{nuberA}}</div>
    <p>
      <button @click="add">加一</button>
    </p>
    <p>
      <button @click="unbind">减一</button>
    </p>
</template> 
  export default {
    directives: {
        json: {
          bind(el, binding) {
            console.log("1-bind");
            el.style = "color:" + binding.value;
          },
          inserted(el, binding) {
            console.log("2-inserted");
          },
          update(el, binding) {
            //更新
            console.log(el)
            el.style.color = binding.value;
            console.log("3-update");
          },
          componentUpdated() {
            console.log("4-componentUpdated");
          },
          unbind() {
            console.log("5-unbind");
          }
        }
      },
  }
  methods: {
  //加一
    add() {
      this.num++;
      //点击一次颜色改变一次
      this.color = "#ccc";
    },
    //减一
    unbind() {
      this.num--;
      //点击一次颜色改变一次
      this.color = "blue";
    }
  },
  //数据监听
     computed: {
        nuberA() {
          return this.num;
        }
      },

  
  

点击效果前①
微信图片11_20200331110038.png
点击效果后②
微信图片22_20200331110101.png

查看原文

赞 0 收藏 0 评论 0

阿土 发布了文章 · 2020-03-30

Vue---自定义指令(一)

小案例
一:局部自定义指令
html:

//修改input框内的背景色
<input type="text" v-myfocus>
 export default {
    el:'app',
    directives:{
            myfocus:{
                inserted (el,binding) {
                    console.log(el);
                    console.log(binding);
                    el.style.backgroundColor = '#ccc';
                }
            }
    },
  }

效果图:微信图片_20200330110733.png
二:全局自定指令
html:

<input type="text" v-mycolor="color">
////省略
export default {
    el:‘app’,
    data(){
        return {
        //定义颜色
            color:'red'
        }
    }
}

在main.js中定义全局自定义指令

`把所有的main.js都贴了出来```
//import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.use(ElementUI);

* 自定义指令  有用的只有下面这个
* mycolor 是自定义name,把它放到html中,

Vue.directive('mycolor',{
  inserted (el,binding) {
  //这里我使用了binding,所以要在使用到的组件
  //内部,定义一个color,才能显示
    el.style.color = binding.value;
  }
})
// Vue.use(echarts);


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

`
input 内部的标识已经变成红色
效果图
微信图片_20200330110738.png

查看原文

赞 1 收藏 1 评论 0

阿土 发布了文章 · 2020-03-27

WebSocket的使用(一)

WebSocket 是一种网络通信协议

一:以下时前端页面

//   WebSocket 是客户端与服务端的一种通信协议,区别与ajax通信;ajax通信:(使用定时器)是由客户端向服务端发送请求,服务端再做出响应的数据返回。
            //   WebSocket 服务端主动向客户端发送数据,使用场景需要实时数据交互,例如位置的应用、在线教育、智能家居等需要高实时的场景。

`
//前端
// ①连接状态时的事件回调
var onOpen = function(event){

    console.log(event);
    var msg = {
        type: "message12222",
        text: "something",
        id: "number",
        time: Date.now()
    };
    this.abj = event.type;
    `//send可以向后台发送字符串、Blob或ArrayBuffer,固传入对象时,利用JSON对其序列化`
    ws.send(JSON.stringify(msg));
};
`// ②关闭状态时的事件回调`
var onClose = function(event){
};
`  //③ 有后台返回值的事件回调`
var onMessage = function(data){
    `
    在这里,可以获取后台返回给前端的数据,在前端做出对应处理。
    `
    console.log(data);

};
` // ④错误状态时的事件回调`
var onError = function(event){
};
`//接口响应`
var ws = new WebSocket('ws://127.0.0.1:8080/');
`//响应的函数`
ws.onopen = onOpen;
ws.onclose = onClose;
ws.onerror = onError;
ws.onmessage = onMessage;

}
`
二:以下是用node.js搭建的后端页面
`

// //需要ws模块
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port:8080});

wss.on('connection',function(ws) {
    ws.on('message',function(message) {
    `//获取前端返回过来的值`
        console.log(message);
        var obj = JSON.parse(message);
        console.log(obj);
    });
    `//发送给到前面`
    ws.send('hello world');
})
console.log('running');

`
三:页面展示
这个 node app (app自定义的node文件)
微信图片_20200327155015.png

查看原文

赞 0 收藏 0 评论 0

阿土 发布了文章 · 2020-03-14

Vue 父子组件传值——props(二)

父组件向子组件传值

(一)实现父子组件的前提要进行组件的注册,在父组件中imort引入组件子组件,并components注册,在页面中显示子组件的名称child。
下面是父组件内容

  1:a是静态传值,等于写死的数据,父组件传什么值,子组件显示什么值
  2:e是动态传值,bbb是动态传值的内容

<template>

<child a="zhe" :e="bbb"></child>

</template>
<script>

import child from '@components/Child'
export default {
    data(){
        return {
            bbb:{
                name:'123',
                object:null
            }
        }
    },
    components:{
        child
    }
}

</script>
<style>

</style>

下面是子组件内容
props传值

<template>

<div>
    {{a}}<br> {{e}}
</div>

</template>
<script>

export default {
    props:["a","e"],
    data(){
        return{
        }
    }
}

</script>

407d822796eeb31f43fa3909259615f.png
显示内容如上所示
(二)接着上面的

    现在我们提取父子组件props,动态传值的内容
    

下面是父组件,唯一不同的就是,在动态传值的时候,在html中bbb的后面加了一个点.name,页面变化(只取到了bbb.name的123);
在父组件的.name写法,也可以在子组件中.name,但前提是父组件动态传值的bbb,不能和子组件的e同时.name。(---自己敲一遍就知道了)

父组件
<template>

<child a="zhe" :e="bbb.name"></child>

</template>

45944a542d0ed367f3a457efcbb6b00.png

查看原文

赞 0 收藏 0 评论 0

阿土 发布了文章 · 2020-01-05

Vue 父子组件传值——props

`

<!--父组件-->
<template\> 
    <!--父组件中引入子组件-->
    <div\>  
    <!--定义一个名字:listen    传入数据内容:sun   -->
      <Had v-bind:listen="sun"></Had>  
    </div>  
</template>
<script>  
//  引入组件
  import Had from './Had' 
  export default {  
      data(){  
         return {  
            message:'今天是',  
            sun:[  
               {name:'a',center:'left',show:'false'},  
               {name:'b',center:'right',show:'false'},  
               {name:'c',center:'left',show:'false'},  
               {name:'d',center:'right',show:'false'},  
               {name:'e',center:'left',show:'false'},  
               {name:'f',center:'right',show:'false'}  
            ]  
         }  
      },
</script>
<!--子组件-->
<template>  
    <div class="class">  
        <!-- 父组件向子组件传值  -->
        <!-- 从共同定义的listen中取值-->
        <div v-for="item in listen">  
            <li>{{item.name}}</li>  
            <li v-show="item.show">{{item.center}}</li>  
        </div>  
    </div>  
</template>  
<script>  
    export default {  
        props:{         //props传值
            listen:{        //listen名称
                type:Array,     //定义传值的类型 type  还有required       
                required:true  
            }  
        },
    }
查看原文

赞 0 收藏 0 评论 0

阿土 发布了文章 · 2019-09-19

jquery的使用(1)

//---html部分:
<a href="###" id="soilTime">土壤水分<span>(13)</span></a>
 <h3 id="time_data">物联网站点实时数据</h3>
js部分:
//---document.getElementById()   获取ID
//---document.getElementsByClassName() 获取类元素
// ---document.getElementsByTagName()   获取指定标签名
//---document.getElementsByName()           获取指定名称的对象
 [document 对象][1]
 var realTime = document.getElementById('realTime'); //---物联网
    // ---土壤水分事件
$('#soilTime').click(() => {

    // ---使用javascript进行样式修改
    realTime.style.display = "none"; //------物联网

    //---利用html/text 对文档内容进行操作修改
    $('#time_data').html('土壤水分观测站点实时数据');  
})

主要是jQuery的选择器:下面说下最基础的几个

  选择器           格式              举例
1.id选择器     $("#id的属性值")     $("#name");
2.class选择器  $(".class的属性值")  $(".name")
3.标签选择器    $("html标签")       $("p")
4.*选择器      $("*")             $("*")
5.群组选择器    $("选择器1,选择器二,...")  $("p,#name")

查看原文

赞 0 收藏 0 评论 0

阿土 赞了文章 · 2019-09-19

JavaScript高级程序设计——Canvas(十五)

赞 2 收藏 2 评论 0

阿土 关注了用户 · 2019-09-19

MandyShen @mandyshen

关注 9

阿土 回答了问题 · 2019-09-16

echarts y轴刻度朝内的问题

首先是有效果的;
其次,你是设置在yAxis上面的,效果图不是已经正常显示了吗?只是你的X轴还是反着的。

关注 2 回答 1

认证与成就

  • 获得 2 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-06-13
个人主页被 239 人浏览