10.vue框架
vue框架
易用、灵活、高效
mvc
M model 数据 模型
V view 视图 dom操作
C controller 控制器 路由
C
oBtn.onclick = function(){
$.ajax(...
success:function(data){//data M
//DOM操作 V
}
);
}
mvc mvvm mvp mv*
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
指令
v-开头的自定义属性
v-model 数据
v-text 纯文本 简写 {{数据}}
v-html 会转义html标签
exp：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#div1", //选择器
data:{
a:"abc" //定义
}
});
};
</script>
</head>
<body>
<div id="div1">
<input v-model="a" type="text" value=""/><br />
<span v-text="a"></span> <br />
<span v-html="a"></span> <br />
{{a}}
</div>
</body>
</html>
v-text/{{}}区别
{{}} 如果使用过程中出现错误，会显示花括号， v-text不会显
想要不想显示{{}}
1、把所有的{{}}——> v-text 不推荐
2、v-cloak 需要和样式进行配合
外层div设置[v-cloak]
网络延迟的问题也会显示 {{}}
如果在使用vue的过程中没有出现错误，vue会把v-cloak给删除
推荐用花括号 {{xxx}}
v-bind 操纵属性
注意： el不能选择body或者html
v-bind:
属性名称="值" 简写 :属性名称="值"
跟对象:v-bind="对象"
data:{
a:"width:200px; heigth:200px;background:red"
}
v-bind:style="a"
v-bind:style="'width:200px; heigth:200px;background:red'"
json
v-bind:style="{width:'200px', heigth:'200px',;background:'red'}"
数组
data:{
width:{width:"200px"},
heigth:{heigth:"200px"},
background:{background:"200px"},
}
v-bind:style="[width,height,background]"
class
data:{
a:"box1 box2 box3"
}
v-bind:class="a"
v-bind:class="'box1 box2 box3'"
json: 必须跟布尔值
data:{
box1:true,
box2:false,
box3:"dsafsa"
}
v-bind:class="{box1:box1,box2:box2,box3:box3}"
数组,元素是变量名
data:{
box1:"box1",
box2:"box2",
box3:"abc"
}
v-bind:class="[box1,box2,box3]"
方法：
methods:{
方法名(){
}
}
事件：
v-on:click="方法名" 简写 @click="方法名"
显示隐藏:
v-show: 控制的是style:none/block
v-if: 控制的真实dom节点的创建和删除
v-if 条件判断
v-if
v-else-if
v-else
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="a==1">1</span>
<span v-else-if="a==2">2</span>
<span v-else>其他</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
a:1
}
});
</script>
</body>
</html>
循环：v-for/v-of
数组
v-for="item in arr"
v-for="(v,k) in arr"
v-for="v,k in arr"
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="vue.js"></script>
<script>
/*
for in
for of
*/
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
arr:["aaa","bbb","ccc"]
}
});
};
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<ul>
<li v-for="item of arr">{{item}}</li>
</ul>
</div>
</body>
</html>
res:
对象
v-for="item in json"
v-for="(v,k,i) in json"
v-for="v,k,i in json"
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
/*
for in
for of
*/
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
json:{
name:"翠花",
age:18,
sex:0
}
}
});
};
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in json">{{item}}</li>
</ul>
<ul>
<li v-for="v,k,i of json">{{v}}----{{k}}----{{i}}</li>
</ul>
</div>
</body>
</html>
res:
数据更新
数组
arr.push/pop/shift/unshift/splice....
直接操纵索引 无效 vm.arr[index] = xxxx;
vm.$set(vm.arr/json,index/key,value);
Vue.set(vm.arr/json,index/key,value);
vm.arr[index] = xxxx; 无效
强制更新:
vm.$forceUpdate();
对象
必须先定义 再修改！
事件对象
@click="函数名" 事件函数的第一个参数就是事件对象ev
@click="函数名($event)" 在函数里面可以直接使用ev
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
show(ev){
alert(ev.clientX);
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="show($event)" type="button" value="按钮" />
</div>
</body>
</html>
原生
onclick="show(event)"
冒泡：
子元素的事件可以传播到父元素上，最终传播到document
var oEvent = ev || event;
oEvent.cancelBubble = true;
oEvent.stopPropagation();
vue阻止事件冒泡:
@click.stop="btn"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
div(){
alert("div");
},
btn(){
//var oEvent = ev || event;
//oEvent.cancelBubble = true;
//oEvent.stopPropagation();
alert("btn");
}
}
});
};
</script>
</head>
<body>
<div id="app">
<div id="div1" @click="div" >
div1
<input @click.stop="btn" type="button" value="按钮" />
</div>
</div>
</body>
</html>
默认事件
浏览器自带的行为就是默认事件
原生:
ev.preventDefault();
//return false;
vue:
(原生和.prevent都可以)
@click.prevent="show"
vue阻止默认事件:
@click.prevent="show"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
show(ev){
alert(1);
//ev.preventDefault();
//return false;
}
}
});
};
</script>
</head>
<body>
<div id="app">
<!--vue阻止默认事件-->
<a @click.prevent="show" href="http://www.baidu.com/">百度</a>
</div>
</body>
</html>
事件修饰符：
https://cn.vuejs.org/v2/guide/events.html
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.config.keyCodes.enter = 37;将将回车设成37
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
left(){
alert("left");
},
right(){
alert("right");
}
}
});
};
</script>
</head>
<body>
<div id="app">
<!--
@click.left鼠标左键,
@click.right鼠标右键,
@click.right.prevent阻止右键默认事件
-->
<input @click.left="left" type="button" value="left" />
<input @click.right.prevent="right" type="button" value="right" />
</div>
</body>
</html>
模板：template
模板里面只能有一个根节点，不能有兄弟节点
new Vue({
template:" 选择器"、oTmp
});
<div id="tmp" style="display:none">
模板内容
</div>
<template id="tmp" >
模板内容
</template>
type="text/x-template"
type="x-template"
<script id="tmp" type="text/x-template" >
模板内容
</script>
生命周期 【created/mounted】/updated/destroyed
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
8 个函数
1、初始化
vm.beforeCreate 没有 $el/$data
vm.created 没有 $el 有 $data
2、挂载
vm.beforeMount 有 $el 原始dom 有 $data
vm.mounted 有 $el 虚拟dom 有 $data
3、数据更新
vm.beforeUpdate
vm.updated
4、销毁
vm.beforeDestroy
vm.destroyed
生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
//el:"#app",
data:{a:12,b:5},
template:`<span> {{a}}---{{b}}</span>`,
beforeCreate(){// undefined undefined
console.log("beforeCreate",this.$el,this.$data);
},
created(){//undefined {数据}
console.log("created",this.$el,this.$data);
},
beforeMount(){ //原始dom {数据}
console.log("beforeMount",this.$el,this.$data);
},
mounted(){//虚拟dom {数据}
console.log("mounted",this.$el,this.$data);
},
//vm.a = xxxx;
beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
////vm.$destroy();
beforeDestroy(){
console.log("beforeDestroy");
},
destroyed(){
console.log("destroyed");
},
});
vm.$mount("#app");
</script>
</body>
</html>
