Vue项目搭建报错

发表于 2018-09-11 | 阅读次数:

现在遇到的坑都是以后的财富

“Unexpected end of JSON input while parsing near···”错误解决方案

背景：之前在本机搭建过一次项目，然后删掉了，可能是之前安装的缓存还在对后续有影响

解决方案：

先清除缓存，再重新安装：

npm cache clean --force

安装：

npm install

即可解决问题。

从零搭建一个vue项目

发表于 2018-09-11 | 阅读次数:

从零使用vue+webpack搭建一个vue项目

首先就是安装nodejs和npm，(一般建议不要装版本过于新的版本，这里建议装8.11.4 LTS)

下载地址：https://nodejs.org/en/

Win+R输入cmd查看版本：

node -v

如果出现以下显示就成功啦

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功

阅读全文 »

window.resize方法监听窗口大小

发表于 2018-09-07 | 阅读次数:

在实现了页面基本功能后，想去优化一下页面的适配问题，就让我的Echart表跟着用户变化浏览器大小或者分辨率大小而改变，具体实现上代码：

<template>
<div class="searchCon" ref="tableDataRef"> 
    <div class="chart">
        <line-chart
          :title="accessLineData.title" 
          :catalog="accessLineData.catalog" 
          :data="accessLineData.data" 
          :y-name="yName" 
          :a-colori="accessLineData.aColor1" 
          :a-colorii="accessLineData.aColor2"
          :rendering="rendering"></line-chart>
    </div>
    <div class="chart">
        <line-chart
          :title="accessLineData1.title" 
          :catalog="accessLineData1.catalog" 
          :data="accessLineData1.data" 
          :y-name="yName" 
          :a-colori="accessLineData1.aColor1" 
          :a-colorii="accessLineData1.aColor2"
          :rendering="rendering"></line-chart>
    </div>
</div>
</template>

<script>
import LineChart from '@/components/LineChart.vue'

export default {
// ...
name: '',
components: {
    LineChart
},
data() {
    return {
        accessLineData: {
        title: 'CPU使用率',
        catalog: [],
        data: [],
        aColor1: '#ffffff',
        aColor2: '#ffffff'    
        },
        accessLineData1: {
        title: '内存使用率',
        catalog: [],
        data: [],
        aColor1: '#ffffff',
        aColor2: '#ffffff' 
        }
    }
},
mounted() {
  this.$nextTick(() => {   
        this.handleFn()
  })
   window.addEventListener('resize', this.handleFn)
},
methods: {
  handleFn() {
    // this.height = this.$refs.tableDataRef.clientHeight - 130
    this.rendering = !this.rendering
    let _this = this
    if (_this.$refs.chartCon.clientWidth >= 1120) {
        _this.chartData.accessLineData.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData1.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
    } else {
        _this.chartData.accessLineData.width = '759px'
        _this.chartData.accessLineData1.width = '759px'          
    }
    if (_this.$refs.chartCon.clientHeight >= 500) {
        _this.chartData.accessLineData.height = '450px'
        _this.chartData.accessLineData1.height = '450px'          
    }
}
}
}
</script>

阅读全文 »

实现未知宽高元素垂直居中

发表于 2018-09-05 | 阅读次数:

实现未知宽高元素垂直居中的几种方法

方法1

思路：设置父级元素为table显示，子元素为table-cell,利用vertical-align：middle,实现水平居中。
优点：父级元素可以动态改变高度

实现效果：

阅读全文 »

WebSocket通信

发表于 2018-09-04 | 阅读次数:

vue控制输入框由可用变为禁用
利用Element-UI的disabled属性，绑定一个值动态传值即可

前端实现websocket连接：

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Java后端WebSocket的Tomcat实现</title>
</head>
<body>
    <input id="text" type="text"/>
    <button onclick="send()">发送消息</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/websocket");
    }
    else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

Vue父子通讯

发表于 2018-09-04 | 阅读次数:

Vue的父子通讯

在vue中，其中一个重要的通信就是父子通讯，父子之间的设置又随着情况而不同。其中最常见的就是父组件为控制组件，子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。

父组件到子组件通讯

父组件到子组件的通讯主要为：子组件接受使用父组件的数据，数据包括属性和方法（String,Number,Boolean,Object,Array,Function）.通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数。

通过props传递数据

props传递数据即父组件调用子组件并传入数据，子组件接受到父组建传递的数据进行验证使用。
如下图：我在主页面调用显示新建规则对话框组件,需要在Script部分import进来该组件，并且注册component，然后在调用显示的模块里监听该父组件的值

<template>
  <div>
  <h2>主页面</h2>
    <add-rules-dialog
      v-if="addRulesOnoff" 
      :dialog-form-visible="addRulesOnoff"
    >
        </add-rules-dialog>
  </div>
