vue基础

最新推荐文章于 2022-07-02 09:45:44 发布
最新推荐文章于 2022-07-02 09:45:44 发布
阅读量136 收藏
点赞数
分类专栏： vue 前端 文章标签： html vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33745371/article/details/116587877
版权
前端 同时被 2 个专栏收录
22 篇文章 0 订阅
订阅专栏
vue
4 篇文章 0 订阅
订阅专栏

文章目录

新建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>Document</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        {{message}}
        <div>
            {{userInfo.username}} {{userInfo.age}} 
        </div>
        <ul>
            <li>{{area[1]}}</li>
        </ul>
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message : "齐威龙",
            area:["杭州","上海","北京"],
            userInfo:{
                username:"刘德华",
                age:65
            }
        },
    });
</script>
</html>

v-text

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <div v-text="message"></div>
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message : "齐威龙!!!",
        },
    });
</script>
</html>

v-html

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <div v-html="message"></div>
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message : "<a  href='https://www.baidu.com'>百度</a>",
        },
    });
</script>
</html>

v-on 事件

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <input type="button" v-on:click="clickMe" value="点击">
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"大家好,我是一点点"
        },
        methods:{
            clickMe:function(){
                alert(this.message);
            }
        }
    });
</script>
</html>

v-show

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <button v-on:click="beautyShowImg">{{buttonMsg}}</button>
        <img src="beauty.jpg" v-show="beautyShow" style="width: 100px;height: 100px;">
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            beautyShow:false,
            buttonMsg:"点击显示图片",
        }, 
        methods:{
            beautyShowImg:function(){ 
                this.beautyShow = !this.beautyShow; 
                if(this.beautyShow){
                    this.buttonMsg = "点击隐藏图片";
                }else{
                    this.buttonMsg = "点击显示图片";
                }
            }
        }
    }); 
</script>
</html>

v-if

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <button v-on:click="beautyShowName">{{buttonName}}</button>
        <p v-if="isShow">齐威龙</p>
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            beautyShow:false,
            buttonName:"点击显示名字",
        }, 
        methods:{
            beautyShowName:function(){ 
                this.isShow = !this.isShow; 
                if(this.isShow){
                    this.buttonName = "点击隐藏名字";
                }else{
                    this.buttonName = "点击显示名字";
                }
            }
        }
    }); 
</script>
</html>

v-bind

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <img v-bind:src="imgSrc" style="width: 100px;height: 100px;">
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"beauty.jpg",
        }, 
    }); 
</script>
</html>

v-for

遍历数组

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index}} {{item}}</li>
        </ul>
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:[1,2,3,4,5],
        }, 
    }); 
</script>
</html>

遍历对象

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <ul>
            <li v-for="(item,index) in studentArr">{{index}} {{item.name}} {{item.age}}</li>
        </ul>
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            studentArr:[
                {name:"齐威龙",age:18},
                {name:"郑爽着呢",age:20},
            ],
        }, 
    }); 
</script>
</html>

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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <input type="text" v-model="msg">
        <h3>{{msg}}</h3>
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"齐威龙"
        }, 
    }); 
</script>
</html>

总结:

v-text:
          输出文本
v-html:
          输出标签
v-on:
          事件
                    点击事件
                              v-on:click或@click
                    回车事件
                              @keyup.enter
v-show和v-if比较:
          v-show:
                    将元素显示或隐藏(不删除元素,操作css,display)
                    v-show是在任何条件下都被编译，而且DOM元素保留
                    有更高的初始渲染消耗
                    适用于频繁切换
          v-if:
                    将元素显示或隐藏(隐藏时删除整个dom元素)
                    v-if是惰性的，如果初始条件为假，则什么也不做
                    有更高的切换消耗
                    适用于不频繁切换
v-for:
          遍历集合

<li v-for="(item,index) in arr">{{index}} {{item}}</li>

v-model:
           获取和设置表单元素的值(双向数据绑定)
v-bind:
           设置元素的属性
           v-bind:属性名 与 :属性名 效果一样

练习demo

计数器

在这里插入图片描述

<!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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body> 
    <div id="app">
        <input type="button" v-on:click="reduce" value="-">
        {{num}}
        <input type="button" v-on:click="add" value="+">
    </div>
</body> 
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            reduce:function(){
                if(this.num==0){
                    alert("已达到最小值");
                    return;
                }
                this.num -= 1;
            },
            add:function(){
                if(this.num==10){
                    alert("已达到最大值");
                    return;
                }
                this.num += 1;
            }
        }
    });
</script>
</html>

简单记事本功能（没有写css，只是熟练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>Document</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
<div id="app">
    <input type="text" placeholder="请输入任务，按Enter记录" @keyup.enter="addTask" v-model="inputValue">
    <ol>
        <li v-for="(item,index) in taskArr">{{item}} <button @click="delTask(index)">X</button></li>
    </ol>
    <div v-show="taskArr.length!=0">
        <span>共计<label>{{taskArr.length}}</label>项</span>
        <button @click="clearAll()">清空所有</button>    
    </div>
    
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            inputValue: "",
            taskArr: [],
        },
        methods: {
            addTask: function () {
                this.taskArr.push(this.inputValue);
                this.inputValue = "";
            },
            delTask: function(index){
              this.taskArr.splice(index,1);//删除第index个，共删除1个参数
            },
            clearAll: function(){
                this.taskArr = [];
            }
        }
    });
