组件的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。如果单纯的写成对象形式,就使得所有组件实例共用了一份data,这样一个实例中更新数据会导致其他实例数据改变。
******四、**v-if 和 v-show 的区别
v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。
v-show 会被编译成指令,条件不满足时控制样式将此节点隐藏
五、请列举几个vue内部指令,并说明其作用(至少五个**)******
1. v-bind:绑定属性,动态更新HTML元素上的属性。例如 v-bind:class;
2. v-on:用于监听DOM事件。例如 v-on:click v-on:keyup;
3. v-text:更新元素的textContent;
4. v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值;
5. v-for:循环指令编译出来的结果是 -L 代表渲染列表。优先级比v-if高最好不要一起使用,尽量使用计算属性去解决;
6. v-show:使用指令来实现 – 最终会通过display来进行显示隐藏;
六、你建不建议v-if和v-for一起使用?为什么?
v-for和v-if不要在同一标签中使用,因为解析时先解析v-for在解析v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。
******七、**v-for为什么要加key
v-for遍历时,key是Vue中vnode的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速。
更准确是因为带 key时,在sameNode函数进行key值对比中可以避免就地复用的情况。所以会更加准确。
更快速是利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快
八、填空题
=====
-
MVVM中的的Model表示页面中的数据和视图中间的调度者;
-
MVVM中的的View表示页面中的视图
-
VUE中可以使用DOM操作了;
-
在HTML中被Vue实例控制的代码区域我们称之为View
-
在Vue实例中的Data对象就是MVVM中的Model
-
new出来的Vue实例就是MVVM中的ViewModel
-
v-text指令是用来渲染文本的;
-
v-html指令是用来渲染HTML标签;
-
v-bind指令是用来给HTML属性绑定数据的;
-
v-bind的简写是:
-
v-on指令是给元素绑定事件的;
-
给一个div添加一个点击事件可以使用指令@;
-
在methods里的方法中想访问data里的数据可以使用this关键字;
-
v-html指令相当于js中的innserHTML属性;
-
VUE中v-for指令可以用来做循环;
-
当我们频繁的操作显示和隐藏元素的时v-show更好;
-
v-else一般配个下面v-if指令使用;
-
Vue的$mount()方法可以动态指定要控制的区域;
-
使用axios发起get请求的时候,第一个参数是请求地址;
-
每当vue实例对象监控到data中的数据发生了变化,会立即重新解析执行el区域内所有的代码;
-
当点击img图片使页面有一个弹框时,可以使用指令v-on
-
vue实例的method对象里的方法可以使用ES6简写;
-
@DateTimeFormat注解用于将指定格式的字符串转换为Date类型;
-
vue中通常把v-model通常使用在表单标签中;
-
vue中input元素可以使用v-model指令;
最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS: