vue使用总结

前段时间写了一个新的项目,开发建议说用VUE来写,以前只是听说过,却没有真正实践,项目中遇到了几个菜鸟问题,现记录如下:

Vue父组件向子组件传值

起因: 父组件调用统一消息提示框,要求提示文字不同

  1. 先定义一个子组件,在组件中注册props

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <template>
    <div>
    <div>{{ message }}子组件</div>
    </div>
    </template>
    <script>
    export default {
    props: {
    message: String // 定义传值的类型
    }
    }
    </script>
  2. 在父组件中引用子组件,并传入子组件中需要的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <template>
    <div>
    父组件
    <child :message="parentMsg" />
    </div>
    </template>
    <script>
    import child from './child' //引入child组件
    export default {
    data () {
    return {
    parentMsg: 'a message from parent'
    }
    },
    components: {
    child
    }
    }
    </script>

Vue定时执行函数

起因: 消息提示框显示3秒后自动消失

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
data () {
return {
showMessage: ''
}
},
mounted () {
this.$nextTick(() => {
setInterval(() => {
this.showMessage = false
}, 3000)
})
}
}

注:

  1. mounted: 编译好的HTML挂载到页面完成后执行的事件钩子。此钩子函数中一般会做一些ajax请求获取数据,进行数据初始化。mounted在整个实例中只执行一次。
  2. $nextTick>是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick>,则可以在回调后获取更新后的DOM。

    watch监听输入框变化

    起因: 需要对一输入框做正则验证,并在输入的时候判断是否符合条件
    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
    <template>
    <div>
    <input type="text" placeholder="请填写名称" v-model="name" />
    <p>{{ messageName }}</p>
    </div>
    </template>
    <script>
    export default {
    data () {
    return {
    name: '',
    messageName: ''
    }
    },
    watch: { //watch() 监听某个值(双向绑定)的变化,从而达到change事件监听的效果
    name: {
    handler: function () {
    if(!/^[a-zA-Z0-9]{3,13}$/.test(this.name)) {
    this.messageNmae = '英文、数字或两种组合,3-12个字符'
    } else {
    this.messageName = ''
    }
    },
    deep: true
    }
    }
    }
    </script>

Vue子组件调用父组件的方法

起因: 子组件需要用到父组件ajax请求的get()方法;或者开启父组件中另一个子组件(弹窗)
this.$parent.get()或者this.$parent.showModal = true

Vue获取Input的值

  1. input默认为空。
    使用v-model = “inputValue”,通过this.inputValue即可获取到对应的值。
  2. input有默认值(设置了value的input)
    这种情况不用使用v-model,否则data中的初始化值会把value的值覆盖掉。
    这里可以使用ref
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <input type="text" v-model="inputValue" />
    <a @click="get"></a>
    <script>
    export default {
    data () {
    return {
    inputValue: ''
    }
    },
    method: {
    get () {
    alert(this.$refs.inputValue.value);
    }
    }
    }
    </script>

左标题,右描述实现方法

通用HTML结构与CSS样式:

1
2
3
4
<div class="wrapper">
<h4>左标题</h4>
<p>右描述</p>
</div>
1
2
3
4
5
6
7
8
.wraper { border: 1px solid orange; margin-bottom: 10px; line-height: 30px;}
.fl { float: left;}
.fr { float: right;}
.clearfix:before,.clearfix:after { content: ""; disply: table;}
.clearfix:after { clear: both;}
.tr { text-align: right;}
.prel { position: relative;}
.pabs { position: absolute;}

方法一: 左右浮动

1
2
3
4
<div class="wrapper clearfix">
<h4 class="fl">左标题</h4>
<p class="fr">右描述</p>
</div>

方法二: 左浮动,右描述居右

1
2
3
4
<div class="wrapper clearfix">
<h4 class="fl">左标题</h4>
<p class="tr">右描述</p>
</div>

方法三: 右描述在前,右浮动

1
2
3
4
<div class="wrapper clearfix">
<p class="fr">右描述</p>
<h4>左标题</h4>
</div>

方法四: 左绝对定位,右描述居右

1
2
3
4
<div class="wrapper prel">
<h4 class="pabs">左标题</h4>
<p class="tr">右描述</p>
</div>

方法五: 左绝对定位,右描述右浮动

1
2
3
4
<div class="wrapper clearfix prel">
<h4 class="pabs">左标题</h4>
<p class="fr">右描述</p>
</div>

方法六: 右绝对定位

1
2
3
4
<div class="wrapper prel">
<h4>左标题</h4>
<p class="pabs" style="right: 0;bottom: 0;">右描述</p>
</div>

方法七: 右描述居右,给margin-top为 负的父元素的height

1
2
3
4
<div class="wrapper">
<h4>左标题</h4>
<p class="tr" style="margin-top: -30px;">右描述</p>
</div>

css小技巧记录(一)

1、 图片与文字对齐问题

图片与文字默认是居底对齐,所以当图片与文字在一起的时候往往都不对齐。

解决办法1:

1
img { vertical-align: text-bottom;}

解决办法2:

1
img { margin-bottom: -3px;}

css随机颜色的发现

早上收到开发提的一个需求,希望随机产生的背景颜色不要太浅(因为字体是白色的)恩,之前没有遇到过这种问题,遂上网百度了一下,也没有找到想要的答案;问了UI,她们也不知道,给我提了一个迂回的办法,说给字体黑色阴影,试了一下 ,恩,好丑┑( ̄Д  ̄)┍
没办法,自己研究了一下PS的拾色器,没想到,这么简单╮(╯▽╰)╭