vue基础
1.vm是什么?
一个同步View和Model的对象
2.插值表达式是用来做什么?
插值表达式就是用来渲染data数据
3.指令是什么?
以v-开头的就是指令
4.插值表达式和v-text的区别?
插值表达式写在标签的innnerHTML位置,而v-text是写在标签的属性位置
举例:<div v-text = number></div>
5..插值表达式,v-text,v-html应用场景?
1.v-html不会对标签进行解析
2.v-text会对标签进行解析
6.v-bind它是绑定给谁的?
属性
7.v-for是用来做什么的?
用来渲染数组和对象
1.渲染数组
1>.在标签的属性位置上写上v-for = 'item in arr',
item 表示数组中的每一项
2>.在标签的属性位置上写上v-for = '(item,index) in arr',
item 表示数组中的每一项,index代表索引
2.渲染对象
1>.在标签的属性位置上写上v-for = 'value in obj',
value 表示对象中的每一项
2>.在标签的属性位置上写上v-for = '(value,,key,index) in obj',
value 表示对象中的每一项的值,index代表索引,key表示键
8.视图更新何时不再进行?解决办法?
- 当使用数组中的length属性去改变属性时
- 使用书序下标的时候怒会触发
解决办法:
1.使用Vue.set(arr,index,newVal),arr是数组,
index是里面的项,newVal改变后的值.
2.Array.prototype.splice()
9.key的作用和使用方式?
1.作用:
key的作用主要是为了高效的更新虚拟DOM
2.使用方式:
在 v-for='':key='唯一的id'
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<ul id="app1">
<li v-for="(item,key) in items" :key="item.id">{{key}}--{{item.name}}--{{item.age}}</li>
</ul>
<script>
var foo = new Vue({
el:'#app1',
data:{
items:[ //数组
{name:'sunling',age:34},
{name:'tian',age:45}
]
}
});
</script>
</body>
</html>
10.v-model的使用场景及作用?
使用场景:
input/textarea/selet
作用:
在表单控件或者组件上创建双向绑定
11.v-on的使用方法?
1.在标签的属性位置上写上 v-on:事件类型="事件函数"(@事件类型="事件函数")
2.通过执行函数添加参数
3.通过在执行函数小红添加&event传递事件对象,并且不能加引号
4.事件修饰符可以给事件添加特殊功能,stop(阻止冒泡)/prevent(阻止默认行为)
- 触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件
12.v-if与v-show的区别?
简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低
1.共同点
都是动态显示DOM元素
2.区别
（1）手段：
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。
13.我们使用vue与jQuery控制我们的dom有什么不一样?
vue:
1.操作的是dom的元素对象,也就是说数据
2.双向绑定,简化dom操作,倾向数据读写,便于后期维护
3.比较适合后台操作
jQuery:
1.适合操作前台用户交互页面
2.代码语义化,容易理解,代码少
3.直接操作的是dom元素
网友评论