Vue之学习

福尔摩斯弟子

于 2021-08-06 17:49:38 发布

阅读量214

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Gladion/article/details/119460437

版权

Vue之学习

文章目录

- Vue之学习
前言
一、Vue简介
二、第一个Vue程序
三、el:挂载点
四、data数据对象
五、v-text指令
六、v-html指令
七、v-on指令基础
八、计数器
九、v-show指令
十、v-if指令
十一、v-bind指令
十二、图片切换
十三、v-for指令
十四、v-on补充
十五、v-model指令
十六、axios+vue
总结

前言

本人对于vue的感想就是，“这也太好用了吧！！！”，想想先前的自己还在用DOM、BOM来获取元素，再为之赋值啦，抑或是修改其innerHTML之类的繁琐活动，vue简直就像当初的工业革命，机器取代了手工。曾经的轮播图，用js与DOM写，其实还蛮痛苦的，但是vue的出现大大简化了代码的量，瞬间觉得好轻松。
相较于以往来说，html里面只能是固定的元素，想要修改之，需要用DOM来操作。有了vue的出现，它虽然也是类似于DOM，但是，它的文法更加简洁。有一种将变量或者是表达式直接写入中，而不是死板地html只能是固定之物，而想要修改只能在script中，vue的思路还是蛮简单、清晰的。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue简介

1.JavaScript框架

2.简化Dom操作

3.响应式数据驱动

二、第一个Vue程序

1.导入开发版本的Vue.js

2.创建Vue是实例对象，设置el属性和data属性

3.使用简洁的模板语法把数据渲染到页面上

可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


//暂时用这个就好。

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

输出结果：
在这里插入图片描述

三、el:挂载点

下面通过例子看一下作用范围：

<body>
    {{message}}

    <div id="app">
        {{message}}
        <span>{{message}}</span>
    </div>

    <script>
        var app = new Vue({
            el: '#app',    //建议使用id选择器，唯一
            data: {
                message: 'Hello, Vue!'
            }
        })
    </script>

</body>

输出结果如下：
在这里插入图片描述

el是用来设置Vue实例挂载（管理）的元素
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用id选择器
可以使用其他的双标签，不能使用html和body

el----->element

四、data数据对象

Vue中用到的数据定义在data中
data可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

示例：

<body>

    <div id="app">
        {{message}}

        <div>
            {{hobbies[1]}}
        </div>
        <div>
            {{scorelist['小明']}}
        </div>
    </div>



    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '啦啦啦啦啦啦',
                hobbies: ['basketball', 'tennis', 'games'],
                scorelist: {
                    '小明': 99,
                    '小红': 100
                }
            }
        })
    </script>

</body>

运行结果：

在这里插入图片描述

五、v-text指令

v-text指令的作用是：设置标签的文本值/内容（textContent）
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
内部支持写表达式

示例：

<body>

    <div id="app">
        <h2>
            {{message + "啊" + '啊'}}，江苏
            <!--此处在插值表达式内，无所谓单或双-->
        </h2>
        <h2 v-text="message + '啊' ">江苏</h2>
        <!-- 注意此处字符串的拼接，在双引号内部要用单引号 -->
    </div>



    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '您好啊'
            }
        })
    </script>

</body>

运行结果：
在这里插入图片描述

六、v-html指令

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本

本人觉得有点类似innerHTML与innerText的区别

示例：

    <div id="app">
        <h2 v-html="message"></h2>
        <h2 v-text="message"></h2>

    </div>



    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '<a href = "http://www.baidu.com"> 百度一下 </a>'
            }
        })
    </script>

运行结果如下：
在这里插入图片描述

七、v-on指令基础

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

<body>
    <div id="app">
        <h2 v-on:click="doIt">{{message}}</h2>
        <h2 @click="doIt">{{message}}</h2>

    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '哆啦啦'
            },
            methods: {
                doIt: function() {
                    alert('大家好！我是迷你哆啦！！！哆啦啦！');
                }
            }

        })
    </script>

八、计数器

<body>
    <div id="app">
        <div class="counter">
            <button @click="add">+</button>
            <span>{{num}}</span>
            <button @click="sub">-</button>
        </div>
    </div>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                add: function() {
                    this.num++;
                },
                sub: function() {
                    this.num--;
                }

            }
        })
    </script>

</body>

运行结果：
在这里插入图片描述

九、v-show指令

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

