Vue常用知识点
2022/1/8 23:04:00
本文主要是介绍Vue常用知识点,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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) }
这篇关于Vue常用知识点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南
- 2024-11-16Vue项目实战:新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解:React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南:从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习:新手入门教程与实践指南
- 2024-11-16Vue3学习:从入门到初级实战教程