1540394364528
mvvm模式
image-20201001110548401
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
mvvm模式的优势:
视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化时Model可以不变,当Model变化时View也可以不变
可以把一些视图逻辑放在一个ViewModel里面,让多个View重用这段视图逻辑代码
开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
而我们今天要学习的,就是一款MVVM模式的框架:Vue
下载地址:https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压,得到vue.js文件。可以在页面中直接通过script引入vue.js文件
或者也可以直接使用公共的CDN服务:
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{name}},非常酷!</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试"
}
});
</script>
</body>
</html>
new Vue()
来创建Vue
实例name
:这里指定了一个name
属性element
的缩写,通过id
选中要渲染的页面元素,本例中是一个 div
h2
元素中,通过{{name}}
的方式,来渲染刚刚定义的 name
属性更神奇的在于,当你修改name
属性时,页面会跟着变化。
对刚才的案例进行简单修改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}},非常酷!
有{{num}}个酷炫功能!
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});
</script>
</body>
</html>
data
中添加了新的属性:num
input
元素,通过 v-model
与 num
进行绑定{{num}}
在页面输出可以观察到,输入框的变化引起了data
中的num
的变化,同时页面输出也跟着变化。
input
与num
绑定,input
的value
值变化,影响到了data
中的num
值{{num}}
与数据num
绑定,因此num
值变化,引起了页面效果变化。没有任何dom
操作,这就是双向绑定的魅力。
在页面添加一个按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点我</button>
<h2>
{{name}},非常酷!
有{{num}}个酷炫功能!
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});
</script>
</body>
</html>
v-on
指令绑定点击事件,而不是普通的 onclick
,然后直接操作num
onclick
是无法直接操作num
的每个 Vue
应用都是通过用 Vue
函数创建一个新的 Vue
实例开始的:
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
接下来,一一介绍。
每个Vue
实例都需要关联一段Html
模板,Vue
会基于此模板进行视图渲染;可以通过el属性来指定。
例如一段html模板:
<div id="app">
</div>
然后创建Vue
实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue
就可以基于id
为 app
的div
元素作为模板进行渲染了。在这个div
范围以外的部分是无法使用vue
特性的。
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"ZHANGSAN"
}
})
name
的变化会影响到 input
的值input
中输入的值,也会导致vm
中的name
发生改变Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="add">点我</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {},
methods: {
add: function () {
console.log("点我了...233")
}
}
});
</script>
</body>
</html>
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。
20200710065238953
每个 Vue 实例在被创建之前都要经过一系列的初始化过程
生命周期函数 | 含义 |
---|---|
beforeCreate(vue对象创建前) | 组件实例刚被创建,组件属性计算之前,比如data属性等 |
created(创建后) | 模板编译、挂载之前 |
mounted(载入后) | 模板编译、挂载之后 |
beforeUpdate(更新前) | 组件更新之前 |
updated(更新后) | 组件更新之后 |
beforeDestroy(销毁前) | 组件销毁前调用 |
destroyed(销毁后) | 组件销毁后调用 |
vm.$el :Vue 实例使用的根 DOM 元素 vm.$root :当前的 Vue 实例。
Vue在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作,我们先看下面执行的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs生命周期</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function () {
console.log(this);
showData('创建vue实例前', this);
},
created: function () {
showData('创建vue实例后', this);
},
beforeMount: function () {
showData('挂载到dom前', this);
},
mounted: function () {
showData('挂载到dom后', this);
},
beforeUpdate: function () {
showData('数据变化更新前', this);
},
updated: function () {
showData('数据变化更新后', this);
},
beforeDestroy: function () {
showData('vue实例销毁前', this);
},
destroyed: function () {
showData('vue实例销毁后', this);
}
});
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
}
</script>
</body>
</html>
例如:created
代表在vue实例创建后;
可以在Vue
中定义一个created
函数,代表这个时期的构造函数:
创建示例html页面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
// 初始化为空
msg: ""
},
// 钩子函数
created() {
// this 表示Vue实例
this.msg = "hello vue.created";
console.log(this)
}
});
</script>
</body>
</html>
可以看下在vue内部的this变量是谁,在created的时候,打印this
var app = new Vue({
el:"#app",
data:{
msg: ""
},
//钩子函数
created() {
//this表示vue实例
this.msg = "hello vue. created.";
console.log(this);
}
});
控制台的输出;
总结:this 就是当前的Vue实例,在Vue对象内部,必须使用 this 才能访问到Vue中定义的data内属性、方法等。
可以发起后端数据请求,取回数据 可以接收页面之间传递的参数 可以子组件向父组件传递参数等
什么是指令?
指令 (Directives) 是带有 v-
前缀的特殊属性。例如在入门案例中的v-model
,代表双向绑定。
格式:
{{表达式}}
说明:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
msg: "hello vue."
}
});
</script>
</body>
</html>
使用{{}}
方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的 {{}}
,加载完毕后才显示正确数据,称为插值闪烁。解决办法是通过v-text和v-html替换
使用v-text
和v-html
指令来替代 {{}}
说明:
v-text
:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出v-html
:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染示例,改造原页面内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--{{msg}}-->
v-text:<span v-text="msg"></span><br/>
v-html:<span v-html="msg"></span><br/>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
// msg: "hello vue."
msg: "<h2>hello vue.</h2>"
}
});
</script>
</body>
</html>
并且不会出现插值闪烁,当没有数据时,会显示空白。
刚才的v-text
和v-html
可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。
接下来学习的v-model
是双向绑定,视图(View
)和模型(Model
)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。
目前v-model
的可使用元素有:
基本上除了最后一项,其它都是表单的输入项。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br/>
<input type="checkbox" value="PHP" v-model="language">PHP<br/>
<input type="checkbox" value="Swift" v-model="language">Swift<br/>
<h2>
你选择了:{{language.join(",")}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
language: []
}
});
</script>
</body>
</html>
checkbox
对应一个model
时,model
的类型是一个数组,单个checkbox
值是boolean类型radio
对应的值是input的value值input
和 textarea
默认对应的model是字符串select
单选对应字符串,多选对应也是数组v-on
指令用于给页面元素绑定事件。
语法:
v-on:事件名="js片段或函数名"
简写语法:
@事件名="js片段或函数名"
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--直接写js片段-->
<button @click="num++">增加</button>
<!--使用函数名,该函数必须要在vue实例中定义-->
<button @click="decrement">减少</button>
<h2>
num={{num}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
}
}
});
</script>
</body>
</html>
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。
尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
:阻止事件冒泡.prevent
:阻止默认事件发生.capture
:使用事件捕获模式.self
:只有元素自身触发事件才执行。(冒泡或捕获的都不执行).once
:只执行一次示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--直接写js片段-->
<button @click="num++">增加</button>
<!--使用函数名,该函数必须要在vue实例中定义-->
<button @click="decrement">减少</button>
<h2>
num={{num}}
</h2>
<hr>
事件冒泡测试:<br/>
<div style="background-color: lightblue;width: 100px;height: 100px" @click="print('div被点击了')">
<button @click.stop="print('点击了button')">点我试试</button>
</div>
<br>阻止默认事件:<br>
<a href="http://www.baidu.com" @click.prevent="print('点击了超链接')">百度</a>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
},
print(str) {
console.log(str);
}
}
});
</script>
</body>
</html>
遍历数据渲染页面是非常常用的需求,Vue中通过v-for
指令来实现。
语法:
v-for="item in items"
items
:要遍历的数组,需要在vue的data中定义好。item
:循环变量示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
]
}
});
</script>
</body>
</html>
在遍历的过程中,如果需要知道数组角标,可以指定第二个参数:
语法:
v-for="(item,index) in items"
示例:
<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
v-for
除了可以迭代数组,也可以迭代对象。语法基本类似
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<!--1个参数时,得到的是对象的值-->
<li v-for="value in person">
{{value}}
</li>
</ul>
<hr>
<ul>
<!--2个参数时,第一个是值,第二个是键-->
<li v-for="(value,key ) in person">
{{value}}--{{key}}
</li>
</ul>
<hr>
<ul>
<!--3个参数时,第三个是索引,从0开始-->
<li v-for="(value,key,index ) in person">
{{value}}--{{key}} -- {{index}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
],
person: {"name": "zhangsan", "age": 13, "gender": "男", "address": "中国"}
}
});
</script>
</body>
</html>
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
如果使用key这个功能可以有效的提高渲染的效率;key一般使用在遍历完后,又增、减集合元素的时候更有意义。
但是要实现这个功能,你需要给Vue一些提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。也就是key是该的唯一标识。
示例:
<ul>
<li v-for="(item,index) in items" :key="index"></li>
</ul>
:key=""
后面会讲到,它可以让你读取vue中的属性,并赋值给key属性v-if
,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
语法:
v-if="布尔表达式"
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true
}
});
</script>
</body>
</html>
当v-if
和v-for
出现在一起时,v-for
优先级更高。也就是说,会先遍历,再判断条件。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul>
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
可以使用 v-else
指令来表示 v-if
的“else 块
”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。v-else-if
,顾名思义,充当 v-if 的“else-if 块
”,可以连续使用:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
类似于 v-else
, v-else-if
也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
另一个用于根据条件展示元素的选项是 v-show
指令。用法大致一样:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display
。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<h2 v-show="show">
你好,世界!
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
看这样一个案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
color: white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div :class="">
点击按钮改变背景颜色
</div>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
color: "red"
}
});
</script>
</body>
</html>
解读:
class
为空,希望实现点击按钮后,div的class样式会在.red和.blue之间切换该如何实现?
大家可能会这么想,既然color值会动态变化为不同的class名称,那么我们直接把color注入到class属性就好了,于是就这样写:
<div class="{{color}}"></div>
这样写是错误的!因为插值表达式不能用在标签的属性中。
此时,Vue提供了一个新的指令来解决:v-bind
,语法:
v-bind:属性名="Vue中的变量"
例如,在这里我们可以写成:
<div v-bind:class="color"></div>
不过,v-bind
太麻烦,因此可以省略,直接写成:
,:属性名='属性值'
,即:
<div :class="color"></div>
上面虽然实现了颜色切换,但是语法却比较啰嗦。
Vue对class属性进行了特殊处理,可以接收数组或对象格式
对象语法:可以传给 :class
一个对象,以动态地切换 class:
<div :class="{ red: true,blue:false }"></div>
之前的案例可以改写成这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
color: white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<!--v-bind 简写为 :-->
<div :class="color">
点击按钮改变背景颜色
</div>
<hr>
<br>
<button @click="bool=!bool">点我改变下面色块的颜色</button>
<div :class="{red:bool, blue:!bool}">
点击按钮改变背景颜色
</div>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
color: "red",
bool:true
}
});
</script>
</body>
</html>
首先class绑定的是一个对象:{red:bool, blue: !bool}
red和blue两个样式的值分别是bool和!bool,也就是说这两个样式的生效标记恰好相反,一个生效,另一个失效。
bool默认为true,也就是说默认red生效,blue不生效
现在只需要一个按钮即可,点击时对bool取反,自然实现了样式的切换
在插值表达式中使用js表达式是非常方便的,而且也经常被用到。
但是如果表达式的内容很长,就会显得不够优雅,而且后期维护起来也不方便,例如下面的场景,有一个日期的数据,但是是毫秒值:
data:{
birthday:1429032123201 // 毫秒值
}
在页面渲染,希望得到yyyy-MM-dd的样式则需要如下处理:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
你的生日是:
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
birthday: 1429032123201
}
});
</script>
</body>
</html>
虽然能得到结果,但是非常麻烦。
Vue中提供了计算属性,来替代复杂的表达式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
你的生日是:
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
<hr>
<h2>
computed计算方式;你的生日为:{{birth}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
birthday: 1429032123201
},
computed: {
birth() {
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();
}
}
});
</script>
</body>
</html>
计算属性本质就是方法,但是一定要返回数据。然后页面渲染时,可以把这个方法当成一个变量来使用。
官方说法:Vue.js 允许你自定义过滤器,可被用于一些常见的==文本格式化==。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。
通俗的来说:过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。
过滤器的种类:
全局过滤器
Vue.filter('过滤器名称', function (value[,param1,...] ) {
//逻辑代码
})
局部过滤器
new Vue({
filters: {
'过滤器名称': function (value[,param1,...] ) {
// 逻辑代码
}
}
})
{{ 表达式 | 过滤器名字}}
<body>
<div id="myDiv">
{{birthday | dateFormat }}
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script> // 需要引入一个日期处理的一个工具类
<script type="text/javascript">
// 定义过滤器
Vue.filter("dateFormat",function(value){
return moment(value).format("YYYY-MM-DD HH:mm:ss");
});
const app = new Vue({
el: "#myDiv",
data: {
birthday: new Date()
}
});
</script>
</body>
<body>
<div id="myDiv">
{{message | messageFormat}} <br/>
{{message }} // 值并没有改变
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
Vue.filter("messageFormat",function(value){
return value.replace("很棒","优秀");
});
const app = new Vue({
el: "#myDiv",
data: {
message: "HelloWorld,是一个很棒的青年"
}
});
</script>
</body>
<body>
<div id="myDiv">
{{birthday | dateFormat }} <br/> // 不传递格式化标准就用完整写法
{{birthday | dateFormat("YYYY-MM-DD") }} // 传入了格式化标准就用传递的写法进行格式化
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script>
<script type="text/javascript">
Vue.filter("dateFormat",function(value,pattern = "YYYY-MM-DD HH:mm:ss"){
return moment(value).format(pattern);
});
const app = new Vue({
el: "#myDiv",
data: {
birthday: new Date()
}
});
</script>
</body>
watch
可以让我们监控一个值的变化。从而做出相应的反应。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message">
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
message: "hello vue"
},
watch: {
message(newValue, oldValue) {
console.log("新值:" + newValue + ";旧值:" + oldValue)
}
}
});
</script>
</body>
</html>
如果监控的是一个对象,需要进行深度监控,才能监控到对象中属性的变化,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<hr>
<br>
<input type="text" v-model="person.name"><br>
<input type="text" v-model="person.age">
<button @click="person.age++">+</button>
<h2>
姓名为:{{person.name}};年龄为:{{person.age}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
message: "hello vue",
person: {"name": "zhangsan", "age": 12}
},
watch: {
message(newValue, oldValue) {
console.log("新值:" + newValue + ";旧值:" + oldValue)
},
person: {
// 开启深度监控,可以监控到对象属性值的变化
deep: true,
// 监控的处理办法
handler(obj) {
console.log("name = " + obj.name + ", age=" + obj.age);
}
}
}
});
</script>
</body>
</html>
变化:
以前定义监控时,person是一个函数,现在改成了对象,并且要指定两个属性:
deep
:代表深度监控,不仅监控person变化,也监控person中属性变化handler
:就是以前的监控处理函数在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。
我们通过Vue的component方法来定义一个全局组件。
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义全局组件,两个参数:1,组件名称。2,组件参数
Vue.component("counter",{
template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})
</script>
定义好的组件,可以任意复用多次:
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
你会发现每个组件互不干扰,都有自己的count值。怎么实现的?
组件的data属性必须是函数!
当我们定义这个counter组件时,它的data 并不是像这样直接提供一个对象:
data: {
count: 0
}
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则,点击一个按钮就会影响到其它所有实例!
一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。
因此,对于一些并不频繁使用的组件,我们会采用局部注册。
我们先在外部定义一个对象,结构与创建组件时传递的第二个参数一致:
const counter = {
template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
data(){
return {
count:0
}
}
};
然后在Vue中使用它:
var app = new Vue({
el:"#app",
components:{
counter:counter // 将定义的对象注册为组件
}
})
通常一个单页应用会以一棵嵌套的组件树的形式来组织:
image-20201001195026231
各个组件之间以嵌套的关系组合在一起,那么这个时候不可避免的会有组件间通信的需求。
父组件使用子组件,并自定义了title属性:
<div id="app">
<h1>打个招呼:</h1>
<!--使用子组件,同时传递title属性-->
<introduce title="父组件传递的消息"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("introduce",{
// 直接使用props接收到的属性来渲染页面
template:'<h1>{{title}}</h1>',
props:['title'] // 通过props来接收一个父组件传递的属性
})
var app = new Vue({
el:"#app"
})
</script>
我们定义一个子组件,并接受复杂数据:
const myList = {
template: '\
<ul>\
<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
</ul>\
',
props: {
items: {
type: Array,
default: [],
required: true
}
}
};
我们在父组件中使用它:
<div id="app">
<h2>百知已开设如下课程:</h2>
<!-- 使用子组件的同时,传递属性,这里使用了v-bind,指向了父组件自己的属性lessons -->
<my-list :items="lessons"/>
</div>
var app = new Vue({
el:"#app",
components:{
myList // 当key和value一样时,可以只写一个
},
data:{
lessons:[
{id:1, name: 'java'},
{id:2, name: 'python'},
{id:3, name: 'ui'},
]
}
})
来看这样的一个案例:
<div id="app">
<h2>num: {{num}}</h2>
<!--使用子组件的时候,传递num到子组件中-->
<counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("counter", {// 子组件,定义了两个按钮,点击数字num会加或减
template:'\
<div>\
<button @click="num++">加</button> \
<button @click="num--">减</button> \
</div>',
props:['num']// count是从父组件获取的。
})
var app = new Vue({
el:"#app",
data:{
num:0
}
})
</script>
我们尝试运行,好像没问题,点击按钮试试:
image-20201001200426862
子组件接收到父组件属性后,默认是不允许修改的。怎么办?
既然只有父组件能修改,那么加和减的操作一定是放在父组件:
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
但是,点击按钮是在子组件中,那就是说需要子组件来调用父组件的函数,怎么做?
我们可以通过v-on指令将父组件的函数绑定到子组件上:
<div id="app">
<h2>num: {{num}}</h2>
<counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>
在子组件中定义函数,函数的具体实现调用父组件的实现,并在子组件中调用这些函数。当子组件中按钮被点击时,调用绑定的函数:
Vue.component("counter", {
template:'\
<div>\
<button @click="plus">加</button> \
<button @click="reduce">减</button> \
</div>',
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
如果你觉得这篇内容对你挺有有帮助的话: