彭阳门户网站建设,中国备案查询网站,下载百度官方网站,台州网页设计招聘信息如果觉得我的分享有一定帮助#xff0c;欢迎关注我的微信公众号 “码农的科研笔记”#xff0c;了解更多我的算法和代码学习总结记录。或者点击链接扫码关注 【Vue/基础知识】Vue基础知识#xff08;一#xff09; 1、v-show 和 v-if 指令的共同点和不同点#xff1f;
共…如果觉得我的分享有一定帮助欢迎关注我的微信公众号 “码农的科研笔记”了解更多我的算法和代码学习总结记录。或者点击链接扫码关注 【Vue/基础知识】Vue基础知识一 1、v-show 和 v-if 指令的共同点和不同点
共同点v-show 和 v-if 都是 Vue 模板指令都用于控制组件或元素的显示或隐藏。
不同点v-show 只是简单的控制元素的 display 属性而不是将元素从 DOM 中移除因此在切换显示和隐藏时元素的状态并不会改变。v-if 则是根据表达式的真假值来切换元素的显示状态如果表达式为 false则元素会被移除如果表达式为 true则会重新渲染该元素。因此v-if 更适用于需要频繁切换显示和隐藏的情况而 v-show 则更适用于一开始就需要显示或隐藏的情况。 2、如何让CSS只在当前组件中起作用?
可以使用 CSS 的作用域限定来实现。在组件的 style 标签中使用 scoped 属性即可让该样式只在当前组件中起作用。例如
templatediv classmy-component/div
/templatescript
export default {name: MyComponent,
}
/scriptstyle scoped
.my-component {/* 这里的样式只会作用于 MyComponent 组件内的元素 */
}
/style3、keep-alive 的作用是什么?
keep-alive/keep-alive 是 Vue 内置组件用于缓存组件的实例从而避免多次创建和销毁组件的开销。当包裹动态组件时keep-alive 会在组件切换时保留该组件的状态而不是重新渲染该组件。常见的用法是将需要缓存的组件包裹在 keep-alive 标签中如下所示
templatedivkeep-alivecomponent :iscurrentComponent/component/keep-alive/div
/templatescript
export default {data() {return {currentComponent: ComponentA,}},
}
/script4、如何获取dom?
可以使用 Vue 的 $refs 属性来获取组件中的 DOM 元素。在模板中给需要获取的元素添加 ref 属性然后在组件中通过 this.$refs 对象来获取该元素的引用。例如
templatedivinput refmyInput typetext //div
/templatescript
export default {methods: {doSomething() {const inputElement this.$refs.myInput// 这里可以对 inputElement 进行操作}},
}
/script5、说出几种vue当中的指令和它的用法
常用的 Vue 指令包括
v-if根据表达式的真假值来切换元素的显示状态v-for根据数组或对象的内容来渲染列表或表格v-bind用于动态绑定 HTML 属性或组件的 propv-on用于监听 DOM 事件或自定义事件v-model用于双向绑定表单元素的值v-show用于控制元素的显示或隐藏v-cloak用于防止页面闪动与 CSS 配合使用。 6、vue-loader是什么使用它的用途有哪些
vue-loader 是一个 Webpack 的 loader用于解析 .vue 文件。它可以将一个 .vue 文件解析成一个 Vue 组件对象并将其编译成 JavaScript。使用 vue-loader 可以使得我们在单文件组件中编写组件的 HTML 模板、CSS 样式和 JavaScript 代码从而让组件更加独立和可维护。vue-loader 还可以实现 CSS 模块化和 Scoped CSS 等功能。 7、为什么使用key
在使用 v-for 指令渲染列表或表格时为了提高渲染性能Vue 会尽可能地复用已经存在的元素而不是重新创建和销毁元素。但是如果数组中的某个元素的位置发生变化Vue 会把该元素从原来的位置移动到新的位置而不是销毁和创建新的元素。这样可以避免频繁的 DOM 操作提高渲染性能。
然而在某些情况下需要对数组中的某个元素进行增删操作从而导致某个元素的 key 发生变化。如果没有设置 keyVue 无法判断哪些元素是已经存在的哪些是需要新创建的从而可能导致渲染错误。因此设置 key 可以帮助 Vue 更好地跟踪数组中元素的变化从而正确地进行渲染。 8、v-modal的使用
v-model 是 Vue 中常用的一个指令用于实现表单元素和数据之间的双向绑定。v-model 可以简化表单元素的值的获取和设置同时也能够自动监听表单元素的变化并更新数据。v-model 可以用于 input、select、textarea 等表单元素例如
templatedivinput v-modelmessage typetext /pMessage: {{ message }}/p/div
/templatescript
export default {data() {return {message: ,}},
}
/script9、分别简述computed和watch的使用场景
computed 和 watch 都是 Vue 中用于监听数据变化的方法但是它们的使用场景有所不同。
computed 用于计算属性当需要对某个数据进行复杂的计算或格式化时可以使用 computed 方法来获取计算结果。computed 方法可以缓存计算结果只有当依赖的数据发生变化时才会重新计算。computed 方法类似于一个属性可以在模板中直接使用。
例如可以定义一个计算属性 fullName用于计算用户的全名
templatedivpFirst name: {{ firstName }}/ppLast name: {{ lastName }}/ppFull name: {{ fullName }}/p/div
/templatescript
export default {data() {return {firstName: John,lastName: Doe,}},computed: {fullName() {return this.firstName this.lastName},},
}
/scriptwatch 用于监听数据的变化当某个数据发生变化时可以执行一些逻辑或异步操作。watch 方法类似于一个监听器可以监听一个或多个数据的变化。
例如可以定义一个 watch 方法用于监听用户的搜索关键字当关键字发生变化时可以发送请求获取搜索结果
templatedivinput v-modelsearch typetext /ulli v-foritem in searchResult :keyitem.id{{ item.title }}/li/ul/div
/templatescript
export default {data() {return {search: ,searchResult: [],}},watch: {search(newVal, oldVal) {// 发送请求获取搜索结果fetch(https://example.com/api/search?query newVal).then(response response.json()).then(data {this.searchResult data.results})},},
}
/script10、v-on可以监听多个方法吗
可以监听多个方法。在 v-on 指令中可以使用逗号分隔多个方法。例如
button v-on:clickhandleClick, handleAnotherClickClick me/button11、v-if和v-for的优先级
在同一个元素上v-for 指令的优先级高于 v-if 指令。这意味着如果一个元素同时有 v-if 和 v-for 指令那么 v-for 指令会先被执行然后在循环中根据 v-if 的条件进行筛选。 12、vue常用的修饰符
Vue 中常用的修饰符有以下几种
.prevent阻止默认事件.stop阻止事件冒泡.capture使用事件捕获模式.self只当事件在该元素本身而不是子元素触发时触发回调.once只触发一次回调.passive告诉浏览器该事件监听器不会调用.preventDefault()可以优化页面滚动性能。 13、vue中 :is 作用
在 Vue 中:is 是一个动态组件的特殊属性用于在运行时动态地绑定组件类型。
通常我们在模板中使用组件时会这样写
templatedivmy-component/my-component/div
/template使用:is后我们可以这样写
templatedivcomponent :iscomponentType/component/div
/template这里的componentType是一个在组件实例中定义的计算属性或者 data它的值可以是任何组件的名称。
通过这种方式可以在不同的组件之间切换从而实现动态的组件渲染。
注意当使用:is时需要在组件名前添加前缀例如
component :ismy- componentName/component这样做是因为在某些情况下Vue 会将组件名解释为原生 HTML 元素例如table、tr等所以需要添加前缀以明确告诉 Vue 这是一个组件名。
