Vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

Don’t care.

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量199

点赞数

分类专栏：前端相关文章标签： vue

本文链接：https://blog.csdn.net/studyeglish/article/details/105936210

版权

前端相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vu基础

Vue指令

官方文档：https://cn.vuejs.org/
参考视频：https://www.bilibili.com/video/BV12J411m7MG?p=3

1、Vue是什么

JavaScript框架
简化Dom操作
响应式数据驱动

2、Vue基础

el:挂载点
data:数据对象

安装步骤：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Demo

<body>
    <div id="app">
        <!-- 差值表达式（也可以理解为绑定上了massage） -->
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // 绑定id选择器（挂载点）
            el: "#app",
            //vue实例中使用到的数据
            data: {
                message: "你好呀Vue"
            }
        })
    </script>
</body>

步骤：

导入开发版本的Vue.js
创建Vue实例对象,设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

3、EL：挂载点

el：是用来设置Vue实例挂载(管理)的元素

Vue实例的作用范围是什么呢?

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器?

可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其他的dom元素呢?

可以使用其他的双标签,不能使用HTML和BODY

<body>
    <!-- 无法生效 -->
    {{ message }}
    <div id="app">
        {{ message }}
        <h2>{{ message }}</h2>
    </div>
    <!-- 可以绑定 -->
    <div class="app">
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            // el: ".app",
            data: {
                message: "你好呀Vue"
            }
        })
    </script>
</body>

4、data：数据对象

<body>
    <div id="app">
        {{ message }}
        <h2>{{ school.name }} {{ school.modile }}</h2>
        <ul>
            <li>{{ campus[0]}}</li>
            <li>{{ campus[1]}}</li>
            <li>{{ campus[2]}}</li>
            <li>{{ campus[3]}}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "学校社区",
                school: {
                    name: "广东学校",
                    modile: "545-8754-789"
                },
                campus: ["第一个校区", "第二个校区", "第三个校区", "第四个校区"]
            }
        })
    </script>
</body>

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

Vue指令

1、本地应用简介

2、v-text

<body>
    <div id="app">
        <!-- 在标签里面的文字将被隐藏 -->
        <h2 v-text="message">这里</h2>
        <h2 v-text="info">这里</h2>
        <!-- 标签里面的文字依旧显示 (建议使用)-->
        <h2>{{ message }}这里</h2>

       
        <!-- 拼接字符串 -->
        <h2 v-text="message + '!!!'"></h2>
        <h2>{{ message + "!!!"}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "学校社区",
                info: "啦啦啦啦啦啦啦"
            }
        })
    </script>
</body>

在这里插入图片描述

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容，使用==差值表达式{{}}==可以替换指定内容
内部支持写表达式

3、v-html

<body>
    <!-- html结构 -->
    <div id="app">
        <!-- 普通文本时没有什么区别 -->
        <h2 v-text="content"></h2>
        <h2 v-html="content"></h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                // content: "测试"
                content: "<a href='www.buidu.com'>百度</a>"
            }
        })
    </script>
</body>

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

4、v-on
在这里插入图片描述

<body>
    <!-- html结构 -->
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="v-on双击" @dblclick="doIt">
        <h2 @click="add">{{ text }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                text: "请你点击增加"
            },
            methods: {
                doIt: function () {
                    alert("点它");
                },
                add: function () {
                    //方法内部通过this关键字可以访问定义在data中数据
                    this.text += "加它"
                }
            }
        })
    </script>
</body>

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

4、计数器

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
    <style>
        #input-num {
            /* 取消最大宽度的样式 */
            max-width: unset;
            /* 取消左右的80px */
            padding: 0;
            /* 距离上面72px */
            padding-top: 72px;
            display: flex;
            justify-content: center;
            justify-items: center;
        }

        .change {
            font-size: 60px;
            color: white;
            margin: 0;
            background-color: rgb(0, 211, 81);
            border: 0;
            padding: 10px 60px;
            border-radius: 8px 0 0 8px;
            /* 鼠标:放上去有个形状 */
            cursor: pointer;
            /* 0.4秒的过渡 */
            transition: 0.4s;
            outline: none;
        }

        .right {
            border-radius: 8px 0 0 8px;
        }

        .left {
            border-radius: 0 8px 8px 0;
        }

        .change:active,
        .change:hover {
            background-color: rgb(5, 143, 58);
        }

        .number {
            font-size: 40px;
            margin: 0;
            background-color: rgb(225, 201, 228);
            border: 0;
            color: white;
            padding: 20px 60px;
        }
    </style>
</head>

<body>
    <!-- html结构 -->
    <div id="input-num">
        <button class="change right" @click="sub">-</button>
        <span class="number">{{ num }}</span>
        <button class="change left" @click="add">+</button>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建Vue实例
        var app = new Vue({
            el: "#input-num",
            //定义属性:num
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("超过10了")
                    }
                },
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("小于0了")
                    }
                }
            }
        })
    </script>
</body>

在这里插入图片描述

创建Vue示例时:el(挂载点),data(数据),methods(方法)

v-on指令的作用是绑定事件,简写为@

方法中通过this,关键字获取data中的数据

v-text指令的作用是:设置元素的文本值,简写为=={{}}==

v-html指令的作用是:设置元素的innerHTML

5、v-show指令（切换元素的显示和隐藏）

根据表达值的真假,切换元素的显示和隐藏：如广告，遮罩层