<body>
    <div id="app">
        <button @click="switchStatus">显示/隐藏</button>
        <img src="firedragon.png" alt="" v-show="isShow">
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                switchStatus: function() {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

</body>

十、v-if指令

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁地切换v-show，反之使用v-if，前者的切换消耗小

示例如下：

<body>
    <div id="app">
        <h2 v-if="isShow" @click="switchStatus">哆啦A梦</h2>
        <h2 v-show="isShow" @click="switchStatus">野比大雄</h2>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                switchStatus: function() {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

在这里插入图片描述
在上图中可以看到，v-if被设置为false时，整个标签被注释掉了；

而v-show被设置为false时，整个标签中，添加了一个display: none;

十一、v-bind指令

v-bind指令的作用是：为元素绑定属性
完整写法是 v-bind:属性名
简写的话可以直接省略v-bind，只保留 :属性名

示例如下：

<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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        img {
            width: 200px;
            height: 200px;
        }
        
        .active {
            height: 300px;
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'！！！'" @click="toggleActive" :class="isActive?'active':''">
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgSrc: "firedragon.png",
                imgTitle: "我是火恐龙哦",
                isActive: true
            },
            methods: {
                toggleActive: function() {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

运行结果：

点击第一次前：
在这里插入图片描述
点击一次后：

十二、图片切换

<body>
    <div id="app">
        <img :src="imgSrcs[index]" alt="">
        <button @click="prev">上一张</button>
        <button @click="next">下一张</button>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgSrcs: ["firedragon.png", "frogseed.png", "jennytortoise.png"],
                index: 0
            },
            methods: {
                prev: function() {
                    if (this.index >= 1) {
                        this.index--;
                    }
                },
                next: function() {
                    if (this.index < this.imgSrcs.length - 1) {
                        this.index++;
                    }
                }
            }
        })
    </script>

</body>

运行结果如下：
在这里插入图片描述

十三、v-for指令

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是(item, index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

示例如下：

<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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in arr">
                {{ item }}
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: ['cjy', 'xqy', '如果lshi', '我可以hnzyq', '我会很开心']
            }

        })
    </script>
</body>

十四、v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车

示例如下：

<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>v-on练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 v-on:click="doIt">{{message}}</h2>
        <h2 @click="doIt">{{message}}</h2>
        <input @keyup.enter="doIt('哆啦啦！！！')"></input>
        <!-- 注意此处括号中的字符串应当用单引号，否则会与外面的双引号冲突。 -->

    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '哆啦啦'
            },
            methods: {
                doIt: function(x) {
                    alert('大家好！我是迷你哆啦！！！哆啦啦！');
                    alert(x + "您刚刚敲了回车键。");
                }
            }

        })
    </script>
</body>

运行结果如下：
在这里插入图片描述

十五、v-model指令

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<— --->表单元素的值

示例如下：

<body>
    <div id="app">
        <input type="text" v-model="message">
        <h2>{{ message }}</h2>
        <!-- 加一个h2是为了方便看到修改了v-model的值data中的数据也会跟着修改 -->
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "哆啦啦~~~"
            }
        })
    </script>

</body>

运行结果如下：
在这里插入图片描述

十六、axios+vue

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容或错误信息

axios，功能强大的网络请求库

示例如下：

<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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div id="app">
        <button @click='getJoke'>点击我哦！</button>
        <p>{{ message }}</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '此为笑话之始祖！'
            },
            methods: {
                getJoke: function() {
                    console.log(this);
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response) {
                        // this.message = response.data;   
                        console.log(this);
                        // 这里的this与上面的this不同，故先需在上面存储this的值
                        that.message = response.data;
                    }, function(err) {})
                }
            }
        })
    </script>
</body>

运行结果如下：
在这里插入图片描述

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源

总结

提示：这里将本人之学习笔记分享至此，望诸位同仁指正，互相学习与交流。

福尔摩斯弟子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之学习

Vue之学习文章目录Vue之学习前言一、Vue简介二、第一个Vue程序三、el:挂载点四、data数据对象五、v-text指令六、v-html指令七、v-on指令基础八、计数器九、v-show指令十、v-if指令十一、v-bind指令十二、图片切换十三、v-for指令十四、v-on补充十五、v-model指令十六、axios+vue总结前言本人对于vue的感想就是，“这也太好用了吧！！！”，想想先前的自己还在用DOM、BOM来获取元素，再为之赋值啦，抑或是修改其innerHTML之类的繁琐活动，v
复制链接

扫一扫