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实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
随机推荐
- shell脚本使用技巧4--读取字符,重复执行
ls | cat -n > out.txt 给输出的信息加行号并导出到out.txt 利用shell生成一个独立的进程 pwd; (cd /bin; ls); pwd; 开启一个子shell,不 ...
- yii2 配合bootstrap添加一个气泡
添加一个气泡 1.bootstrap 官网:http://getbootstrap.com/ 2.bootstrap 中文官网:http://v3.bootcss.com/ 添加气泡主要需要用到 bo ...
- 函数(二)：input、raw_input、lambda、repr、map、filter、reduce、eval、exec、range、xrange
一.input()和raw_input(): input()支持用户输入数字或表达式,按类型存或存表达式的计算结果 raw_input():输入所有内容当成字符串存 二.lambda函数:匿名函数 l ...
- js小题目（持续更新）
总是感觉之前做过的问题很久没碰的话就会忘掉,于是打算专门开一个记录小题目的随笔当题典用. 目录 五种主要数据类型进行值复制 数组去重 数组去重并计数 实现clone()方法,对五种主要数据类型进行值复 ...
- sencha touch 学习汇总(转)
1.官方网站:http://www.sencha.com/products/touch/ 2.在线文档:http://docs.sencha.com/touch/2.2.1/ 3.在线翻译文档:htt ...
- 【二分图最大匹配】Bullet @山东省第九届省赛 B
时间限制: 6 Sec 内存限制: 128 MB 题目描述 In GGO, a world dominated by gun and steel, players are fighting for t ...
- 【组合数】微信群 @upcexam6016
时间限制: 1 Sec 内存限制: 128 MB 题目描述 众所周知,一个有着6个人的宿舍可以有7个微信群(^_^,别问我我也不知道为什么),然而事实上这个数字可以更大,因为每3个或者是更多的人都可以 ...
- jQuery 学习01——定义、安装引用、语法、选择器及事件
什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HT ...
- Java入门学习笔记
Hello.java public class Hello { public static void main(String[] args) { System.out.println("He ...
- arcgis 获得工具箱工具的个数
import arcgisscripting import string; gp = arcgisscripting.create(9.3); ##多少个工具箱 toolboxes = gp.list ...