发表更新web前端 / Vue3 分钟读完 (大约384个字)

Vue里面相同页面不同URL的刷新解决方案

随着项目的收尾，使用Vue也有大概两个月时间了，在这期间也才遇到过了不少的问题，今天就来说下 Vue 中URL不同但是页面相同的解决办法。

现象

假设有两个URL，都对应的是一个相同的 Vue 页面，URL分别是 view/account/1 和 edit/account/1，此时如果由 view/account/1 跳转至 edit/account/1，你会发现页面是不会刷新的， 从而直接影响了整体的功能。

于是去网上寻找解决方案，在一个 github 的 issue 里面，看到也有人反映过这个问题，不过作者的回复是采用

reload 方式进行强制刷新，也就是类似于 F5 那样，页面首先会白一下，然后就再出现元素。这样虽然可以实现页面上元素的一些加载，但是同时它的弊端也体现出来了，就是对用户极度的不友好，所以最后我们才用了一种Reload的方式来进行刷新的。

阅读更多
发表更新web前端 / Vue2 分钟读完 (大约346个字)

vue里面冒号和非冒号区别

vue里面冒号和非冒号的却别

今天在使用Vue的时候，突然发现了一个问题，就是在后端传过来的值因为是一个boolean类型的，但是前端又需要进行展示，由于我们使用的是ElementUI的话，于是参照官网上就是这样写的：

1
2
3
4
<el-select v-model="option_boolean">
        <el-option label="1" value="true"></el-option>
        <el-option label="2" value="false"></el-option>
</el-select>

但是此时页面上展示并非是 1 和 2 ，而是 true 和 false。如下：

阅读更多
发表更新web前端 / Vue6 分钟读完 (大约836个字)

ElementUI使用rules遇到的一些问题

这些天一直在踩Vue的坑…今天遇到的一个问题是在一个父组件中，将某些数据通过props传递给子组件，同时在子组件里面也有相应的一些rules规则，但是在实际的开发中，却发现子组件的rules并未生效…反而一直提示对应的 message，后来才发现是跟 ElementUI 的prop有关。

首先看一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<template>
<div>
  <p>该Demo是为了测试Vue中rule和prop的不同</p>
  <el-form :model="vehicles">
    <el-form-item label="公共汽车车轮个数" prop="bus.wheel" :rules="{required: true,message: '请输入公共汽车车轮个数'}">
      <el-input v-model="vehicles.bus.wheel" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="公共汽车司机驾照" prop="bus.driver.license" :rules="{validator: licenseCheck ,trigger:'blur'}">
      <el-input v-model="vehicles.bus.driver.license" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="公共汽车车轮个数" prop="bus.driver.years">
      <el-input v-model="vehicles.bus.driver.years" placeholder="请输入"></el-input>
    </el-form-item>
     <car :car="vehicles.car"></car>
  </el-form>
</div>
</template>
<script>
import Car from './Car';

export default {
  components: {
    Car
  },
  data () {
    return {
      vehicles: {
        bus: {
          wheel: null,
          driver: {
            license: null,
            years: null
          }
        },
        car: {
          wheel: null,
          driver: {
            license: null,
            years: null
          }
        },
        train: {
          wheel: null,
          driver: {
            license: null,
            years: null
          }
        }
      },
      person: {
        child: {
          year: null
        }
      }
    };
  },
  methods: {
    licenseCheck (rule, value, callback) {
      let m = this.car;
      console.log(m);
      debugger;
      if (value != null) {
        if (value != 'A') {
          callback(new Error('必须A照'));
        } else {
          callback();
        }
      }
    },
    init () {
      console.log(this.car);
    }
  }
};
</script>
<style>

</style>

此时在这个组件中，一切都是正常的，但是一个完整的项目里面，是不可能将所有的元素都堆积在一个页面中，那样的话以后的维护就会非常的麻烦。所以此时就需要一个子组件，然后将父组件中一些数据传递至子组件。
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
  <div>
      <p>小汽车子组件</p>
    <el-form-item label="小汽车车轮个数" prop="wheel" :rules="{required: true,message: '请输入公共汽车车轮个数'}">
      <el-input v-model="car.wheel" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="小汽车司机驾照" prop="driver.license" :rules="{validator: licenseCheck ,trigger:'blur'}">
      <el-input v-model="car.driver.license" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="小汽车车轮个数" prop="driver.years">
      <el-input v-model="car.driver.years" placeholder="请输入"></el-input>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    car: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  methods: {
    licenseCheck (rule, value, callback) {
      let m = this.car;
      console.log(m);
      debugger;
      if (value != null) {
        if (value <= 'D') {
          callback(new Error('必须C照以上'));
        } else {
          callback();
        }
      }
    },
    init () {
      console.log(this.car);
    }
  },
  mounted () {
    this.init();
  }
};
</script>
<style>

</style>

阅读更多
发表更新web前端 / Vue5 分钟读完 (大约765个字)

在Vue中使用filters来进行字典值的转换

在Vue里面，经常会遇到一些字典值的转换，而这些字典值由于和后端进行了约定的，一般不会轻易的改变，所以在前后端开发的项目中，这种字典值最好的做法是前端独立的保存一份，自己在前端自行进行处理。

我们的做法是使用Vuex的store配合filters来进行前端的字典值转化，首先是在store里面将字典值进行固定，然后通过filters在页面中进行一个转换。

使用Store

