Vue的基础入门之第二篇

本文目录

一、运用第一篇所学做个小案例

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/[email protected]"></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/[email protected]"></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.代码实现与解读

前面我们说过要自己来实现下双向数据绑定，现在我们学了事件以及事件对象，就可以来实现了，代码如下：

扫描二维码关注公众号，回复： 12302186 查看本文章

<!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/[email protected]"></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/[email protected]"></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/[email protected]"></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/[email protected]"></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/[email protected]"></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/[email protected]"></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/[email protected]"></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/[email protected]"></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合法的属性值。