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: '
'})

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

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

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

<template v-if="loginType === 'username'">
  <label>Usernamelabel>
  <input placeholder="Enter your username">
template>
<template v-else>
  <label>Emaillabel>
  <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: `
                             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….尽量不要动父组件的东西因为很难调试发现错误resthis. p a r e n t … . 尽 量 不 要 动 父 组 件 的 东 西 因 为 很 难 调 试 发 现 错 误 r e s t h i s . 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