"Vue.js面试题与基础学习笔记,涵盖了数据绑定、动态属性、条件判断、循环以及事件绑定等核心概念,适合面试准备和Vue.js初学者参考。"
在Vue.js中,数据绑定是其核心特性之一,它使得开发者无需直接操作DOM,而是通过改变数据来驱动视图的更新。例如,`<div>{{msg}}</div>` 这样的模板语法,会在`msg`数据发生变化时自动更新对应的DOM内容。在组件的`data`选项中定义`msg`,然后在`mounted`生命周期钩子中设置初始值,如`this.msg = 'demo1mounted'`。
`v-bind`指令用于绑定属性值,如`<div :title=title>div</div>`,这里的`:title`是`v-bind:title`的简写,`title`变量的值会被赋给`div`的`title`属性。同样,我们还可以动态绑定不固定的属性,如`<div :[attrName]=title>div</div>`,这里的`attrName`变量决定了要绑定哪个属性。
Vue.js提供了多种方式来控制元素的显示和隐藏。`v-if`和`v-else`指令用于条件渲染,当`isShow`为`true`时,`<div v-if="isShow">`会被渲染,而`<div v-else>`则不会。`v-else-if`可以添加额外的条件检查。与`v-if`不同,`v-show`只是简单地切换元素的CSS `display`属性,即使条件为`false`,元素也会留在DOM中。
`v-for`用于循环遍历数组或对象。例如,`<div v-for="i in arr" :key="i">{{i}}</div>`将遍历`arr`数组并显示每个元素。若需要同时获取索引,可以写成`<div v-for="(i, index) in arr" :key="index">{{i}}xx{{index}}</div>`。对于对象,`v-for`可以同时获取属性值(prop)、属性名(propName)和索引(index)。
事件绑定是Vue.js中的另一个重要特性。`@click`监听点击事件,`this.number++`表示点击按钮时增加`number`的值。`@click.stop`可以阻止事件冒泡,防止事件向上层元素传播,`@click.prevent`则阻止事件的默认行为,比如表单提交时防止页面跳转。`@click.self`则确保只有点击事件源本身时才会执行绑定的方法。
以上内容是Vue.js基础学习和面试中常见的知识点,理解并熟练掌握这些概念对于Vue.js开发者来说至关重要,不仅有助于应对面试,还能提高日常开发效率。