本文目录
一、运用第一篇所学做个小案例
1. 案例需求分析
- 一个简单的相加计算器
- 两个输入框,计算两个输入框的值
- 有一个相加按钮,每次点击将两个值的和渲染到页面
2.小案例实现
1.小案例功能预览
非常简单的小案例,实现两数之和,好的接下来我们来实现它。
2.小案例代码展示解读
好的我们在vue-base
文件夹下创建02vue.html
,键入如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.calc {
width: 600px;
border: 1px solid #ccc;
margin: 60px auto 0;
padding: 20px;
}
.group {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app" class="calc">
<div class="group">
<label>数值1:</label>
<input type="number" v-model="augend">
</div>
<div class="group">
<label>数值2:</label>
<input type="number" v-model="addend">
</div>
<button @click="sumHandler">求和</button>
<div>两数和为: <span>{{sum}}</span></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
augend: '',
addend: '',
sum: ''
},
methods: {
sumHandler () {
this.sum = parseInt(this.augend) + parseInt(this.addend)
}
}
})
</script>
</body>
</html>
代码解读:
- 好的我们首先写了2个
input
框,并且都用到了v-model
双向数据绑定,接着在data
字段中定义它们默认都为空字符串。 - 定义了两数之和
sum
初始值也为空字符串。 - 在按钮处绑定了点击事件,在每次点击的时候触发
sumHandler
函数,里面直接两数的值相加,用了parseInt
去转成整数,否则会变成字符串的拼接。
3.总结
Vue
的双向数据绑定运用- 事件的绑定运用
- 插件表达式的使用
parseInt
的使用
二、Vue模板语法
1.属性绑定
1.Vue动态处理属性指令
采用指令v-bind
,也可简写为:
2.Vue动态处理属性演示
1.演示
2.代码展示与解读
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<a :href="url">{{name}}</a>
<button @click="clickFunc">点击改变</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
url: 'https:www.baidu.com',
name: '百度一下'
},
methods: {
clickFunc () {
this.url = 'https://blog.csdn.net/weixin_44103733'
this.name = 'Counterrr的博客'
}
}
})
</script>
</body>
</html>
代码解读:
- 好的这边属性的绑定我们采用这种
:
简写的方法,当然也可以写成v-bind:
- 我们绑定了
a
标签的href
属性,那要注意这边跟插值表达式不一样,这边是属性的绑定,所以不要双大花括号。 a
标签里面的文本采用插值表达是,渲染name
,name
初始值为 百度一下,那么按标签的默认事件点击会跳转到百度首页。- 那我们在按钮绑定了点击事件处理函数
clickFunc
,当我们点击按钮时,data
里面的字段都被替换成我们想要的内容,当我们再次点击a
,它的href
属性已发生改变,所以会跳到我的博客界面。
2.双向数据绑定原理实现
1.演示
2.代码实现与解读
前面我们说过要自己来实现下双向数据绑定,现在我们学了事件以及事件对象,就可以来实现了,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.active {
color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{des}}</div>
<input :value="des" @input="inputHandler" type="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
des: '我是Counterrr'
},
methods: {
inputHandler (event) {
this.des = event.target.value
}
}
})
</script>
</body>
</html>
代码解读:
- 我们在
input
框上动态绑定了value
值 - 然后在
input
框上监听了input
事件,并绑定函数inputHandler
- 在
inputHandler
函数中让input
框上动态绑定了value
值等于每次输入的值
实现了v-model
指令底层原理,当然我们这边只是演示原理,真正开发还是用到v-model
指令。
3.class样式绑定
1.效果预览
2.代码实现与解读
1.对象语法代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red
}
.default {
font-size: 16px;
}
</style>
</head>
<body>
<div id="app">
<h3 :class="{active: isActive}">样式属性</h3>
<button @click="clickHandler">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
isActive: true
},
methods: {
clickHandler () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
代码解读:
- 对
class
进行属性绑定,注意这边是写成对象形式。 active
这个类有没有是根据后面值是true
还是false
- 如果有多个类名也是类似以键值对的形式的加上去。
2.数组语法代码如下
上面代码修改body
标签里面的内容为:
<div id="app">
<h3 :class="[isActive]">样式属性</h3>
<button @click="clickHandler">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
isActive: 'active'
},
methods: {
clickHandler () {
this.isActive = ''
}
}
})
</script>
代码解读:
- 注意我们现在是通过数组的形式进行样式的绑定。
isActive
直接等于样式的类名。 - 然后通过按钮点击让
isActive
变为空样式的类名就没有了,从而没有相对应的样式。
3.对象语法与数组语法混合使用代码如下
<div id="app">
<h3 class="default" :class="[{bg: bgActive}, isActive]">样式属性</h3>
<button @click="clickHandler">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
isActive: 'active',
bgActive: true
},
methods: {
clickHandler () {
this.isActive = ''
}
}
})
</script>
代码解读:
- 可以看到我们以动态绑定
class
,以数组的形式,里面存放对象的实现方法,和数组的实现方法。 - 可以看到网页元素背景色和字体颜色都有相对应的样式:
可以知道如果我们原有的class
不会被覆盖。
4.对象和数组形式的动态样式简化
1.对象形式动态样式简化:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red
}
.fz {
font-size: 16px;
}
.bd {
border: 1px solid #eee;
}
.bg {
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="app">
<h3 :class="classObj">样式属性</h3>
<button @click="clickHandler">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
classObj: {
active: true,
fz: true,
bd: true
}
},
methods: {
clickHandler () {
this.classObj.active = false
}
}
})
</script>
</body>
</html>
代码解读:
- 可以看到我们这边定义了很多类,但是在
h3
标签上只给它绑定一个属性classObj
- 紧接着我们看
classObj
这个属性在data
字段中以对象的形式,每个类名跟着值为true
就这个标签上就有这些类名,如果为false
就没有这些类名。 - 那么我们可以点击的时候通过
this.classObj.active = false
来控制类名是否有。
可以看到这样就简化了html
上过长动态绑定类名,代码可读性更友好。
2.数组形式动态样式简化:
<div id="app">
<h3 :class="classObj">样式属性</h3>
<button @click="clickHandler">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
classObj: ['active', 'fz', 'bd', 'bg']
},
methods: {
clickHandler () {
this.classObj.splice(0,1)
}
}
})
</script>
代码解读:
- 数组简化样式的操作,直接将类名写在数组里。
- 如果想要操作样式类名的话就要根据数组相关的
api
进行操作。
4.style样式绑定
1.style内联样式的实现
style
样式绑定是绑到了内联样式上,具体的代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3 :style="{border: borderStyle, color: colorSty}">样式属性</h3>
<button @click="styleHandler">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid #ccc',
colorSty: 'red'
},
methods: {
styleHandler () {
this.colorSty = 'green'
}
}
})
</script>
</body>
</html>
代码解读:
- 我们可以看到绑定的是
style
属性,并且写成对象的形式。 - 属性名就是
css
有的属性名,属性值我们在data
定义了,也就是css
对应属性名合法的属性值。 - 我们点击按钮,字体颜色就会从红色变成绿色。
我们可以看到页面出现了样式。并且样式是内联样式的形式展示:
2.style内联样式的简化操作
我们可以发现如果我们写的样式多了的话,html
上直接写的话也会出现可读性不好,所以我们style
内联样式也可以简化操作,代码如下:
<div id="app">
<h3 :style="styleObj">样式属性</h3>
<button @click="styleHandler">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
styleObj: {
border: '1px solid #ccc',
color: 'red'
}
},
methods: {
styleHandler () {
this.styleObj.color = 'green'
}
}
})
</script>
代码解读:
- 可以看到,我们也是给
style
动态定义了一个对象styleObj
。 - 在
data
字段中,这个对象有border
和color
属性,打开浏览器我们是可以看到这两个样式,说明生效了。 - 如果要修改这个样式,就通过
this.styleObj.color = 'green'
,改成css
合法的属性值。