Vue常用知识点-CFANZ编程社区

v-if 和 v-show 控制元素的显示与隐藏，如果只是在创建组件的时候一次判断需要隐藏元素节点，通常用v-if，如果多次控制元素的显示和隐藏，建议用v-show来提升性能

通过render函数对元素进行渲染

render(h){
  return h('h'+this.leval,'123')
},

Vue中自定义指令与操作

inherit Attrs ：false 当设置false的时候，不继承父类的属性，当设置成true的时候继承父类的属性

继承属性

Vue中的事件修饰符

1 prevent 阻止默认事件(常用)

2 stop 阻止冒泡事件（常用）

3 once 事件只触发一次

4 capture 使用事件的捕获模式

5 self 只对当前操作的元素才触发事件

6 passive 事件的默认行为无需等待事件回调执行完毕

使用directives进行自定义指令的绑定操作

<span v-custom=val></span>

自定义局部指令
directives:{
    custom(element,binding)
    {
       element.innerText = binding.value*10
    }
},

自定义全局指令

Vue.directive('custom',function (element,binding) {

    element.innerHTML = binding.value*30

})

directives:{
    custom:
    {
        bind(element,binding){
            element.innerText = binding.value*10
        },
        inserted(element,binding){
            element.innerText = binding.value*10
        }

    }
},

Vue.directive('custom', {

    // element.innerHTML = binding.value*30
    inserted(element,binding){
        console.log('=======inserted',element,binding)
    },
    update(){
        console.log('=======update')
    }


})

定义局部指令会覆盖全局指令，如果全局指令是两个单词的话要用 -分割开

动态创建元素并添加到节点元素上面

<button id = "btn">点我创建一个span元素</button>

let btn =  document.getElementById('btn')
btn.onclick = function () {

    let span =   document.createElement('span')
    span.innerHTML = 'ces'
    span.style.background = 'red'
    document.body.appendChild(span)
}