Vue:
1.通过数据驱动界面更新,无需操作DOM更新界面
2.组件化开发:将网页拆分成一个个独立的组件编写,再通过封装好的组件拼接成一个完整的页面。
vue的基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue.js文件-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script>
let vue = new Vue({ //创建vue实例对象
el:"#app", //要绑定的标签
data:{
name:"jiaody" //要绑定的内容
}
})
</script>
</body>
</html>
MVVM设计模式
在MVVM设计模式中由3个部分组成
M : Model 数据模型(保存数据, 处理数据业务逻辑)
V : View 视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)
MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M -> VM -> V
也可以从 V -> VM -> M
Vue中MVVM的划分:Vue其实是基于MVVM设计模式的
被控制的区域: View
Vue实例对象 : View Model
实例对象中的data: Model
Vue中数据的单向传递:
“数据"交给"Vue实例对象”, “Vue实例对象"将数据交给"界面”
Model -> View Model -> View
<!--这里就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "李南江"
}
});
</script>
Vue中数据的双向传递:
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定
注意点: v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
而总是将 Vue 实例的数据作为数据来源
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
let vue = new Vue({ //创建vue实例对象
el:"#app", //要绑定的标签
data:{
msg:'双向绑定数据'
}
})
</script>
</body>
v-once
只渲染一次,给标签添加v-once,当数据发生变化时,该标签中的数据不变
<body>
<div id="app">
<p v-once>只渲染一次:{{name}}</p>
<p>当前数据:{{name}}</p>
</div>
<script>
let vue = new Vue({ //创建vue实例对象
el:"#app", //要绑定的标签
data:{
name:'aaaaa'
}
})
</script>
</body>
v-cloak
数据渲染之后自动显示元素
1.Vue数据绑定过程
1.1会先将未绑定数据的界面展示给用户
1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
1.3最后再将绑定数据之后的HTML渲染到界面上
正是在最终的HTML被生成渲染之前会先显示模板内容
所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容
2.如何解决这个问题
利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面
等到生成HTML渲染之后再重新显示
v-text和v-html
通过插值和v-text的方式不能解析html
<body>
<div id="app">
<p v-text="msg">---</p>
</div>
<script>
let vue = new Vue({ //创建vue实例对象
el:"#app", //要绑定的标签
data:{
name:'aaaaa',
msg:"<span>这是一个html标签</span>"
}
})
</script>
</body>
通过v-html可以解析html:
<body>
<div id="app">
<p v-html="msg">---</p>
</div>
<script>
let vue = new Vue({ //创建vue实例对象
el:"#app", //要绑定的标签
data:{
name:'aaaaa',
msg:"<span>这是一个html标签</span>"
}
})
</script>
</body>
v-if
条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素
如果条件不满足根本就不会创建这个元素
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容
v-else不能单独出现
v-if和v-else中间不能出现其它内容
- v-if可以从模型中获取数据:
<body>
<div id="app">
<p v-if="show">我是true</p>
<p v-if="hidden">我是false</p> //条件不满足,不会创建该标签
</div>
<script>
let vue = new Vue({ //创建vue实例对象
el:"#app", //要绑定的标签
data:{
show:true,
hidden:false
}
})
</script>
</body>
2. 可以直接赋值一个表达式:
<body>
<div id="app">
<p v-if="score >= 80">优秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
</div>
<script>
let vue = new Vue({ //创建vue实例对象
el:"#app", //要绑定的标签
data:{
score:75
}
})
</script>
</body>
v-show
v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示
v-if和v-show区别:
- v-if: 只要取值为false就不会创建元素
- v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none
v-if和v-show应用场景:
- 由于取值为false时v-if不会创建元素, 所以如果需要切换元素的显示和隐藏, 每次v-if都会创建和删除元素
- 由于取值为false时v-show会创建元素并设置display为none, 所有如果需要切换元素的显示和隐藏,不会反复创建和删除, 只是修改display的值
- 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if
<body>
<div id="app">
<p v-show="show">我是显示</p>
<p v-show="hidden">我是隐藏</p>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
show:true,
hidden:false
}
})
</script>
</body>
v-for
可以遍历 数组, 字符, 数字, 对象
<body>
<div id="app">
<ul>
<li v-for="(value,key) in obj">{{key}}---{{value}}</li>
</ul>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
obj:{
name: "lnj",
age: 33,
gender: "man",
class: "知播渔"
}
}
})
</script>
</body>
v-bind
- 不能通过插值给元素的属性绑定数据
- 通过v-model可以将数据绑定到input标签的value属性上,但v-model只适用于表单标签
- v-bind专门用于给元素的属性绑定数据
- 格式:
v-bind:属性名称=“绑定的数据”
简写形式 :属性名称=“绑定的数据”
<body>
<div id="app">
<input type="text" v-bind:value="name">
<input type="text" :value="name2">
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
name:'jiaody',
name2:'aaaaa'
}
})
</script>
</body>
v-bind绑定类名
:class="[‘需要绑定类名’, …]"
通过v-bind给class绑定类名, 不能直接赋值,必须把类名放在数组中
将类名放到数组中之后, 还需要利用引号将类名括起来才会去style中查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue.js文件-->
<script src="js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.size{
font-size: 100px;
}
.color{
color: red;
}
.active{
background: skyblue;
}
</style>
</head>
<body>
<div id="app">
<p :class="['size','color','active']">ppppp</p>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
name:'jiaody',
name2:'aaaaa'
}
})
</script>
</body>
</html>
可以通过对象来决定是否需要绑定–》格式: {‘需要绑定的类名’ : 是否绑定}
<div id="app">
<p :class="['size','color',{'active':false}]">ppppp</p>
</div>
可以使用Model中的对象来替换数组
<body>
<div id="app">
<p :class="obj">ppppp</p>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
obj:{
'size':true,
'color':false,
'active':false
}
}
})
</script>
</body>
v-bind绑定样式
- 将数据放到对象中:
<div id="app">
<p :style="{color:'red','font-size':'50px'}">ppppp</p>
</div>
2. 将数据放到Model对象中
如果Model中保存了多个样式的对象,想将这多个对象中的样式都赋值给某标签,则将这些对象保存在数组中传递给style
<body>
<div id="app">
<p :style="[obj1,obj2]">ppppp</p>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
obj1:{
'color':'yellow'
},
obj2:{
'background-color':'blue'
}
}
})
</script>
</body>
v-on
给元素绑定监听事件,在指定事件名称的时候不需要写on。
当绑定的事件被触发后, 会调用Vue实例的methods对象中对应的回调函数
格式:
- v-on:事件名称=“回调函数名称”
- @事件名称=“回调函数名称”
- 可以给回调函数添加参数
<body>
<div id="app">
<button @click="func('jiaody',23)">按钮</button>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
},
methods:{
func(name,age){
alert(name+age)
}
}
})
</script>
</body>
v-on修饰符
1 .once - 只触发一次回调。
默认情况下,事件的回调函数会反复执行:只要事件被触发就会执行
添加 .once只执行一次回调函数
<body>
<div id="app">
<button @click.once="func">按钮</button>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
},
methods:{
func(){
alert('回调函数执行')
}
}
})
</script>
</body>
2 .prevent - 调用 event.preventDefault()。阻止默认行为(一般用于超链接点击后跳转等)
<div id="app">
<a href="http://www.it666.com" @click.prevent="func">超链接</a> //点击后执行回调你函数,但不会跳转到href中指定的页面
</div>
3 .stop - 调用 event.stopPropagation()。阻止事件冒泡
在嵌套的元素中,如果这些元素都添加了相同的事件,默认情况下会有事件冒泡–从里到外依次执行事件的回调函数,使用 .stop可阻止事件冒泡
4 .self - 只当事件是从绑定的元素本身触发时才触发回调。
5. .capture - 触发事件捕获。
6. 按键修饰符
通过按键修饰符监听特定按键触发的事件,例如: 可以监听当前事件是否是回车触发等
<body>
<div id="app">
<input type="text" @keyup.enter="func">
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
},
methods:{
func(){
alert('enter')
}
}
})
</script>
</body>
可以自定义按键修饰符:
keycode对照表
<body>
<div id="app">
<input type="text" @keyup.f12="func">
</div>
<script>
Vue.config.keyCodes.f12 = 123;
let vue = new Vue({
el:"#app",
data:{
},
methods:{
func(){
alert('enter')
}
}
})
</script>
</body>
自定义全局指令
在任何一个Vue实例控制的区域中都可以使用。
Vue.directive(‘自定义指令名称’, {
// bind: 指令被绑定到元素上的时候执行 (用于添加样式)
// inserted: 绑定指令的元素被添加到父元素上的时候执行 (用于添加事件)
生命周期名称: function (el) {
//el是el就是被绑定指令的那个元素
指令业务逻辑代码
}
})
<body>
<div id="app">
<input type="text" v-focus>
<p v-color>这是一个p</p>
</div>
<script>
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
});
Vue.directive('color',{
bind:function(el){
el.style.color='red';
}
})
let vue = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
在bind函数中,第二个参数是对象,用来接收传递的数据
<body>
<div id="app">
<p v-color="color">这是一个p</p>
</div>
<script>
Vue.directive('color',{
bind:function(el,obj){
el.style.color=obj.value;
}
})
let vue = new Vue({
el:"#app",
data:{
color:'yellow'
}
})
</script>
</body>
自定义局部指令
只能在自定义的那个Vue实例中使用。
给创建Vue实例时传递的对象添加
directives: {
// key: 指令名称
// value: 对象
‘color’: {
bind: function (el, obj) {
el.style.color = obj.value;
}
}
}
<body>
<div id="app1">
<p v-color="color">这是一个p</p>
</div>
<div id="app2">
<p v-color="color">这是一个p</p>
</div>
<script>
let vue1 = new Vue({
el:"#app1",
data:{
color:'yellow'
}
})
let vue2 = new Vue({
el:'#app2',
data:{
color:'red'
},
directives:{
'color':{
bind:function(el,obj){
el.style.color = obj.value
}
}
}
})
</script>
</body>