vue学习笔记

于 2021-03-30 16:28:10 发布
阅读量64 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44747789/article/details/115328139
版权

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue太难了</title>
</head>

<body>
    <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="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     var app=new Vue({
         el:"#app",
         data:{
             food:"西兰花炒蛋"
         },
         methods:{
             doIt:function (){
                 alert("做It");//alert是js的函数，弹窗
             },
             changeFood:function (){
                 this.food+="好好吃！"
             }
         },
     })
    </script>

</body>
</html>

计数器的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
    <link rel="stylesheet" href="./css/index.css">
    <!--偷偷自己加的样式，属于CSS的内容-->
</head>

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

        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function (){
                    if(this.num<10)
                    {
                        this.num++;
                    }else{
                        alert("别点了，最大了")
                    }

                },
                sub:function (){
                    if(this.num>0)
                    {
                       this.num--;
                    }else{
                        alert("别点了，最小了")
                    }
                }
            }
        })
    </script>

</body>
</html>

v-show指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show 指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="//www.runoob.com/images/logo.png" alt="">
        <!--//本地插入图片有点小难-->
        <img v-show="age>=18" src="//www.runoob.com/images/logo.png" alt="">
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeIsShow:function (){
                this.isShow = !this.isShow;
            },
            addAge:function (){
                this.age++;
            }
        }
    })
</script>

</body>
</html>

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">西兰花</p>
        <p v-show="isShow">西兰花-v-show</p>
        <h2 v-if="temperature>=35">热死了</h2>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
            temperature:45
        },
        methods:{
            toggleIsShow:function (){
                this.isShow = !this.isShow;
            }
        }
    })
</script>

</body>
</html>

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgSrc:"//www.runoob.com/images/logo.png",
                imgTitle:"菜鸟",
                isActive:false
            },
            methods:{
                toggleActive:function (){
                    this.isActive=! this.isActive;
                }
            }
        })
    </script>

</body>
</html>

有个图片切换的作业，因为没有CSS的样式 ，选择性放弃

v-for指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="删除数据" @click="remove">
        <ul>
            <li v-for="(it,index) in arr">
                {{index+1}} 黑马程序猿校区：{{it}}
            </li>
        </ul>
        <h2 v-for="item in vegetable" 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:{
                arr:["北京","上海","广州","深圳"],
                vegetable:[
                    {name:"西兰花炒蛋"},
                    {name:"蛋炒西兰花"}
                    ]},
            methods:{
                add:function (){
                    this.vegetable.push({name:"兰菜炒蛋"});
                },
                remove:function (){
                    this.vegetable.shift();
                }
            }

        })
    </script>

</body>
</html>

v-on补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            methods:{
                doIt:function (p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function (){
                    alert("吃了没");
                }
            }
        })
    </script>


</body>
</html>

v-model 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <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:"黑马程序猿"
            },
            methods:{
                getM:function (){
                    alert(this.message);
                },
                setM:function (){
                    this.message ="苦丁鱼";
                }


            }
        })

    </script>

</body>
</html>

axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector(".get").onclick = function (){
            axios.get("https://autumnfish.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://autumnfish.cn/api/user/reg",{username:"侯开宇"})
            .then(function (response){
                console.log(response);
            })
        }
    </script>

</body>
</html>

axios+vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue+axios</title>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function (){
                    var that =this;
                    axios.get("https://autumnfish.cn/api/joke").then(
                        function (response){
                        console.log(response.data);
                        that.joke=response.data;
                }
                    )
                }
            }
        })
    </script>

</body>
</html>

 

两米七的大白菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2192
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
Vue知识整理，让你快速入门Vue.js：04_3.网络应用：axios+vue结合使用
鲁迷那的专栏—坚持实践后再写出来！
03-24 388
上一节我们介绍了axios的基本使用，相比于原生的ajax，它提供的方法用起来会更加的简便，那网络数据其实现在已经可以顺利获取到了，那么它如何和Vue一起使用呢？我们这一节就来介绍axios加vue 更新中。。。。 ......
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
java毕设&课设-图书管理系统（完整的）.zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
奇异谱分析SSA做信号分解，信号去噪、分解
07-21
奇异谱分析SSA做信号分解，信号去噪、分解 1.运行main文件，其余为子函数 2.可以做回归预测，分类预测，时间序列预测 3.可以做信号分解，算法优化，区间预测 4.可以做组合模型预测 5.可以做聚类
ASP电子政务档案管理系统(源代码+论文).rar
07-21
ASP电子政务档案管理系统(源代码+论文)
生物医药Ⅱ行业深度研究：带疱苗市场高速增长时代拉开序幕，大单品蓝海有望渐成.pdf
07-21
生物医药Ⅱ行业深度研究：带疱苗市场高速增长时代拉开序幕，大单品蓝海有望渐成
CAN（Controller Area Network）协议认识与了解
07-21
CAN（Controller Area Network）协议是一种广泛应用于汽车、工业自动化以及其他嵌入式系统的通信协议。它由 Bosch 公司于 1980 年代开发，目的是提供一种可靠、高效、低成本的网络通信解决方案。
软件项目管理培训PPT(中科大)-软件项目成本计划
最新发布
07-21
一、软件项目规模成本的概念 二、成本估算过程 三、成本估算方法 四、成本预算 五、案例分析
2023年12月金融数据点评-政策积极发力，托举信贷社融.pdf
07-21
2023年12月金融数据点评-政策积极发力，托举信贷社融
毕业设计javajsp作业管理系统(jsp+sqlserver)-qlkrp源码工具包
07-21
毕业设计javajsp作业管理系统(jsp+sqlserver)-qlkrp源码工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 院系管理 专业管理 班级管理 作业管理 教师管理 学生管理 公告管理 包含：源码、数据库脚本、环境工具包、相同框架项目的安装教程（在说明文档中）
Flower-shop.zip
07-21
Flower-shop.zip
ASP基于WEB的商场管理系统的设计与实现(源代码+论文).rar
07-21
ASP基于WEB的商场管理系统的设计与实现(源代码+论文)
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值