</template>
<script>
import AddRulesDialog from ...//此处填写您的组件路径
...
export default {
  components: {
  AddRulesDialog
}，
  data() {
    return{ 
      addRulesOnOff
        }，
  method: {	
  addRules() {
        this.title = '创建报警规则'
        this.addRulesOnoff = true   
        this.isClickOnModal = false
        this.rowEditOnoff = false
        this.rowOnoff = false
        this.isRead = false
        this.isReadonly = false
      }
</script>

在子组件中定义props数据,如下：

props: {
  rules: {
    type: Object,
    default: () => {},
  },
},

通过$on 传递父组件方法

$on传递父组件方法与props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表示出调用关系。

子组件到父组件通讯

通过$emit传递父组件数据
与父组件到子组件通讯中的$on配套使用，可以向父组件中触发的方法传递参数供父组件使用。

通过refs获取
可以通过在子组件添加ref属性，然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和this.$parent一样并不属于数据的传递而是一种主动的查找。
尽量避免使用这种方式。因为在父子组件通信的过程中。父组件是处于高位是拥有控制权，而子组件在多数情况下应该为纯视图组件，只负责视图的展示和自身视图的逻辑操作。对外交互的权利应该由父组件来控制。所以应当由父组件传递视图数据给子组件，子组件负责展示。而子组件的对外交互通过$emit触发父组件中相应的方法，再由父组件处理相应逻辑。

<template>
  <div>
    <h2>父组件</h2>
    <br>
    <Child-one ref="child"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    mounted(){
      console.log(this.$refs['child']);
    },
  };
</script>
<style scoped>
</style>

this.$refs['child']

Vue生命周期

发表于 2018-08-28 | 阅读次数:

Vue 生命周期

在学习Vue之前，先看了官网的文档发现它的生命周期非常难懂，就先放着，然后在实际操作中渐渐加深了对它的理解
主要周期

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

就是差不多你需要用到哪个阶段的数据时，需要在该阶段及以后定义，在其之前定义的话是undefined的
以下附上一篇文章链接，写的非常清楚易懂。感谢作者的分享:https://segmentfault.com/a/1190000011381906

blog15

发表于 2018-08-27 | 阅读次数:

vuejs+Element-UI实现表单添加启用字段

在这篇文章中，我们的需求是需要随时可以启用或者禁用该条报警规则，所以需要在表单中添加一个是否启用字段，并且需要实时在前端页面显示该条规则是什么状态。当需要为禁用时不可以修改规则可以添加一句判断(这里后台返回的字段，’01’代表启用，’02’代表禁用)

:disabled=”scope.row.rulestatus !== ‘01’”

如下图所示：
在这里要特别注意，v-for只能用一次template在表单里也是一样

blog14

发表于 2018-08-27 | 阅读次数:

vuejs 实现按钮点击后切换颜色

在网页交互过程中，我们总需要有一些页面变化来与提醒用户他已经触发了什么东西，但不能总依赖于后台返回给我们的数据再进行变化，所以我们前端可以直接改变页面的样式，来提醒用户即可。

以下是使用vue实现的，点击按钮后相应按钮变黄色，并且默认选中第一个按钮.若不想有默认选中的按钮，只需要将changgeColor的值设置为-1即可。

代码：

<template>
<el-button
    v-for="(item, index) in timeBtnArr" 
    :key="item.name"
    @click="handleTimeBtnClick(item, index)" 
    :class="{isClick:changeTimeColor === index}"
    size="mini"       
    class="btn">
    {{ item.name }}       
</el-button>
</template>

<script>
export default {
     data() {
        return{ 
             changeColor: 0
            }
    methods: {
        handleTimeBtnClick(item, index) {
        this.changeColor = index
            }
</script>

<style>
.isClick {
    background-color: yellow;
}
</style>

vue 报错

发表于 2018-07-25 | 阅读次数:

当你的才华还撑不起你的野心时，那就好好学习

最近在做一个用vue写的项目，在检查的时候报错Duplicate keys detected: ‘一个url’. This may cause an update error

这个问题好像不会影响项目的功能使用，但是有错误就要去解决。

由于在我的项目里用循环表，v-for的时候就会绑定一个key值，但是报错的原因是因为我们这里的key值有重复，

<div v-if="item.prop === 'urls'">
    <p v-for="value in scope.row.urls" :key="value">{{value}}</p>
</div>

由于key值是必须唯一的，如果重复就会报错
可以把key值改为index，就可以避免这个情况,修改方法如下所示：

<div v-if="item.prop === 'urls'">
    <p v-for="(value, index) in scope.row.urls" :key="index">{{value}}</p>
</div>

从零使用vue+webpack搭建一个vue项目

首先就是安装nodejs和npm，(一般建议不要装版本过于新的版本，这里建议装8.11.4 LTS)

实现未知宽高元素垂直居中的几种方法

Vue的父子通讯

父组件到子组件通讯

子组件到父组件通讯

Vue 生命周期

vuejs+Element-UI实现表单添加启用字段

vuejs 实现按钮点击后切换颜色

由于key值是必须唯一的，如果重复就会报错可以把key值改为index，就可以避免这个情况,修改方法如下所示：

由于key值是必须唯一的，如果重复就会报错
可以把key值改为index，就可以避免这个情况,修改方法如下所示：