vue混乱的笔记（一）

v-bind:title=”” 动态绑定鼠标上移的提示
Object.freeze()
需要双向绑定的数据最开始就应该加入到data中因为内部会执行Object.freeze()
{{}}渲染成文本 v-html渲染成html 还有转码功能不要用用户提交的内容插值
计算属性是根据依赖进行缓存的依赖改变重新计算并缓存依赖不变直接返回缓存类似Date.now()依赖会每次计算计算属性默认是get 也可指向一个对象该对象内部有get 和 set两个函数在set一个属性时也可以联动的操作其它属性
尽量用computed代替watch 但是执行异步或者开销大的操作往往需要自定义watch侦听器比如异步访问API
:class=”{active: isActive}” class=”static” 两者可以并存
类名是变量用数组传 :class=”[activeClass, errorClass]”
data(){return {activeClass: ‘active’, ……}}
类名也可用三元表达式

Vue.component('component', {template: '<div></div>'})

v-bind:style=”{ color: dataColor, fontSize = dataSize + ‘px’ }” 也可直接传一个对象
数组模式可以将多个样式对象用在一个元素上
v-bind:style=”[baseStyle, overrideStyle]”

Vue.js自动加引擎前缀比如transform
多个值兼容：

<div :style="{ display: 
['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

转换template后在Input输入的值还会存在可以在input 标签加key值不同解决
v-show 不管初始条件元素总是被渲染并且知识简单的基于css进行切换更高的初始渲染开销适用于频繁切换的情况
v-if 有更高的切换开销控制销毁和重建
v-for具有比v-if更高的优先级
v-for=”(value, index) of objects” item in objects
(value, key, index) in object
v-for 初始渲染后数据的顺序发生变化不会再重新渲染更新dom 而只更新数据可以通过绑定key值来实现dom渲染重排尽量在v-for时绑定key

数组的响应式更新

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)  
 // 用vue全局方法设置响应式数组项
vm.$set(vm.items, indexOfItem, newValue)  
 // 用vue实例设置响应式
Vue.set(vm.userProfile, 'age', 27)        
// 某对象属性添加新属性

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)  
 // 调数组的响应式方法触发响应式用Object.assgn()添加响应式属性  
vm.userProfile = Object.assign({}, 
vm.userProfile, {
                         age: 27,
                         favoriteColor: 'Vue Green'
                    })

计算属性中filter

computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0      // 为true即筛选成功
    })
  }
}

v-for v-if v-for渲染完后 v-if判断是否显示
2.2.0+ v-for 必须加 key
事件处理 v-on:click=”fun(msg, $event)”
事件修饰符 .stop .prevent
.capture 捕获模式即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
.once 事件触发一次
.passive 告知浏览器不阻止事件的默认行为有利于提高移动端性能
修饰符的顺序很重要 prevent不要放前面
鼠标按钮修饰符 .left .middle .right
按键修饰符 v-on:keyup.13 = “fun” 13是keycode
.enter .tab .delete .esc .space .up .down .left .right
自定义别名Vue.config.keyCodes.f1 = 112
2.5中 $event.key === ‘PageDown’ 调用 .page-down
系统修饰键 .ctrl .shift .alt .meta

Vue.component('base-checkbox', {
            model: {
                prop: 'checked',
                event: 'change'
            },
            props: {
                checked: Boolean
            },
            template: `
                             <input 
                             type="checkbox"
                             v-bind:checked="checked"
                             v-on:change="$emit('change', $event.target.checked)"
                              >
            `
        })

自定义事件
作用域插槽
slot-scope=”slotProps” 在使用的地方用该方法，可以用从内部作用域传过来的值，被引用组件内部的slot用v-bind绑定数据，可在外部通过 slotProps. 来访问
外部插槽可以是template，高版本中其它标签页都可以
也可用结构取值slot-scope=”{{ item }}”

keep-alive 避免重复渲染导致的性能问题缓存组件

异步组件
访问根实例通过根实例存储全局数据 this.root.variable=…. 尽量用vuex
访问父组件实例 this. $parent…. 尽量不要动父组件的东西因为很难调试发现错误 res this.$ refs….

依赖注入多个嵌套子组件想要获取父组件的一个属性，直接用$parent也可能难以实现，用依赖注入。父组件内部用provide:function{
return {getMap: this.map}
}
然后在任何后代组件中用inject: [‘getMap’]
父组件不知道属性提供到了哪里子组件也不知道属性从哪里来的

程序化的事件侦听器

组件的循环引用
递归组件之前要加判断条件指令否则会栈溢出
循环引用如果两个组件都是通过Vue.component注册的，则不会出现问题但是如果是通过工具从外部引入就会出现错误循环依赖解决方法是先引入一个组件在该组件的beforeCreate钩子中导入另一个组件 require import
components: {
TreeFolderContents: () => import(‘./tree-folder-contents.vue’)
}

内联模板加inline-template 是将其内部作为模板
在Vue.component的template中最外层加上v-once指令可将组件只计算一次就保存起来
过渡动画： transition 设置name

自定义过渡类名
enter-class=”自定义类名” 这种方式可用animation.css库
过渡持续时间设置 :duration=”{enter:500, leave:800}”
动画的js钩子
methods: {
// 进入中
beforeEnter: function (el) {},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {done() },
afterEnter: function (el) {},
enterCancelled: function (el) {},
// 离开时
beforeLeave: function (el) {},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) { done()},
afterLeave: function (el) { },
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {}
}
enter / leave 中必须用done进行回调否则被同步调用过渡会立即完成
v-bind:css=”false” 不检测css 过渡效果
初始渲染的过渡： appear设置同样的css和js
过渡模式 mode=”out-in”
transition-group组件会以一个真实的元素呈现默认为一个span 设置tag 可以修改
样式用于内部的每一个节点上

混入
var mixin = {}
mixins: [mixin] 混入对象的钩子在组件钩子之前调用 data数据冲突以组件为主
全局混入
Vue.mixin({}) 每个单独创建的vue实例都会有这些属性或者事件

指令局部指令
directives: {
focus: {
// 指令的定义
inserted: function(el) {
el.focus();
}
}
}
全局指令

Vue.directive('focus', {
    inserted: function(el) {
        el.focus();
    }
})

钩子函数
bind 第一次初始化设置
inserted 被绑定元素插入父节点时调用
update 所在组件更新时
componentUpdated 组件所在v-node全部更新后
unbind 指令与元素解绑时调用
指令传入的值是创建指令时函数的第二个参数 binding.value.variable

vue混乱的笔记（一）

猜你喜欢