AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue简易基础

2023-08-03 96
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue基础Vue简介JavaScript框架简化Dom操作响应式数据驱动

Vue基础

Vue简介

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

第一个Vue程序

  1. 导入开发版本的vue.js
  2. 创建Vue实例对象，设置el属性和data属性
  3. 使用简洁的模板语法把数据渲染到页面上
<!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>Document</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好Vue！"
            }
        })
    </script>
</body>
</html>

el：挂载点

el是用来设置Vue实例挂载（管理）的元素

  • Vue会管理el选项命中的元素及其内部的后代元素（对外部元素无作用）
  • 可以使用其他的选择器，但是建议使用ID选择器（因为具有唯一性）、
  • 可以使用在其他的双标签（HTML和BODY除外）

data：数据对象

  • Vue中用到的数据定义在data中
  • data中可以设置复杂类型数据
  • 渲染复杂数据类型时，遵守js的语法即可
<!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>Document</title>
</head>
<body>
    <div id="app">
        {{love.beloved}}爱{{love.lover}}
        <br>
        <ul>
            <li>{{followers[0]}}</li>
            <li>{{followers[1]}}</li>
        </ul>
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                love:{
                    lover:"陈先生",
                    beloved:"王某某"
                },
                followers:["余某","杨某某"]
            }
        })
    </script>
</body>
</html>

Vue本地应用

v-text

  • v-test指令的作用是：设置标签的内容（textContent）
  • 默认写法会替换掉全部内容，使用插值表达式{{}}可以替换指定内容
  • 内部支持表达式
<!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>Document</title>
</head>
<body>
    <div id="app">
        <h2 v-text="element"> Mother fuck!</h2>
        <h2 v-text="info + '!'"> Mother fuck!</h2>
        <h2>{{info + ". Oh,"}} Mother fuck!</h2>
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                element:"黑马程序员",
                info:"What the hell"
            }
        })
    </script>
</body>
</html>

v-html

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

v-on

  • v-on指令的作用是：为元素绑定事件
  • 事件名不需写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this可以访问定义在data中的数据
<!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>Document</title>
</head>
<body>
    <div id="ipp">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" v-on:click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"div",
            data:{
                food:"西兰花"
            },
            methods:{
                doIt:function(){
                    alert("hello！");
                },
                changeFood:function(){
                    this.food = "西兰花好好吃！";
                }
            }
        })
    </script>
</body>
</html>

补充

  • 事件绑定的办法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件的后面跟上.修饰符可以对事件进行修饰
  • .enter可以限制触发的案件为回车
  • 事件修饰符有多种
<!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>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" v-on:click="doIt('老铁', 666)">
        <input type="text" @keyup.enter="sayHi">{{element}}
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                element:" "
            },
            methods:{
                doIt:function(p1, p2){
                    this.element += p1;
                    this.element += p2;
                },
                sayHi:function(){
                    alert("你好包包！");
                }
            }
        })
    </script>
</body>
</html>

v-show

  • v-show指令的作用是：根据真假切换元素的显示状态
  • 原理是修改元素的display，实现显示隐藏
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，false元素隐藏
  • 数据改变之后，对应的显示状态会同步更新
<!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>Document</title>
</head>
<body>
    <div id="app">
        <button @click="changeIsShow">改变显示状态</button>
        <button @click="addAge">增加年龄</button>
        <img v-show="isShow" src="../拨云见日/img/2.png" alt="">
        <img v-show="age>=18" src="../拨云见日/img/1.png" alt="">
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                age:"17",
                isShow:"true"
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
    </script>
</body>
</html>

v-if

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

v-bind

  • v-bind指令的作用是：为元素绑定属性
  • 完整的写法是v-bind：属性名
  • 简写的话可以直接省略v-bind，只保留：属性名
  • 需要动态的增删class建议使用对象的形式
<!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>Document</title>
    <style>
        .xi{
            border: 1ch black solid;
        }
        .red{
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" :title="imgTitle+'!!'">
        <br>
        <p class="xi">哇哈哈哈哈</p>
        <p :class="{xi:isActive}" @click="changeIsActive">老天自有安排,点我改变安排！</p>
        <p :class="isActive?'red':''" @click="changeIsActive">三元表达式！</p>
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"../拨云见日/img/2.png",
                imgTitle:"我哈哈哈",
                isActive:true
            },
            methods:{
                changeIsActive:function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

v-for

  • v-for指令的作用是：根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是（item，index） in 数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
<!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>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in data">{{item.score}}</li>
        </ul>
        <h2 v-for="(item, index) in arr">{{index+':'+item}}</h2>
        <button @click="add">增加</button>
        <button @click="remove">删除</button>
        <button @click="pop">出栈</button>
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["陈彦亨","陈梓坤","陈梓豪","陈梓旭"],
                data:[
                    {score:100},
                    {score:90},
                    {score:80},
                    {score:70},
                ]
            },
            methods:{
                add:function(){
                    this.arr.push("帅");
                },
                remove:function(){
                    this.arr.shift();
                },
                pop:function(){
                    this.arr.pop();
                }
            }
        })
    </script>
