绑定属性
v-bind 动态绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgURL" alt="mm">
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
imgURL: 'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E5%A3%81%E7%BA%B8&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=undefined&latest=undefined©right=undefined&cs=4076493291,331486562&os=2930963262,531608254&simid=3400838867,377633000&pn=0&rn=1&di=78870&ln=2078&fr=&fmq=1526269427171_R&fm=&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fuploads.5068.com%252Fallimg%252F1712%252F144-1G209191R5.jpg%26refer%3Dhttp%253A%252F%252Fuploads.5068.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1636096525%26t%3Dc22525defd81066e0a4d1e28ddde5056&rpstart=0&rpnum=0&adpicid=0&nojc=undefined'
}
})
</script>
</body>
</html>
v-bind语法糖
<img :src="imgURL" alt="mm">
动态绑定class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: aqua;
}
</style>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 :class="active">{{message}}</h2>
<!--<h2 v-bind:class="{类名1: true,类名2: boolean}">{{message}}</h2>>-->
<!--修改布尔值判断类是否加进去-->
<h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
isActive: 'true',
isLine: 'true'
},
methods: {
btnClick: function() {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
v-bind绑定style
利用v-bind动态绑定css样式
- 对象语法
- 数组语法
对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--属性值加单引号,vue会作为变量解析-->
<h2 :style="{fontSize: '50px' }">{{message}}</h2>
<!--动态绑定-->
<h2 :style="{fontSize: finalSize + 'px' ,color: finalColor}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
finalSize: 100 ,
finalColor: 'pink'
},
methods: {
getStyle: function() {
return {fontSise: this.finalSize + 'px' ,backgroundColor: this.finalColor}
}
}
})
</script>
</body>
</html>
数组语法
<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
data:{
message:'hello',
baseStyle: {backgroundColor: 'yellow'},
baseStyle1: {fontSize: '100px'}
},
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{getFullName()}}</h2>
<!--计算属性不需要加括号-->
<h2>{{fullName}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
firstName: 'Lebron',
lastName: 'James'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>总价格: {{totalPrice}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
books: [
{id: 110, name: 'Unix编程技术 ', price: 119},
{id: 111, name: '代码大全 ', price: 109},
{id: 112, name: '深入理解计算机原理 ', price: 98},
{id: 113, name: '现代操作系统 ', price: 122}
]
},
computed: {
totalPrice: function () {
let result = 0;
for (let i=0; i<this.books.length; i++){
result += this.books[i].price
}
return result
}
}
})
</script>
</body>
</html>
计算属性的setter和getter
计算属性的本质
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
fullName: {
//一般没有get方法,只读属性
set: function (newValue) {
// console.log('-------',newValue)
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
</body>
</html>
计算属性和methods的对比
计算属性性能高于methods,计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。
三、ES6语法补充
let/var
块级作用域
js中使用var来声明一个变量时,变量的作用域主要是和函数的定义有关
针对其他块定义来说是没有作用的,比如if/for等,这在我们开发中往往会引起一些问题
(可使用闭包解决问题----函数是一个作用域)
const的使用
将标识符设置为常量,不可以再次赋值(指向对象不能修改),可以改变对象内部属性
const定义标识符,必须进行赋值
在ES6开发中优先使用const,只有需要改变某一个标识符时才使用let
对象增强写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//ES5
let name = 'why';
let age = 18;
let obj1 = {
name: name,
age: age
}
console.log(obj1);
//ES6属性增强写法
let obj2 = {
name,age
}
console.log(obj2);
//ES5
const obj = {
run: function () {
},
eat: function () {
}
}
//ES6函数增强写法
const obj = {
run() {
},
eat() {
}
}
</script>
</body>
</html>