面向后端程序员的Vue.js基础知识总结

最新推荐文章于 2023-07-18 19:26:42 发布

笼中小夜莺

最新推荐文章于 2023-07-18 19:26:42 发布

阅读量197

点赞数

分类专栏：大前端与可视化文章标签： java vue spring boot

本文链接：https://blog.csdn.net/m0_46521785/article/details/113701181

版权

大前端与可视化专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一些js内容回顾

数组的相关方法

length获取元素个数
push在后面添加
shift移除左边的元素
splice(index,num)删除元素，index是从哪开始删除，num是删除几个

使用js选择元素并绑定点击事件

document.querySelector(“类名”).onclick = function (){代码块}

Vue介绍与引入

安装插件vetur和Vue 3 Snippets进行语法提示

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

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

不推荐新手直接使用 vue-cli，尤其是在还不熟悉基于 Node.js 的构建工具时。

获取数据的几种形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue程序</title>
</head>
<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <h3>姓名:{{ user.name }},年龄:{{ user.age }}</h3>
        <h3>{{ ls[0] }}---{{ ls[1] }}---{{ ls[2] }}</h3>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",//element 用来给vue实例定义一个作用域
            data:{
                msg:"帅帅龙我爱你!",
                user:{name:"小黑龙",age:20},
                ls:["小美","小华","小姗"]
            },
        });
    </script>
</body>
</html>

# 总结
1.vue实例中el属性:代表vue作用范围，可以在范围下任意地方使用vue语法
2.el属性可以书写任意的css选择器，但是推荐使用id选择器
3.vue实例的data属性:用来给vue实例绑定一些数据，绑定的数据可以通过{{变量名}}的形式在vue作用范围取出
4.在使用{{}}获取数据时，可以在{{}}中书写表达式，运算符，调用相关方法以及逻辑运算等

模板语法

v-text与v-html

v-text用来更新原数据，或者理解为插入数据，使用{{}}(插值表达式)的形式在网络差的情况下会造成插值闪烁，但是一般情况下不影响

v-text将数据中含有html标签先解析再渲染到标签内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue程序</title>
</head>
<body>
    <div id="app">
        <div v-text="msg"></div>
        <div v-html="msg"></div>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:"<a href=''>帅帅龙我爱你</a>"
            }
        });
    </script>
</body>
</html>

v-on绑定函数

高级一点的有设置形参与实参，还有设置事件修饰符，即符合一定条件才触发，例如@keyup.enter="change"只有按下回车才触发，keyup是事件

其他的事件修饰符可以参考这里https://cn.vuejs.org/v2/api/#v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
</head>
<body>
    <div id="app">
        <div>年龄:{{ age }}</div>
        <input type="button" value="点我年龄加1" v-on:click="change">
        <input type="button" value="使用@绑定事件" @click="change">
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                age:20;
            },
            methods:{//用来定义vue中的事件
                change:function(){
                    this.age++
                }
            }
        });
    </script>
</body>
</html>

# 总结
事件具有三要素：事件源:发生事件的dmo元素  事件:发生特定的动作，例如click  监听器:发生特定动作之后的事件处理程序，通常是js函数
1.vue绑定事件是通过v-on指令完成的，格式为:v-on:事件名，例如v-on:click
2.v-on事件名的赋值语句是当前事件触发调用的函数名
3.vue中事件的函数统一定义在vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的vue实例，可以通过this获取vue实例的数据与方法
5.可以使用@符号绑定事件，简化v-on
6.methods函数可以从change:function(){}简化为change(){}
7.定义事件可以定义形参与实参

v-show切换元素显示状态

当值为true时会显示，当值为false时会隐藏，这个值可以是vue实例中data的值，也可以是逻辑表达式，最终都会被解析为布尔值，本质是切换元素的display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
</head>
<body>
    <div id="app">
        <img src="https://img-blog.csdnimg.cn/20210205151357904.png" v-show="isShow">
        <input type="button" value="改变照片状态" @click="change">
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                isShow:20
            },
            methods:{//用来定义vue中的事件
                change:function(){
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>
</html>

v-if切换元素显示状态

效果与v-show类似，功能是切换元素显示状态，v-if操作的是dom元素，如果值为flase会直接从dom树上移除，如果频繁切换建议使用v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
</head>
<body>
    <div id="app">
        <img src="https://img-blog.csdnimg.cn/20210205151357904.png" v-if="isShow">
        <input type="button" value="改变照片状态" @click="change">
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                isShow:20
            },
            methods:{//用来定义vue中的事件
                change:function(){
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>
</html>

v-bind切换元素属性

格式是v-bind:属性名=表达式，其中v-bind通常省略(见实例二、三)，可以使用对象的方式{active:isActive}替代三元表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc">
        <br>
        <img :src="imgSrc" :title="我爱帅帅龙" :class="isActive?'active':''" @click="change">
        <br>
        <img :src="imgSrc" :title="我爱帅帅龙" :class="{active:isActive}"  @click="change">
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                imgSrc:"https://img-blog.csdnimg.cn/20210205151357904.png",
                isActive:true
            },
            methods:{//用来定义vue中的事件
                change:function(){
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
</body>
</html>

v-for循环生成列表结构

循环时起的变量是可以用的，数组的数据与页面的数据是相应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in objArr" :class="index">姓名:{{ item.name }},年龄:{{ item.age }}</li>
        </ul>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                objArr:[{name:"张三",age:19},{name:"李四",age:20}]
            },
        });
    </script>
</body>
</html>

v-mode获取和设置表单数据的值(数据双向绑定)

双向绑定的意思是两端同时更改，使用{{}}是单向更改的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg" @keyup.enter="test">
        <h2>{{ msg }}</h2>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:"我爱帅帅龙"
            },
            methods: {
                test(){
                    alert(this.msg)
                }
            },
        });
    </script>
</body>
</html>

笼中小夜莺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
面向后端程序员的Vue.js基础知识总结

一些js内容回顾数组的相关方法length获取元素个数push在后面添加shift移除左边的元素splice(index,num)删除元素，index是从哪开始删除，num是删除几个使用js选择元素并绑定点击事件document.querySelector(“类名”).onclick = function (){代码块}Vue介绍与引入安装插件vetur和Vue 3 Snippets进行语法提示<scri
复制链接

扫一扫