</script>

</html>
qiweilong123456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue基础
lijieling123的博客
04-09 3032
Vue遵循SoC关注度分离原则 前端基础 结构层：HTML 表现层：CSS –CSS预处理器：用一种专门的语言，进行Web样面设计，再通过编译器转化为正常的CSS 常用的：SASS(基于Ruby), LESS(这个是基于NodeJS,使用简单，一般用这个) 行为层：JS Vue概念 Augular特点：将后台的MVC模式搬到前端并增加了模块化开发的理念（MVVM）(VM双向绑定相当于控制层) React特点： 提出新概念虚拟DOM, 用于减少真实的DOM操作，在内存中模拟DOM操作，提升前端的渲染效率 Vu
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
基于vue基础实现的记事本
09-24
本文将详细解析如何基于Vue基础实现一个记事本应用，重点涉及用户数据的增删操作。 首先，我们要理解Vue的核心概念：数据绑定。Vue采用的是双向数据绑定，这意味着视图层与数据模型之间可以相互影响。在创建Vue实例...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
div设置背景图片自适应
qq_33745371的博客
02-05 1万+
div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度 效果： 宽度变窄，高度相应比例变窄 宽度变宽，高度相应比例变宽 高度与宽度无法直接自适应，需要找一个中间的属性相串联。 宽度的自适应是根据viewport的width来调整的。 padding padding是根据viewport的width来调整的。 padding-top和padding-bottom也是根据viewport的width来跳转的。 那么我们可以通过 padding-bottom属性来间接和width进行自适应。 p
windows下node更换版本（简单操作）
qq_33745371的博客
10-12 1万+
node更换版本（简单操作）1.安装nvm2.操作nvm 基础命令 1.安装nvm 网址：https://github.com/coreybutler/nvm-windows/releases 下载 nvm-setup.zip,解压之后会有个.exe安装程序，第一步是同意，剩下的无脑next即可安装成功。 2.操作 1）打开cmd，使用 nvm ls 命令查看本地已有版本 2）观察到，本地有12.15.0的版本，但我现在想要10.16.0的版本。 使用 安装命令 nvm install v10.16.0
jquery form表单提交
qq_33745371的博客
02-26 9902
使用jquery 进行form表单提交 文章目录使用jquery 进行form表单提交先上结果：代码html代码 ---index.htmljs代码---index.js代码用到的jquery.js、select2的css和js在我项目里面有下载地址 我这里使用了多选框（传输到后端时，用对象接收，里面有个属性是list） 如果暂时不会的话，可以看这篇博文—select2 单选框实现多选功能 先上结果： 代码 html代码 —index.html <!DOCTYPE html> <htm
select2 下拉框实现多选功能
qq_33745371的博客
02-25 4129
文章目录效果1）直接选择2）输入内容检索点击"输出选中"，显示结果代码1.要导入jquery.js以及select2的css和js2.html代码3.js下载地址 效果 1）直接选择 2）输入内容检索 点击"输出选中"，显示结果 代码 1.要导入jquery.js以及select2的css和js 我在百度网盘的项目代码里有放，直接下载即可。 百度网盘： 链接：https://pan.baidu.com/s/1gN08az4lIsYviL13o5Fk-w 提取码：xolz 2.html代码 <!D
去除select下拉框的边框和三角下标
qq_33745371的博客
03-10 4065
去除select下拉框的边框和三角下标 效果图 核心css代码 /*去除select边框*/ border: 0; background: transparent; /*去除下拉框的三角下标*/ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari 和 Chrome */
mui下载 mui.js下载 mui.css下载
qq_33745371的博客
04-09 3973
mui的js和css资源网上不是很好找 我整理放在了百度网盘里 百度网盘:https://pan.baidu.com/s/1HVA6TG4A-dYK2PtUEEpljw 提取码：8gga
html获取验证码(pc端)
qq_33745371的博客
02-06 3194
html获取验证码代码(pc端) 效果： 已将html代码和css代码和js代码，放在了一起。 我自己引入了jquery,别忘记了。 如果觉得样式不好看可以自行调整css。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="user-scalable=0"> <meta charset="UTF-8"> <title
end value has mixed support, consider using flex-end instead
qq_33745371的博客
07-02 3158
原文：end value has mixed support, consider using flex-end instead 翻译：end 具有混合支持，请考虑改用flex end 1.发现问题在App.vue里 2.发现问题在77行，需将end改为flex-end
jquery的attr不生效
qq_33745371的博客
02-03 2490
使用jquery的attr()函数不生效的解决办法 问题： 如下图，当点击"我同意"后，框上应该打勾。 但是 使用$("#id")attr(“checked”,“checked”)，只有第一次能生效。 把√取消后，再次打开弹窗，点击"我同意"后，框内不会再有√了。 解决方案: 将attr()，换为prop() 类似于这样 使用场景： prop:具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用 attr:除适用prop的其他情况 ...
Vue基础、vue实战
最新发布
05-17
以下是Vue的基础知识： 1. 数据绑定：Vue使用双向数据绑定来实现视图和数据的同步更新。 2. 组件化：Vue允许开发人员将应用程序拆分成多个可重用的组件。 3. 指令：Vue提供了一系列指令，用于操作DOM元素的属性和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qiweilong123456

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值