Vue.js之Vue计算属性、侦听器、样式绑定
前言
上一篇介绍了Vue的基本概念，这一篇介绍一下Vue的基本使用。javascript
1、搭建一个Vue程序
1.1 搭建Vue环境
搭建Vue的开发环境总共有三种方法：css
- 引入CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
- 直接下载源码引入
从官网中下载vue.js的源码复制下来便可，而后在页面中引入
地址：https://cn.vuejs.org/v2/guide/installation.html
点击开发版本，直接复制到已经建立好的vue.js的文件当中便可。
- NPM安装
1.2 构建一个Vue实例
1）el（挂载点）
建立一个Vue这个实例去接管页面中的某个Element（元素）。也就是说el代表和页面上
哪个节点作绑定！
2）data
vue实例都有一些数据，咱们把数据都存放在data中。html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue入门</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: '#root',
data: {
msg:'hello world'
}
})
</script>
</body>
</html>
建立一个vue的实例，让这个vue的实例去接管页面中id为root的内容，因此这个vue实例
就和id为root的dom作好了绑定。vue
2、挂载点，模板与实例之间的关系
2.1 挂载点
挂载点是Vue实例中el属性对应的id所对应的一个dom节点。
java
2.2 模板
在挂载点内部的内容都称之为模板内容。npm
<div id="root">
<h1>lance {{msg}}</h1>
</div>
其中：数组
<h1>lance {{msg}}</h1>
就是模板内容啦！
固然咱们能够把模板内容写在vue实例当中：缓存
<body>
<div id="root"></div>
<script>
new Vue({
el: '#root',
template: '<h1>lance {{msg}}</h1>',
data: {
msg:'hello world'
}
})
</script>
</body>
因此说模板你能够写在挂载点内部，固然也能够写在vue实例的template属性当中。app
2.3 实例
其中new Vue({})其实就是建立一个Vue实例。
在实例中你须要指定一个挂载点，把模板写好。vue会自动的根据你的模板和你的数据
自动生成要展现的内容。会把要展现的内容放到挂载点当中。dom
3、Vue中的计算属性、侦听器、计算属性的set与get
3.1 Vue中的计算属性
1）前言
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{firstName}}{{lastName}}</div>
</div>
<script>
new Vue({
el: '#root',
data:{
firstName: '',
lastName: ''
}
})
</script>
效果：
问题：
<div>{{firstName}}{{lastName}}</div>这个很冗余。
2）经常使用场景
fullName是经过firstName和lastName计算而成的一个新的变量。
咱们能够经过Vue的计算属性来解决咱们的需求，在Vue实例中添加一个computed属性。
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: ''
},
computed: {
//何时执行：初始化显示/相关data属性数据发生改变
fullName: function(){
//计算属性的一个方法，方法的返回值做为属性值
return this.firstName+' '+this.lastName;
}
}
})
</script>
fullName是一个计算属性，定义在computed里面表示它是一个计算属性。
它是由firstName和lastName计算出来的。
计算属性只有当里面参与计算的属性各任意一个改变的时候才会去计算，不然使用上
这次计算的缓存。
3.2 侦听器
1）需求
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
<hr />
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
}
})
</script>
效果：
2）实现
首先在vue实例中定义一个侦听器：watch。
<div id="root">
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
<hr />
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
firstName: function(){
this.count++
},
lastName: function(){
this.count++
}
}
})
</script>
效果：
其实监听器的做用是，监听某个数据的变化，一旦这个数据发生变化我就能够在监听器中
作相应的业务处理。
固然在上面的例子中咱们能够直接监听fullName就能够了。
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName+' '+this.lastName;
}
},
watch: {
/* firstName: function(){
this.count++
},
lastName: function(){
this.count++
}*/
fullName: function(){
this.count++
}
}
})
</script>
3.3 计算属性的set与get
1）实例
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
姓名3(双向): <input type="text" placeholder="Full Name3" /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', //若是不定义的话，会形成vm.$watch的()方法会延迟一步
},
computed: {
//何时执行：初始化显示/相关的data属性发生变化
fullName1 (){//计算属性中的一个方法，方法的返回值做为属性值
console.log("111111111111111")
return this.firstName +' '+this.lastName;
}
},
watch: { //配置监视
firstName: function (value) { //监听firstName的变化
console.log(this) //就是vue的实例：vm
this.fullName2 = value +' '+this.lastName;
}
}
});
//全部vm的实例方法都是以$开头的。 注意：在function中能够最多能够传两个值一个是新的，一个是旧的。
vm.$watch('lastName',function (value) {
//更新 fullName2
this.fullName2 = this.firtName +' '+ value;
})
</script>
</body>
效果：
分析：
咱们修改都是基于单向的，也就是咱们只是修改姓、名这两个文本框，
可是咱们修改下面两个文本框是不能实现同步的，那要怎么样实现呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性和监听</title>
</head>
<!--
1.计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示结果
2.监视属性
经过vm对象的$watch(或)watch配置来监视制定的属性。
当属性变化时，回调函数自动调用，在函数内部进行计算。
3.计算属性高级
经过getter/setter实现对属性属性的显示和监视
计算属性存在缓存，屡次读取只执行一次getter计算。
-->
<body>
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br />
名: <input type="text" placeholder="Last Name" v-model="lastName"><br />
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3" /><br />
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B', //若是不定义的话，会形成vm.$watch的()方法会延迟一步
},
computed: {
//何时执行：初始化显示/相关的data属性发生变化
fullName1 (){//计算属性中的一个方法，方法的返回值做为属性值
console.log("111111111111111")
return this.firstName +' '+this.lastName;
},
fullName3 :{
//什么是回调函数？ 1.你定义的 2.你没有调用 3.但最终它执行了
//回调函数你要知道：何时调用？用来作什么？
// 回调函数 当须要读取当前属性值时回调，根据相关的数据计算病返回当前属性的值
get(){
return this.firstName +' '+this.lastName;
},
//回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新的属性数据。
set(value){//value就是fullName3的最新属性值
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: { //配置监视
firstName: function (value) { //监听firstName的变化
console.log(this) //就是vue的实例：vm
this.fullName2 = value +' '+this.lastName;
}
}
})
//全部vm的实例方法都是以$开头的。 注意：在function中能够最多能够传两个值一个是新的，一个是旧的。
vm.$watch('lastName',function (value) {
//更新 fullName2
this.fullName2 = this.firstName +' '+ value;
})
</script>
</body>
</html>
注意：计算属性存在缓存，屡次读取只执行一次getter计算。
4、Vue强制绑定class和style
在应用界面中，当咱们去点击某个按钮或者其余操做的时候，某个（些）元素的样式是变化的。
class/style绑定就是专门用来实现动态样式效果的技术。
4.1 class绑定
语法： :class='xxx'
- xxx是字符串
- xxx是对象
- xxx是数组
4.2 style绑定
:style = "{color: activeColor,fontsize: fontsize + 'px'}"
其中acticeColor/fontsize是data属性
4.3 完整实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue强制绑定class和style</title>
<script src="js/vue.js"></script>
<style>
.aClass {
color: red;
}
.bClass {
color: blue;
}
.cClass {
font-size: 40px;
}
</style>
</head>
<!--
1.理解
在应用界面中，某个（些）元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定： :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
3.style绑定
:style = "{color: activeColor,fontsize: fontsize + 'px'}"
其中acticeColor/fontsize是data属性
-->
<body>
<div id="app">
<h3>1.class绑定： :class= 'xxxx'</h3>
<p class="cClass" :class="a">xxx是字符串</p> //会有 两个类名
<button @click='update'>点击一下字符串</button>
<hr/> //对象中属性值是css的类名，属性值是布尔类型,true表明类名留下。
<p :class="{aClass : isA,bClass : isB}">xxx是对象</p> //只会显示为 true的类名
<button @click='updateObj'>点击一下对象</button>
<hr />
<p :class="['bClass','cClass']">xxx是数组</p>
<h3>2. style绑定</h3>
<p :style="{color: activeColor,fontsize: fontsize + 'px'}">style绑定</p> //style绑定的是对象
<button @click='updateStyle'>style绑定</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'green',
fontsize: '20'
},
methods: {
update() {
this.a = 'bClass';
},
updateObj() {
this.isA = false;
this.isB = true;
},
updateStyle() {
this.activeColor = 'red';
this.fontsize = 30;
}
}
})
</script>
</body>
</html>
相关文章
- 1. vue计算属性VS侦听属性
- 2. vue——计算属性和侦听器
- 3. Vue 计算属性与侦听器
- 4. VUE 计算属性和侦听器
- 5. vue-计算属性和侦听器
- 6. Vue计算属性和侦听器
- 7. vue-计算属性，方法，侦听器
- 8. Vue计算属性与侦听器
- 9. Vue——计算属性&方法&侦听器
- 10. Vue笔记：计算属性&侦听器
- 更多相关文章...
- • WSDL 绑定 - WSDL 教程
- • ASP.NET Web Forms - 数据绑定 - ASP.NET 教程
- • 使用Rxjava计算圆周率
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known
欢迎关注本站公众号,获取更多信息
相关文章
- 1. vue计算属性VS侦听属性
- 2. vue——计算属性和侦听器
- 3. Vue 计算属性与侦听器
- 4. VUE 计算属性和侦听器
- 5. vue-计算属性和侦听器
- 6. Vue计算属性和侦听器
- 7. vue-计算属性，方法，侦听器
- 8. Vue计算属性与侦听器
- 9. Vue——计算属性&方法&侦听器
- 10. Vue笔记：计算属性&侦听器