Vue.js之Vue计算属性、侦听器、样式绑定
前言
上一篇介绍了Vue的基本概念，这一篇介绍一下Vue的基本使用。
一、搭建一个Vue程序
1.1 搭建Vue环境
搭建Vue的开发环境总共有三种方法：
- 引入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中。
<!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做好了绑定。
二、挂载点，模板与实例之间的关系
2.1 挂载点
挂载点是Vue实例中el属性对应的id所对应的一个dom节点。
这个就是挂载点
2.2 模板
在挂载点内部的内容都称之为模板内容。
<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属性当中。
2.3 实例
其中new Vue({})其实就是创建一个Vue实例。
在实例中你需要指定一个挂载点，把模板写好。vue会自动的根据你的模板和你的数据
自动生成要展示的内容。会把要展示的内容放到挂载点当中。
三、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计算。
四、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>
Vue.js之Vue计算属性、侦听器、样式绑定的更多相关文章
- Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- vue.js初探：计算属性和methods
在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...
- Vue.js系列之四计算属性和观察者
一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- vue.js使用之计算属性与方法返回的差别
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@2.4.2&quo ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
随机推荐
- World Finals 2017爆OJ记
Day-Inf: 去年China-Final一道数据结构题的FB送我进WF. 今年课表意外地满,好几天都是早上8点一直上课上到晚上9点,作业也相对较多.敝队大约每个星期只能训练一个下午,有时候甚至一整 ...
- [Codeforces394B]Very Beautiful Number(逆推)
退役了吗? 退役了…… 但是以后也许还不会一下子离开OI吧 因为我真的很喜欢OI啊 只是实力不如人 为了考上一个学OI的高中 要努力啊! [本题] 一道很好的题目了(刷CF题看到的) 和394A一样, ...
- Chars模拟弱网测试
1.打开chars,选择[proxy]-[throttle settings] 2.勾选[enable throttling],并配置.
- Myeclispe下struts-config.xml文件无法图形界面打开
1.今天更改web.xml文件不小心误删了下面的配置文件,导致出现如图的错误 <servlet-mapping> <servlet-name>action</servle ...
- 【转】java日志组件介绍（common-logging，log4j，slf4j，logback ）
common-logging common-logging是apache提供的一个通用的日志接口.用户可以自由选择第三方的日志组件作为具体实现,像log4j,或者jdk自带的logging, comm ...
- 获取gcc和clang的内置宏定义
下面是对Gcc的内置宏定义的解释: https://gcc.gnu.org/onlinedocs/cpp/Common-Predefined-Macros.html https://github.co ...
- Unity的Input输入
Unity中的输入管理器由Input类进行操控.官方文档地址:https://docs.unity3d.com/ScriptReference/Input.html 中文翻译的话可以在这里:http: ...
- SpringBoot无废话入门01：最简SpringBoot应用
虽然本篇讲的是一个最简的SpringBoot应用,但是要说明的是:学习SpringBoot是有门槛的,这个门槛就是, 1:首先得有框架的基础,比如SSM: 2:MAVEN基础. 在学好上面两者的基础上 ...
- set 容器的用法
1.set容器的理解 所有元素都会根据元素的键值自动排序,set元素的键值就是实值,实值就是键值.set不允许两个元素有相同的键值.(set的元素不像map那样可以同时拥有实值(value)和键值(k ...
- docker中mysql数据库的数据导入和导出
导出数据 查看下 mysql 运行名称 docker ps 结果:  执行导出(备份)数据库命令: 由第一步的结果可知,我们的 mysql 运行在一个叫 mysql_server 的 docker ...