<body>
    <!-- html结构 -->
    <div id="app">
        <input type="button" value="切换图片显示状态按钮" @click="changeImage">
        <img v-show="isShow" src="activity01-image copy.jpg" alt="" srcset="">
        <input type="button" value="年龄到了即可见" @click="addAge">
        <img v-show="age>=18" src="activity01-image copy.jpg" alt="" srcset="">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 16
            },
            methods: {
                changeImage: function () {
                    this.isShow = !this.isShow;
                },
                addAge: function () {
                    this.age++;
                }
            }
        })
    </script>
</body>

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

6、v-if指令【根据表达值的真假切换元素的显示和隐藏(操纵dom元素)】

根据表达值的真假切换元素的显示和隐藏(操纵dom元素)

<body>
    <!-- html结构 -->
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <!-- 直接从dom元素中删除 -->
        <h2 v-if="isShow">vi-f指令</h2>
        <!-- 在元素上面增加display:none的样式 -->
        <h2 v-show="isShow">vi-show指令</h2>
        <h2 v-if="temperature>=25">热死了</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temperature: 30
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

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

7、v-bind

v- bind:属性名=表达式
在这里插入图片描述

<style>
    .active {
        border: 5px solid red;
    }
</style>

<body>
    <!-- html结构 -->
    <div id="app">
        <img v-bind:src="imgSrc" :title="imageTitle" :isActice="isActive">
        <!-- active这个类名是否生效取决于isActive -->
        <img :src="imgSrc" :title="imageTitle" :class="{active:isActive}" @click="toggleActive">

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建Vue实例
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "activity01-image copy.jpg",
                imageTitle: "logo",
                isActive: false
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

v-bind指令的作用是:为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
需要动态的增删class建议使用对象的方式

8、图片切换

在这里插入图片描述

<style>
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(225, 237, 248);
        height: 100vh;
    }

    img {
        height: 500px;
        width: 500px;
        border-radius: 50%;
    }
</style>

<body>
    <!-- html结构 -->
    <div id="mask">
        <div class="center">
            <a href=" #" class="left" v-show="index!=0" @click="prev">
                <svg t="1588306372488" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2180" width="100" height="100">
                    <path d="M640 768l-256-256 256-256z" fill="#181818" p-id="2181"></path>
                </svg>
            </a>
            <div class="image">
                <img :src="imgArr[index]">
            </div>
            <a href=" #" class="right" v-show="index!=10    " @click="next">
                <svg t="1588306500621" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2429" width="100" height="100">
                    <path d="M384 256l256 256-256 256z" fill="#181818" p-id="2430"></path>
                </svg>
            </a>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //创建Vue实例
        var app = new Vue({
            el: "#mask",
            data: {
                imgArr: [
                    "./00.jpg",
                    "./01.jpg",
                    "./02.jpg",
                    "./03.jpg",
                    "./04.jpg",
                    "./05.jpg",
                    "./06.jpg",
                    "./07.jpg",
                    "./08.jpg",
                    "./09.jpg",
                    "./10.jpg"
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        })
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0skVFvZH-1588672550228)(C:\Users\77952\AppData\Roaming\Typora\typora-user-images\image-20200501132921026.png)]$

列表数据使用数组保存
v-bind指令可以设置元素属性，比如src
v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

9、v-for（根据数据生成列表结构）

根据数据生成列表结构
在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="删除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in school">
                {{ index+1 }}、学校：{{ item }}
            </li>
        </ul>
        <h2 v-for="(item,index) in food" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                school: ["中大", "北大", "深大", "广大"],
                food: [
                    { name: "西兰花炒蛋" },
                    { name: "可乐鸡翅" }
                ]
            },
            methods: {
                add: function () {
                    this.food.push({ name: "吃吃吃" })
                },
                remove: function () {
                    this.food.shift();
                }
            }

        })
    </script>
</body>

在这里插入图片描述

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

10、v-on（事件修饰符）

在这里插入图片描述

文档：https://cn.vuejs.org/v2/api/#v-on

<body>
    <div id="app">
        <div id="app">
            <input type="button" value="点击" @click="doIt('兄弟')">
            <input type="button" value="点击2" @click="doIt(666,'兄弟')">
            <input type="text" @keyup.enter="sayHi">
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1) {
                    console.log("点他"),
                        console.log(p1)
                },
                doItAgain: function (p1, p2) {
                    console.log(p1),
                        console.log(p2)
                },
                sayHi: function () {
                    alert("你好");
                }
            }

        })
    </script>
</body>

在这里插入图片描述

11、v-model（双向数据绑定）

在这里插入图片描述

<body>
    <div id="app">
        <div id="app">
            <input type="button" value="修改massage值" @click="setMessage">
            <input type="text" v-model="message" @keyup.enter="getMessage">
            <h2>{{ message }}</h2>
            <h2>{{ message }}</h2>
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "测试"
            },
            methods: {
                getMessage: function () {
                    alert(this.message)
                },
                setMessage: function () {
                    this.message = "啦啦啦啦啦啦"
                }
            }

        })
    </script>
</body>

在这里插入图片描述

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

Don’t care.

关注

0
点赞
踩
0

收藏

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

Vue基础官方文档：https://cn.vuejs.org/参考视频：https://www.bilibili.com/video/BV12J411m7MG?p=31、Vue是什么JavaScript框架简化Dom操作响应式数据驱动2、Vue基础el:挂载点data:数据对象安装步骤：<sc...
复制链接

扫一扫

专栏目录