1.MVVM概念
MVVM的概念-这张图很值钱.png
2.Vue基本结构代码和MVVM的对应关系
<script src="./lib/vue-2.5.16.js"></script>
<!-- 这里创建了一个容器,将来Vue就会控制整个容器中的所有代码 -->
<!-- 这个被vm控制的区域,就是MVVM中的View层 -->
<div id="app">
<p>{{msg}}</p>
</div>
<script>
// new出来一个实例,这个实例就是MVVM中的VM层
const vm=new Vue({
el:"#app",//通过el属性,指定vm调度者控制页面上的哪个区域
data:{ //这个data对象就是MVVM中的Model层
msg:"甄嬛"
}
})
</script>
3.插值表达式
插值表达式的用法:表达式/三元表达式,只能用在元素的内容区域
<div id="app">
<!-- 插值表达式的用法 : 表达式/三元表达式 -->
<p>{{msg}}</p>
<!-- 插值表达式中使用 + 拼接字符串 -->
<p>{{name+"18岁"}}</p>
<!-- 插值表达式中使用 数字运算符 -->
<p>{{2*3}}</p>
<!-- 插值表达式中使用 三元运算符 -->
<p>{{8%2 === 0 ? "偶数":"奇数"}}</p>
<!-- 三元表达式 从data中取值 -->
<p>{{age > 18? "已成年":"未成年"}}</p>
</div>
<script>
const vm=new Vue({
el:"#app",
data:{
msg:"华妃",
name:"jack",
age:20
}
})
</script>
4.指令v-text
v-text是用来渲染文本的,用法: v-text="属性名"
注意:只能被使用在标签的属性上,会把元素内部的内容全部替换掉,
-
v-text 会把元素内部的内容都替换掉
<div id="app"> <p v-text="msg">123</p> </div> const vm=new Vue({ el:"#app", data:{ msg:"这是一首简单的小情歌" } }) 结果是:这是一首简单的小情歌,,会把123替换掉
5.指令v-html
v-html是用来渲染带标签的文本,用法: v-html="属性名"
6.插值表达式,v-text和v-html的区别
1.插值表达式
1.插值表达式可以渲染普通的文本,使用在标签的内容innerHtml区域, 用法: {{}}
注意:插值表达式不会清空元素中其它的内容, 插值表达式,只是一个占位符,不会清空元素的内容,但是在网速慢的情况下,会出现闪烁的问题,v-text没有闪烁问题,使用v-cloak指令,解决插值表达式闪烁问题
<p v-cloak>123{{msg}}456</p>
结果是: 123这是一首简单的小情歌456
2.v-text指令
v-text指令也可以用来渲染普通文本,用法:v-text="属性名"
注意:只能被使用在标签的属性上,会把元素内部的内容全部替换掉,
<div id="app">
<p v-text="msg">123</p>
</div>
const vm=new Vue({
el:"#app",
data:{
msg:"这是一首简单的小情歌"
}
})
结果是:这是一首简单的小情歌,,会把123替换掉
3.v-html指令
1. v-html是用来渲染带标签的文本,用法: v-html="属性名"
7.v-bind指令
可以用来动态的绑定属性,用法: v-bind:属性名="data中的属性名",简写形式 :属性名="data中的属性名",可以用来绑定class样式,用法 :class="{'类名':布尔值}" 布尔值为true则样式显示,为false则样式不显示
8.v-for指令
v-for能够根据data中数据的变化自动刷新视图,
注意1: v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候,它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复
注意2: 以下两种情况不会触发视图更新
1.使用数组的length属性取改变数组的时候,不会触发视图更新(model层数据变化了,视图层没有刷新)
2.使用数组下标的方式去改变数组的时候,也不会触发视图更新
解决方法:
1.使用Vue.set(arr,index,newVal) arr是需要改变的数组,index是数组里面的项,newVal是改变后的值,Vue.set(vm.arr3,0,{name:"小明",age:2222})
2.Array.prototype.splice(),vm.arr1.splice(0,1)删除arr1数组中的第一项
1.渲染数组
1. 数组arr1 ,item是数组中的每一项,arr1是要循环的数组
arr1:["甄嬛","年石兰","安陵容"],
<ul>
<li v-for="item in arr1" :key="item">{{item}}</li>
</ul>
2.数组arr2
arr2:[
{"name":"貂蝉",age:20},
{"name":"昭君",age:18},
],
渲染方式有两种:
2.1方法1,item是数组中的每一项,arr2是要循环的数组
<ul>
<li v-for="item in arr2" :key="item.name">{{item.name}}-----{{item.age}}</li>
</ul>
2.2方法2,item是数组中的每一项,index是数组项的索引值,arr2是要循环的数组
<ul>
<li v-for="(item,index) in arr2" :key="index">{{item.name}}--{{item.age}}-{{index}}</li>
</ul>
###2.渲染对象
val,key,index分别代表值,键,每项的索引
obj:{
"邮箱":"247171",
"电话":"284561596321",
"爱好":"吃饭,睡觉"
}
<ul>
<li v-for="(val,key,index) in obj" :key="index">{{key}}:{{val}}:{{index}}</li>
</ul>
9.v-model指令
v-model指令用来双向数据绑定：就是model和view中的值进行同步变化 ,用法:v-model="属性名"
10.v-on 指令
v-on用来监听事件dom事件
用法:
1.v-on:事件类型="执行的函数"
2.简写@:事件类型="执行的函数"
3.参数 @:事件类型="执行的函数(实参)"
4.通过执行函数中添加event参数传递事件,注意只能是event,并且没有双引号
5.事件修饰符可以给事件添加特殊功能, .stop阻止单击事件继续传播 .prevent阻止页面跳转
11. v-if和v-show指令
v-if和v-show用来 控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" ,布尔值为true的时候显示,为false的时候不显示
两者的区别:
v-if通过控制dom来控制元素的显示和隐藏
v-show通过控制样式display:none来控制元素的显示和隐藏
使用场景区别
1.设计到大量dom操作的时候,我们需要使用v-show
2.设计到异步数据渲染的时候就使用v-if
网友评论