watch监听

Vue监听属性有很多种写法,也有几个配置选项

使用配置项

new Vue({
watch:{
content:{
handler(old,newVal){
console.log(old,newVal)
},
deep:true,
immediate:true
}
}
})
  1. deep:是一个布尔类型,告诉Vue以递归的方式监听嵌套对象内部值的变化。
  2. immediate:是一个布尔值类型,会立即触发而调用处理函数,而不用等到属性值第一次发生变化时才调用。

以上两个值默认值都为false,不需要的时候完全可以忽略。使用下面这种方法。

new Vue({
watch:{
content(old,newVal){
console.log(old,newVal)
}
}
})

或者还可以这样写

new Vue({
watch:{
content:"watchContent"
},
methods:{
watchContent(val,oldVal){
console.log(val,oldVal)
}
}
})

在使用immediate的时候,由于是自动触发,这样会导致旧值为undefined,这一点需要格外注意。

component 使用

在做项目中,可能会有一些情况,比如:弹窗里面可能有很多东西,这样的话需要写N个弹窗来支撑业务,否则就需要把所有的组件全部写在一个弹窗里面,但是这样会造成代码的混乱。

解决方案:

abc.vue

<template>
<div>
我是 abc
</div>
</template>

app.vue

<template>
<alert v-if="componentName">
<component :is=" 'q-'+componentName "/>
</alert>
</template> <script>
export default {
data(){
return {
componentName:null
}
}
}
</script>

组件内model属性

Vue 2.2.0推出model属性用来让使用者在组件中自定义触发v-model的触发时机,在没有推出该api之前默认使用input事件触发v-model更新。

官网解释:

允许一个自定义组件在使用v-model时定制propevent。默认情况下,一个组件上的v-model会把value用作prop且把input用作event,但是一些输入类型比如单选框和复选框按钮可能想使用value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

实例:

children:

export default {
/**
* 自定义v-model
*/
model: {
// v-model默认绑定的值
prop: "modelList",
// 当组件使用v-model的使用使用change事件触发,原来没有更改的使用使用input事件触发
event: "change"
},
props:{
modelList:{
type:Array,
default:() => []
}
},
methods:{
changeModel(){
let newList = [1,2,3];
this.$emit("change", changeModel);
}
}
}

parent

<template>
<children v-model="newList"/>
</template>
export default {
data(){
return {
newList:[]
}
},
watch:{
newList:{
handler(old,newVal){
console.log(old,newVal)
},
deep:true
}
}
}

大致使用就是这样,当Children组件遇到this.$emit("change")事件时候,会把接收到的参数,通过v-model实现数据绑定。

全局方法以及插件编写

在vue中拓展自己的插件供项目使用。

myGlobalMethod .js

export default {
install(Vue, options) {
Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如: vue-custom-element
// 逻辑...
} Vue.directive('my-directive', { // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
}) Vue.mixin({
created () { // 3. 通过全局 mixin方法添加一些组件选项,如: vuex
// 逻辑...
}
...
}) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现
// 逻辑...
}
}
}

main.js

import Vue from "vue";
import myGlobalMethod from "./plugin/myGlobalMethod.js";
Vue.use(myGlobalMethod);
this.$myMethod();

函数式组件

函数式组件是无状态的,而且不能使用this,因此render函数获得了一个新的context上下文参数,包含prop,事件监听,字内容,插槽以及一些其他数据。

export default {
functional:true,
render(h,{props,children}){
return h(`h${props.livel}`,children)
}
}

可以使用模板的functional替换掉functional:true

<template functional>
<div>{{props.message}}</div>
</template>

Vue 使用技巧手记的更多相关文章

  1. vue的技巧代码

    转载:https://segmentfault.com/a/1190000014085613 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList ...

  2. vue小技巧之偷懒的文件路径——减少不必要的代码

    众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件, 必须得 import  '../../../s ...

  3. vue 使用技巧总结 18.11

    前言: 在大概学完 vue 整体框架后,有幸接触到花裤衩大神写的 vue-elementUI-admin 模板框架,把这个模板框架当作 demo,跟着 code 一遍,最大的收获是在以逻辑简单的模板熟 ...

  4. Vue 开发技巧或者说Vue知识点梳理(转,自个学习)

    Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $child ...

  5. Vue 开发技巧总结

    ​博客地址:https://ainyi.com/95 本人玩了 Vue 两年多,在此总结一下开发时的一些技巧和方法 自定义组件 v-model v-model 是 Vue 提供的一个语法糖,它本质上是 ...

  6. vue使用技巧(分页、nextTick、复制对象)

    分页技巧 v1.0+ 版本的时候使用过滤器 limitBy 实现 v2.0+ 版本的时候使用compute使用 slice 方法实现 data:{ pageNum:10 }, computed:{ n ...

  7. Vue小技巧-懒加载

    Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...

  8. 教你一个vue小技巧,一般人我不说的

    本文由云+社区发表 1. 需求 最近的项目中,需要实现在vue框架中动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项,可以将 ...

  9. vue 使用技巧总结 19.01

    组件中箭头函数的使用 不要使用箭头来定义任意生命周期钩子函数: 不要使用箭头来定义一个 methods 函数: 不要使用箭头来定义 computed 里的函数: 不要使用箭头定义 watch 里的函数 ...

随机推荐

  1. maven工程中MENIFEST.MF中属性作用

    Manifest-Version: 版本号 Bundle-ManifestVersion: bundle的版本号 Bundle-Name: bundle的名称,主要是对bundle的作用的说明 Bun ...

  2. crontab定时任务接入

    # 查看 $ crontab -l # 创建 $ crontab -e # 每分钟输出一次当前时间 * * * * * echo `date` >> /demo.log # 查看定时 $ ...

  3. Zookeeper运维常用四字命令

    Zookeeper运维常用四字命令 echo stat|nc 127.0.0.1 2181 查看哪个节点被选择作为follower或者leader 使用echo ruok|nc 127.0.0.1 2 ...

  4. easyui 如何为datagrid添加自定义列属性(如:width,align,editor)

    我在实际业务需要为datagrid添加一个自定义属性 原先的datagrid列属性包括:title.width.align.formattter.editor等 我们可以通过datagrid的一个方法 ...

  5. Jenkins参数化构建--Git Parameter

    由于我们在测试过程中,可能需要在多个测试环境跑用例,这个时候就需要jenkins参数化了. Jenkins参数化一般常用的有两种方式:Choice和String Parameter两种 (1)Choi ...

  6. Solidity truffle,部署合约到Ropsten测试链或主链,调用合约(转)

    Solidity truffle,部署合约到Ropsten测试链或主链,调用合约 转 https://blog.csdn.net/houyanhua1/article/details/89010896 ...

  7. Win10 LTSC 2019 安装和卸载 linux 子系统

    一.开启 二.下载 https://docs.microsoft.com/zh-cn/windows/wsl/install-manual   手动下载适用于 Linux 的 Windows 子系统发 ...

  8. Python3.7安装(解决ssl问题)

    摘自:https://blog.csdn.net/love_cjiajia/article/details/82254371 python3.7安装(解决ssl的问题) 1) 安装准备 yum -y ...

  9. soapUI使用-调用post方法

    前言 soapUI的安装请查看此链接:https://www.cnblogs.com/linxiu-0925/p/10138771.html 使用步骤 1打开soapUI 2新建一个项目:New SO ...

  10. 【Python学习之八】设计模式和异常

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 python3.6 一.设计模式1.单例模式确保某一个类只有一个实例, ...