在Vue里面使用store首先需要安装vuex，安装完毕之后就可以直接在main.js里面直接引用了，但是为了统一管理还是决定新建一个store文件夹，然后将store相关的文件全部统一存放，新建完毕之后项目结构如下：

1
2
3
4
---App.vue
---main.js
---store
-----index.js
阅读更多
发表更新web前端 / Vue2 分钟读完 (大约366个字)

Vue中nextTick的使用

这段时间一直在负责一个前后端项目，前端是Vue+ElemeUI，由于自己之前只是会简单的使用 Vue 的一些初级命令，自然只能慢慢的踩坑，然后再出坑….。例如数组无法触发Vue的视图更新

刚开始在使用 Vue 的时候，一直都是在 created 方法里面获取后端数据进行渲染，这样用起来倒也没什么问题，只不过今天突然看到了 Vue 的nextTick 方法，感觉比之前在created里面请求后端更加高级。所以顺便研究了一波。

使用场景

nextTick常用于数据更新后，但是dom元素还未完成刷新，如何理解呢? 在 Vue 里面，更新 DOM 元素是异步的，也就是说当我们修改了数据之后，DOM元素并不会立即被刷新。参考深入响应式原理

如下Demo

阅读更多
发表更新web前端 / Vue1 分钟读完 (大约185个字)

Vue中使用router遇到无法跳转的问题

今天在配置Vue的路由的时候，在router的index.js中配置了如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/components/home/Home'
import Tree from '@/pages/components/tree/Tree'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/tree',
      name: 'Tree',
      component: Tree
    }
  ]
})

但是却在启动项目的时候，输入URL:localhost:8080/tree无法实现跳转，后来发现是在App.vue中没有设置<router-view>,最后加上去即可。

例如在App.vue中配置了一个<router-view>，输入URL:localhost:8080/tree就会跳转到了Tree.vue。
那假设在Tree.vue中再配置配置一个<router-view>，这时候就会匹配的是localhost:8080/tree/XXX,当然也可以直接用<router-link>跳转到指定的组件中

发表更新web前端 / css4 分钟读完 (大约611个字)

css中定位的学习

首先页面代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id='div1'>
    <div id='div2'>
        <div id='div3'>
            <div id='div4'>

            </div>

        </div>

    </div>
    <div id='div22'>
    </div>
</div>

<style>
#div1{
    width: 700px;
    height: 700px;
    background: red;
    margin-top: 50px;
    margin-left: 50px;
}
</style>

relative和absolute

relative单独使用，代码如下

1
2
3
4
5
6
7
8
9
10
11
#div2{
        width: 500px;
        height: 500px;
        background: rgb(17, 0, 255);
        position: relative;
        top: 20px;
        left: 20px;
        right: 0;
        bottom: 20px;
    }
}
阅读更多
发表更新web前端 / Vue1 分钟读完 (大约115个字)

Vue引入styles的一个小坑

在使用styus的时候，经常会定义一些css的常用变量，但是在引入styl文件一直使用的是@import '~styles/mixins'，然后就是一直在报错，
后来经过了解发现，这种写法需要在build中的webpack.conf.js中设置style的别名，

1
2
3
4
5
6
7
8
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles')
    }
  },

然后将styles指向放styl的文件夹即可。

发表更新web前端 / Angular2 分钟读完 (大约261个字)

angular中使用Service

今天使用 Angular 的时候，看到书中封装了自己得一个 LoggerService ，然后自己也想尝试下，顺便也写下这个记录。

新建一个Service得ts文件

在 app 目录下建立一个 ts 文件，如下：

1
2
3
4
5
6
7
8
9
10
11
export class LoggerService{
    info(msg : any) {
        console.log(msg);
    }
    warn(msg: any){
        console.warn(msg);
    }
    error(msg: any){
        console.error(msg);
    }
}

这个类就是封装了一层日志打印得函数，当然在这里也可以封装一些其他得函数。

阅读更多
发表更新web前端 / Angular2 分钟读完 (大约339个字)

在Angular中使用Bootstrap

在去年的时候短暂的接触了大概一个星期的 Angular 之后就再也没碰过了，今天突然想重新捡起 Angular 的相关知识，并且想将 Angular 结合 Bootstrap 一起使用。所以正好记录下一起结合使用的步骤。

初始化一个 Angular 的项目。初始化之后打开命令行，输入：

1
2
npm install jquery --save-dev
npm install bootstrap --save-dev

输入以上两条命令之后，在 package.json 中可以看到已经多出了 jquery 和 bootstrap 这两个库了。如下：

当初始化完成之后会在 node_modules 中出现 bootstrap 和 jquery 这两个文件夹。

阅读更多
关注我

分类

归档

订阅更新

follow.it

最新文章

标签

Angular2
ElasticSearch2
JVM3
Java41
Json1
Jwt1
Leetcode2
Linux1
Mongo1
MyBatis2
MySql13
Mysql2
Netty1
Rabbitmq3
Redis6
SSO1
Servlet1
Shiro2
Spring10
SpringBoot9
SpringCloud6
Springboot4
Vue6
css3
dubbo1
java基础1
jquery1
leetcode6
maven4
mongo1
mybatis6
mysql1
nginx3
pandas3
plotly1
python1
rabbitmq1
shiro1
spring5
web前端7
web后端19
个人记录1
动态规划1
周记1
多线程1
字符串2
工具1
并发4
思考1
数据库2
数据结构2
算法8
系统设计1
计算机基础1
计算机网络3
设计模式3
问题排查1
×