-
MVVM模式：
- model 负责数据存储
- View 负责页面展示
- View model：负责业务逻辑处理（比如ajax请求等），对数据进行加工后交给视图展示
vue中代码对应的MVVM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<!--vue实例所控制的元素区域就是 V view层-->
<div id="app">
<p>{{msg}}</p>
</div>
</body>
<script>
//我们这个new出来的这个vue对象就是我们vm 调度者 view-model层
var vue=new Vue({//创建一个vue实例
el:'#app',//表示,当前我们new的这个VUE实例，要控制页面上的那个区域
//这里的data就是mvvm中的m model层 专门用来保存 每个页面的数据的
data:{//data中要存放的是el中要用到的数据
msg:'vue'//通过vue提供的指令 我们可以很方便的就能吧数据渲染到页面上，程序员不再手动操作dom元素了【vue之类的框架不再提倡操作dom元素】
}
})
</script>
</html>
- 差值表达式：只会占用差值表达式所占用的空间，不会覆盖整个标签
- v-cloak:差值表达式闪烁，通过添加v-cloak属性 设置display none 来消除闪烁
- v-text：会覆盖整个标签 不会解析html标签，没有闪烁
- v-html：会覆盖整个标签 可以解析html标签，没有闪烁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{html}}</h1>
<h1>{{msg}}</h1>
<h1 v-html="msg"></h1>
<h1 v-text="msg"></h1>
<h1 v-html="html"></h1>
</div>
</body>
<script>
var vue=new Vue({
el:"#app",
data:{
msg:"vue",
html:"<span>new vue</span>"
}
})
</script>
</html>
image.png
v-bind:绑定属性值
<input type="button" v-bind:title="msg2 + '123'">
v-bind中可以写合法的js表达式
通过将后面的代码转换为js代码表达式来实现绑定
可以简写为英文冒号 ':'
v-on ：绑定事件
与v-bind一样 都会把后面的值当做js表达式来解析；
所以
<input value="button" type="button" v-on:click="alert('hello');">
这种写法是错误的
要通过methods来定义一个方法
var vue=new Vue({
el:"#app",
data:{
msg:"vue",
html:"<span>new vue</span>",
msg2:"mytitle"
},
methods:{//methods中定义了当前vue实例所有可用的方法
show:function(){
alert('hello');
}
}
})
html代码:
<input type="button" v-on:click="show">;
简单的demo 跑马灯效果：
事件修饰符
self：只点击自身才会出发事件
once：只出发一次事件
stop：停止事件冒泡
prevent：阻止事件默认行为
capture：通过给父级元素添加capture 会使得此父级以下的所有子级以事件捕获机制运行
数据的双向绑定
image.png
window.vm 可以找到 vue实例
里面用一个data 就是我们的msg的值
image.png
image.png
通过在控制台里我们实现了数据的单向绑定，从model层到view层的绑定
尝试用 v-bind 进行绑定 可以发现 v-bind只能实现从model 到 view的绑定 并不能实现我们的数据的双向绑定
v-model指令
通过 v-model指令可以实现数据 表单元素 和 model层中数据的双向绑定
v-model 指令 只能运用在表单元素中
input(radio text,address,email) select checkbox textarea 等可以使用v-model指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!--v-bind 只能实现数据的单向绑定 从model到view 并不能实现数据的双向绑定 -->
<!--<input type="text" v-bind:value="msg">-->
<input type="text" v-model="msg">
</div>
</body>
<script>
var vm =new Vue({
el:'#app',
data:{
msg:'vue demo'
}
})
</script>
</html>
通过属性绑定为元素设置class类名称
总共4种方式，核心是利用v-bind指令
第一种直接传递数组
第二种在数组中使用三元表达式
第三种使用对象来代替三元表达式
第四种直接传对象
实验代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.red{
color:red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
<script src="js/vue.js"></script>
<body>
<div id="app">
<!-- <h1 class="red thin">这是一个很大的H1</h1>-->
<!--第一种使用方式 直接传递数组 使用v-bind 做数据绑定-->
<!--<h1 :class="['thin','red','italic']">这是一个很大的H1</h1>-->
<!--在数组中使用三元表达式-->
<!-- <h1 :class="['thin','red','italic',flag?'active':'']">这是一个很大的H1</h1>-->
<!--在数组中使用对象来代替三元表达式，提高可读性-->
<!-- <h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大的H1</h1>-->
<!--在为class使用v-bind绑定对象的时候，对象的属性是类名 由于对象的属性可带引号也可不带
属性的值为一个标识符-->
<!--<h1 :class="{ red:true ,italic:true,thin:true,active:false}">这是一个很大的H1</h1>-->
<h1 :class="classobj">这是一个很大的H1</h1>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true,
classobj:{ red:true ,italic:true,thin:true,active:false}
}
})
</script>
</html>
为元素设置内联样式
三种方法：
第一种直接传对象
第二种将对象存入data里 再进行传入
第三种传入一个数组
实验代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
<!-- 对象就是一个无序键值对的集合-->
<!--第一种 直接传对象-->
<!-- <h1 :style="{'color':'red','font-weight':200}">这是一个h1</h1>-->
<!--第二种将对象存到data里 然后再传入-->
<!--<h1 :style="styleobj">这是一个h1</h1>-->
<!--第三种-->
<h1 :style="[styleobj,styleobj2]">这是一个h1</h1>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
styleobj:{'color':'red','font-weight':200},
styleobj2:{'font-style':'italic'}
}
})
</script>
</html>
v-for 指令
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
四种使用方式
遍历数组
遍历对象数组
遍历对象（在遍历对象的时候有3个值 item key index）
迭代数字
实验代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
<p v-for="(item,index) in list">{{item}} 索引值：{{index}}</p>
<p v-for="(user , index) in list2">id:{{user.id}}---名字：{{user.name}}---索引是{{index}}</p>
<!--在遍历对象的时候 除了有val，key，在第三个位置还有一个索引-->
<p v-for="(value,key,i) in user">值是：{{value }}---键是：{{key}}---索引是：{{i}}</p>
<!--v-for迭代数字，in后面放普通数组，对象数组，对象，还可以放数字-->
<!--如果使用v-for迭代数字的话，count值是从1开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6],
list2:[
{id:1,name:"zs1"},
{id:2,name:"zs2"},
{id:3,name:"zs3"},
{id:4,name:"zs4"}
],
user:{
id:"1",
user:"TONY",
gender:'男'
}
}
})
</script>
</html>
在 2.2.0版本以后 在组件中使用v-for key值是必须使用的
如果我们在页面中 动态给一个v-for渲染的标签添加元素
那么就会产生一个问题
image.png
image.png
checkbox对应的标签发生了变化
这时就需要到我们的key 键值
key在使用过程中只能使用v-bind属性绑定的形式，指定key的值
在组件中使用v-for循环中，或者在一些特殊的情况中，如果v-for有问题，必须在使用
v-for的同时，指定唯一的字符串/数字类型 ：key 值
实现原理 戳这里
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
<div>
<label for="">
id:
<input type="text" v-model="id">
</label>
<label>
name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!--v-for循环过程中 只能使用number或者string-->
<!--key在使用过程中只能使用v-bind属性绑定的形式，指定key的值-->
<!--在组件中使用v-for循环中，或者在一些特殊的情况中，如果v-for有问题，必须在使用
v-for的同时，指定唯一的字符串/数字类型 ：key 值-->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}}---{{item.name}}
</p>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'李斯'},
{id:2,name:'嬴政'},
{id:3,name:'赵高'},
{id:4,name:'韩非'},
{id:5,name:'荀子'}
]
},
methods:{
add(){
this.list.unshift({id:this.id,name:this.name})
}
}
})
</script>
</html>
网友评论