</body>
</html>

v-model

  • v-model指令的作用是便捷地设置和获取表单元素的值
  • 绑定的数据回合表单元素的值相关联
  • 绑定的数据<–>表单元素的值
<!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>Document</title>
</head>
<body>
    <div id="app">
        <button @click="setM">修改message</button>
        <input type="text" @keyup.enter="putM" v-model="element">
        <h2>{{element}}</h2>
    </div>
    <script src="Vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                element:"你好包包👶"
            },
            methods:{
                setM:function(){
                    this.element = "你好！";
                },
                putM:function(){
                    alert(this.element);
                }
            }
        })
    </script>
</body>
</html>

Vue网络应用

axios基本使用

  • axios必须先导入才可以使用
  • 使用get和post方法即可发送对应的请求
  • then方法中的回调函数会在请求成功或失败时触发
  • 通过回调函数的形参可以获取相应内容或错误信息
<!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>Document</title>
</head>
<body>
    <button class="get">get请求</button>
    <button class="post">post请求</button>
    <script src="axios.js"></script>
    <script>
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumfish.cn/api/joke/list?num=6").then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumfish.cn/api/user/reg",{username:陈彦亨}).then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
    </script>
</body>
</html>

axios+vue

  • axios回调函数中的this已经改变，无法访问到data中的数据
  • 把this保存起来，回调函数中直接使用保存的this即可
  • 和本地应用的最大区别就是改变了数据来源
<!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>Document</title>
</head>
<body>
    <script src="Vue.js"></script>
    <script src="axios.js"></script>
    <div id="app">
        <button @click="getImg">点击BMI</button>
        <br>
        <p>{{text}}</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                text:""
            },
            methods:{
                getImg:function(){
                    var that = this;
                    axios.get("http://api.apishop.net/common/BMI/computeBMI?apiKey=zxECsASce5fdbcaadcd2b5dd1ffabe49561568b8b148912&weight=50&height=170").then(function(response){
                        that.text = response.data.result["BMI"];
                    },function(err){
                        alert("返回失败！");
                    })
                }
            }
        })
    </script>
</body>
</html>

文章标签：
JavaScript
前端开发
得过且过的勇者y
目录
相关文章
程序员彭于晏
|
17天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
19 1
大树营养快线
|
19天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
20 2
雨溪-yuxi
|
21天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
23 1
vue学习第一章
雨溪-yuxi
|
21天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
22 1
vue学习第三章
雨溪-yuxi
|
21天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
35 1
vue学习第四章
雨溪-yuxi
|
21天前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
21 1
vue学习第7章(循环）
雨溪-yuxi
|
21天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
28 1
vue学习第九章(v-model)
雨溪-yuxi
|
21天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
雨溪-yuxi
33 1
vue学习第十章(组件开发）
雨溪-yuxi
|
21天前
|
JavaScript 前端开发
vue学习第十一章（组件开发2）
欢迎来到我的博客，我是瑞雨溪，一名自学前端两年半的大一学生，专注于JavaScript与Vue。本文介绍Vue中的插槽（slot）使用方法，包括基本插槽、具名插槽及作用域插槽，帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助，请关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
19 1
vue学习第十一章（组件开发2）
雨溪-yuxi
|
21天前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期）
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期，从初始化到销毁各阶段的关键钩子函数及其应用场景，帮助你更好地理解Vue的工作原理。如果你觉得有帮助，欢迎关注我，将持续分享更多优质内容！🎉🎉🎉
雨溪-yuxi
21 1
vue学习第十二章(生命周期）

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VueJS && ReactJS 如何？听听别人怎么说。
  • 3
    基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
  • 4
    Vue：elementUI el-dialog组件destroy-on-close套用el-form
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 7
    vue之webpack打包原理和用法详解
  • 8
    Vue3+Vite4+Naive-UI 项目自动导入API和组件
  • 9
    新建Vue项目
  • 10
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 1
    vue3速览
    50
  • 2
    Vue3报错Property “xxx“ was accessed during render but is not defined on instance
    323
  • 3
    Vue3 官方文档速通（中）
    251
  • 4
    Vue3 官方文档速通（上）
    272
  • 5
    Vue3+Vite+Pinia+Naive后台管理系统搭建之五：Pinia 状态管理
    70
  • 6
    Vue3+Vite+Pinia+Naive后台管理系统搭建之三：vue-router 的安装和使用
    92
  • 7
    Vue3+Vite+Pinia+Naive后台管理系统搭建之二：scss 的安装和使用
    106
  • 8
    Vue3 系列：从0开始学习vue3.0
    52
  • 9
    Vue3 系列：vue-router
    45
  • 10
    Vue 入门系列：.env 环境变量
    83

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解