Vue基础-CSDN博客

本文链接：https://blog.csdn.net/k1507157/article/details/120044037

文章目录

前言
一、Vue是什么？
二、Vue基础
总结

前言

     好几个月没更新博客了，原因是从五月份开始就一直和团队的小伙伴忙着学习开发微信小程序，最终参加小程序开发大赛，取得了全国三等奖的好成绩，首先感谢一下一起奋斗的小伙伴们！
    暑假期间也没有停止学习的步伐，期间学习处于方便使用了语雀文档和线下手写的方式记录所学的知识点，这不，开学来了发现课程不是很多，有大把的时间可以拿来梳理暑假期间的学习成果，所以我打算从今天开始一边回顾暑假的学习一边将一些知识点记录下来分享给和我一样的小伙伴们。
    另外，在这里立下一个flag,2021年剩下的三个月每个月10篇博客输出，分享记录自己的学习！！

一、Vue是什么？

~~Vue~~ 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue基础

1.第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<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>Vue基础</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message: "Hello Vue"
            }
        })
    </script>
</body>
</html>

2.el挂载点

在div标签里面使用id选择器（<div id="app"></div>）或者是class选择器（<div class="app"></div>），当使用的是id选择器的时候el挂载点的写法是#app、使用的是calss选择器的时候el挂载点的写法是.app，建议使用id选择器，使用时语法更加清晰。
在这里插入图片描述

2.Vue基础语法

(1). v-text

作用：设置标签的文本内容（默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

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

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            }
        })
    </script>
</body>

(2). v-html

作用：作用:设置元素的的innerHTML，内容中有html结构会被解析成标签

<body>
<div id="app">
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "<h1>你好</h1>"

            }
        })
    </script>
</body>

在这里插入图片描述

(3).v-on

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

<body>
<div id="app">
    <input type="button" value="v-on指令" v-on:click="doIT">
    <input type="button" value="v-on简写" @click="doIT">
</div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "<h1>你好</h1>"

            },
            methods: {
                doIT: function () {
                    alert("一起做IT！！")
                },
            }
        })
    </script>
</body>

在这里插入图片描述

(4).v-show

作用：根据真假切换元素的显示状态，实现的原理是修改元素的display，指令后的内容都会被解
析成布尔值，（true为显示，false为隐藏）

<body>
<div id="app">
    <h2 v-show="isShow">v-show标签</h2>
    <input type="button" value="v-on指令" v-on:click="changeShow">
</div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "<h1>你好</h1>",
                isShow: true

            },
            methods: {
                doIT: function () {
                    alert("一起做IT！！")
                },
                changeShow: function() {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

在这里插入图片描述

(5).v-if

作用：根据表达式的真假切换元素的显示状态，本质是通过操纵dom元素来切换显示状态

<body>
<div id="app">
    <h2 v-if="isShow">v-show标签</h2>
    <input type="button" value="点击" v-on:click="changeShow">
</div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "<h1>你好</h1>",
                isShow: true

            },
            methods: {
                doIT: function () {
                    alert("一起做IT！！")
                },
                changeShow: function() {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

(6).v-bind

作用：为元素绑定属性，完整写法：v-bind：属性名

<body>
<div id="app">
    <img v-bind:src="imgSrc" alt="" :class="normal"> 
        <br>
</div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc:"https://kkya.mcdd.top/img/logo.jpeg",
            
            }
        })
    </script>
</body>

在这里插入图片描述

(7).v-for

作用：根据数据生成列表结构，语法是（item，index）in 数据，响应式更新数据

<body>
<div id="app">
    <ul>
        <li v-for="item in arr">
            我的朋友：{{item}}
        </li>
    </ul>
</div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr:["小华","小李","小张","小吴"]            
            }
        })
    </script>
</body>

在这里插入图片描述

(8).v-model

作用：便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相互关联（双向数据绑定）

<body>
<div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>
</div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: 'Hello Vue!',
            
            }
        })
    </script>
</body>