1.MVVM框架
1.M：模型层（Model），主要负责业务数据相关；
2.V：视图层（View），顾名思义，负责视图相关，细分下来就是html+css层；
3.VM：（ViewModel）V与M沟通的桥梁，也可以看作为控制器，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
2.初识Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="d1">
<p>{{mytxt}}</p>
</div>
<script>
let vm=new Vue({
el:'#d1',
data:{
mytxt:'欢迎使用Vue.js'
}
})
</script>
</body>
</html>
3.Vue数据的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入vue -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="d2">
<!-- 双向绑定 -->
<input type="text" name="" id="" v-model="pname" />
<br>
<p>产品名称：{{pname}}</p>
<!-- 单项绑定-->
<input type="text" name="" id="" v-bind:value="price" />
<br>
<p>产品价格：{{price}}</p>
</div>
<script type="text/javascript">
let sm=new Vue({
el:'#d2',
data:{
pname:'计算机',
price:1000
}
})
</script>
</body>
</html>
4.属行的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.one{
color: yellow;
}
.two{
color: red;
}
</style>
</head>
<body>
<div id="d">
<p v-bind:class="bg">李济啊</p>
<input type="button" name="" id="" value="点击换颜色" v-on:click="ccc" />
<ul v-for="k in arr">
<li>{{k}}</li>
</ul>
<input type="button" name="" id="" value="加++" v-on:click="addarr" />
</div>
<script type="text/javascript">
let z=new Vue({
el:'#d',
data:{
bg:'one',
arr:[1,2,3]
},
methods:{
ccc(){
if(this.bg=='one'){
this.bg='two'
}else{
this.bg='one'
}
},
addarr(){
/* 后台增加,页面不变
for(let k in this.arr){
this.arr[k]+=2
}
console.log(this.arr) */
//变异方法改变数组在页面的呈现
for(let k in this.arr){
this.arr.splice(k,1,this.arr[k]+=1)
}
}
}
})
</script>
</body>
</html>
5.函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="d">
<input type="button" name="" id="" value="点击" v-on:click="show" />
<input type="button" name="" id="" value="点击" v-on:click="display" />
<input type="button" name="" id="" value="增加" v-on:click="add"/>
<p>运算结果{{num}}</p>
</div>
<script type="text/javascript">
let z=new Vue({
el:'#d',
data:{
num:1
},
methods:{
//以匿名函数的形式声明
show:function(){
alert('欢迎使用Vue中的函数')
},
//非匿名函数不加function
display(){
alert('另一种形式的Vue函数声明')
},
add(){
this.num+=1;
}
}
})
</script>
</body>
</html>
6.函数之页面切换案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid blue;
}
.show{
display: block;
}
.hide{
display: none;
}
li{
display: inline-block;
border: 1px solid red;
}
#d1{
background-color: yellow;
}
#d2{
background-color: pink;
}
#d3{
background-color: aqua;
}
</style>
</head>
<body>
<div id="con">
<ul>
<li id="m1" v-on:click="xianshi2()">菜单1</li>
<li id="m2" v-on:click="xianshi2()">菜单2</li>
<li id="m3" v-on:click="xianshi2()">菜单3</li>
</ul>
<div v-show="num==0" id="d1">
功能区1
</div>
<div v-show="num==1" id="d2">
功能区2
</div>
<div v-show="num==2" id="d3">
功能区3
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#con',
data:{
num:0
},
methods:{
xianshi2(){
//获取当前被点击的li
let cur=event.srcElement;
//得到li所在的ul
let ul=cur.parentElement;
//获取所有li的集合
let lis=ul.children;
for(var i in lis){
if(lis[i]==cur){
this.num=i;
break;
}
}
console.log(this.num)
}
}
})
</script>
</body>
</html>
7.监听器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="port">
<input type="button" name="" id="" value="改变" v-on:click="change()" />
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#port',
data:{
num:10
},
methods:{
change(){
this.num+=3;
}
},
//浅度监听器
watch:{
//函数名跟定义变量名一样
num(newvalue,oldvalue){
console.log("原有数值"+oldvalue+"新数值"+newvalue);
}
}
})
</script>
</body>
</html>
8.过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="h">
<p>{{num|fail}}</p>
</div>
<script type="text/javascript">
Vue.filter('fail',function(value){
let date=new Date
let mouth=date.getMonth()+1
return 'CNN'+value+"EP"+date.getFullYear()+mouth+date.getDate()+date.getHours()+date.getMinutes()+date.getSeconds()
})
Vue.filter('star',function(value){
return "CNN"+value
})
let z=new Vue({
filters:{
tail(value){
return value+"EP"
}
},
el:'#h',
data:{
num:210423
}
})
</script>
</body>
</html>
9.猜数字案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title>猜数字</title>
<!--样式代码放置于style标签里-->
<style>
/*
形式1：
#标签ID名{
标签属性名（例如边框、背景等）：属性值1 属性值2 属性值3... ;
标签属性名（例如边框、背景等）：属性值1 属性值2 属性值3... ;
标签属性名（例如边框、背景等）：属性值1 属性值2 属性值3... ;
....
}
形式2：
标签名称{
标签属性名（例如边框、背景等）：属性值1 属性值2 属性值3... ;
标签属性名（例如边框、背景等）：属性值1 属性值2 属性值3... ;
标签属性名（例如边框、背景等）：属性值1 属性值2 属性值3... ;
....
}
还有其他形式
* */
#main{
/*border: 1px solid black;*/
background-image: url(img/main.png);
background-size:cover;
height: 477px;
width:555px;
position: fixed;
top:51px;
left:498px;
}
#txt{
/*border: 2px solid blue;*/
width:360px;
height: 62px;
position: fixed;
left:624px;
top:300px;
}
#im{
/*border: 2px solid red;*/
height: 120px;
width:110px;
position: fixed;
left:750px;
top:370px;
}
#result{
/*border: 2px solid green;*/
height: 193px;
width: 177px;
position: fixed;
left:1095px;
top:214px;
}
input{
width:360px;
height:45px;
text-align: center;
border: none;
outline: none;
font-size: 20px;
}
#button{
height: 120px;
width:110px;
}
#big{
height: 193px;
width: 177px;
}
body{
background-image: url(img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html{
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div id="main">
<div id="txt">
<input type="text" id="info" v-model="num" />
</div>
<div id="im">
<img id="button" src="img/button.png" v-on:click="com" />
</div>
</div>
<div id="result">
<img id="big" v-bind:src="imgsrc" />
</div>
</div>
<script type="text/javascript">
//当页面载入就生成一个随机数
var num = 31 * Math.random();
//对随机数取整
var num2 = Math.round(num);
let z = new Vue({
el: '#app',
data: {
num: '',
imgsrc: 'img/noPic.png'
},
methods: {
com() {
let iv = this.num;
if (iv.length == 0) {
alert('请输入数字，文本框里不能为空白');
} else if (isNaN(iv)) {
alert('你的不是数字，请重新输入');
} else {
//以用户输入数值iv和随机数num2进行比较
//如果用户输入的数值大于随机数，则显示图片big.png
if (iv > num2) {
this.imgsrc = "img/big.png";
//如果用户输入的数值小于随机数，则显示图片small.png
} else if (iv < num2) {
this.imgsrc = "img/small.png";
//如果用户输入的数值等于随机数，则显示图片win.png
} else {
this.imgsrc = "img/win.png";
}
}
}
}
})
</script>
</body>
</html>
10.员工信息案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>人物编号</th>
<th>人物姓名</th>
<th>人物年龄</th>
<th>人物职位</th>
</tr>
<tr v-for="i in info">
<td>{{i.no}}</td>
<td>{{i.name}}</td>
<td>{{i.age}}</td>
<td>{{i.job}}</td>
<td><input type="button" name="" id="" value="删除" v-on:click="del(index)" /></td>
</tr>
</table>
<input type="text" name="" id="" value="" placeholder="名字" v-model="name" /><br>
<input type="text" name="" id="" value="" placeholder="年龄" v-model="age" /><br>
<input type="text" name="" id="" value="" placeholder="职位" v-model="job" /><br>
<input type="button" name="" id="" value="添加员工" v-on:click="add()" />
</div>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
info: [{
no: 1,
name: '曹操',
age: '60',
job: '丞相'
}, {
no: 2,
name: '袁绍',
age: '50',
job: '将军'
}],
name: '',
age: '',
job: ''
},
methods: {
add() {
let no = 0;
if (this.info.length == 0) {
no = 1;
} else {
no = this.info[this.info.length - 1].no + 1;
}
this.info.push({
no: no,
name: this.name,
age: this.age,
job: this.job
});
},
del(index) {
this.info.splice(index, 1);
}
}
});
</script>
</body>
</html>
