Vue新手村（一）

已于 2024-01-11 21:47:51 修改
阅读量1k 收藏 20
点赞数 21
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2024-01-07 00:00:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LYJbao/article/details/135432811
版权

目录

1、Vue简介——Vue的特点

2、Vue的第一个页面

3.Vue的简单使用介绍

3.1、{{ }}的使用

3.2、v-text和v-html

3.2.1、v-text和{{ }}的区别

3.2.2、v-html和v-text的区别

3.3、v-on【事件绑定】

3.3.1、绑定事件的语法

 3.3.2、语法简化

3.3.3、传参

3.4、v-show和v-if

3.5、v-bind

3.5.1、基础语法

3.5.2、语法简化加新技巧

3.6、v-for

3.7、v-model双向绑定

1、Vue简介——Vue的特点

  1. Vue是一个JavaScript框架，优点就是简化了页面的js操作【BootStrap是一个css框架，封装css的】
  2. 易用、高效、灵活

2、Vue的第一个页面

        打开VSCode，创建一个test.html文件，引入Vue.js:

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

        我们在学习期间，使用开发环境的版本就可以了，一般上线时才会更换为生产环境的~

        一般建议把引用放在html标签的最后面哈~

第一个页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        年龄：{{age}}
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18
        }
    })
</script>

效果：

 里面的内容说明：

        在Script标签里面，我们new了一个Vue对象，把数据信息都是放在对象中的。这个对象中，具体格式，如下：

el:"#app"， //指定vue作用范围
data:{
    //用来给vue实例绑定一系列数据
}，
methods:{
    //方法
}

        通过上数的例子，也可以了解到：

  1. new的这个vue对象只有在el中所指作用范围内才会起到效果【建议使用id，具有唯一性】；
  2. 数据信息都是放在data中的，方法都放在methods中；
  3. 访问data中的数据需要{{  }}【其他使用我们下面继续说】

3.Vue的简单使用介绍

3.1、{{ }}的使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        年龄：{{age}}  </br>
        {{age+1}}</br>
        {{name.length}}</br>
        {{name.toUpperCase()}}</br>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18,
            name:"abc"
        }
    })
</script>

效果：

        总结：

                使用{{ }}获取data中的数据时，可以使用表达式、运算符、调用方法等相关操作【不能使用++】

3.2、v-text和v-html

3.2.1、v-text和{{ }}的区别

        v-text用途：用来获取data中的数据，将数据以文本的形式渲染到指定的标签内部，类似于JavaScript中的innerText

v-text代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>年龄：{{age}}  </div>

        <div v-text="age"></div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18,
        }
    })
</script>

效果：

看起来好像和{{ }}差不多~

v-text和{{ }}的区别：

代码改动: 

效果展示：

v-text把标签中之前的值也给抹去了~
我把网络放在弱网环境下：

区别总结:

  1. 使用v-text取值会将标签中的原有的数据覆盖，使用{{ }}（插值表达式）的形式不会覆盖
  2. {{ }}（插值表达式）在弱网环境下会出现插值闪烁，而v-text不会

3.2.2、v-html和v-text的区别

        v-html的用途：用来获取data中的数据，将数据中含有的html标签解析，再渲染到指定的标签的内部，类似于JavaScript中的innerHTML

v-html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>

        <div v-text="age">2年龄：</div>
        <div v-html="age">3年龄：</div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18,
        }
    })
</script>

看起来和v-text没有区别哈，再看：

代码变更：

效果：

区别总结:

  1. v-html会html标签解析，而v-text只会把他们看做是一个文本

3.3、v-on【事件绑定】

3.3.1、绑定事件的语法

        我们先来回顾一下，js中事件三要素

  1. 事件源：发生事件源头就是事件源，一般指的是html标签
  2. 事件：发生特定动作 如：onclick单击，dbclick双击...
  3. 监听器：事件处理程序，一般指的是事件处理函数

        vue事件v-on，大家看代码，结合着理解一下：

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-on:click="test1">点我</button>
      
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#test",
        data:{
            age:18
        },
        methods:{
            test1:function() {
                alert('hhhhhh')
            }
        }
    })
</script>

例2：

为什么是this.age，而不是this.data.age呢，我们打印vue对象来看看：

打开浏览器的console： 

 3.3.2、语法简化

3.3.3、传参

3.4、v-show和v-if

  1. v-show:用来控制页面中某个标签是否展示
  2. v-if：用来控制页面元素是否展示

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-show="true">v-show111</button>
        <button v-show="false">v-show222</button>
        <button v-if="true">v-if111</button>
        <button v-if="false">v-if222</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18
        },
        methods:{
           
        }
    });
    console.log(vue)
</script>

效果展示，只展示了值为true的：

再来看个案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-show="isShow" @click="test1">v-show111</button>
        <button v-if="isShow" @click="test2">v-if111</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18,
            isShow:true
        },
        methods:{
           test1() {
                this.isShow = !this.isShow
           },
           test2() {
                this.isShow = !this.isShow
           }
        }
    });
    console.log(vue)
</script>

重要点：

小结：

  1. 在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏。
  2. 在v-show中可以通过boolean表达式控制标签的展示和隐藏3.v-if、vshow : 作用: 都是用来控制页面中标签是否展示和隐藏 使用: 标签:v-if
  3. ="true false",v-show="true false"
  4. 区别:
    • v-show: 底层在控制页面标签是否展示时底层使用的是css 中 display 属性来标签展示和隐藏。推荐使用: v-show 在数据量比较大和控制显示状态切换频繁时。
    • v-if: 底层在控制页面标签是否展示时底层是直接操作dom元素，通过对dom元素删除和添加来控制标签的展示和隐藏

3.5、v-bind

3.5.1、基础语法

v-bind：用来绑定标签的属性，从而通过vue动态修改标签属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aaa {
            background-color: blue;
        }
        .bbb {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <button v-bind:class="cla" @click="test1">v-show111</button>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18,
            cla:"aaa"
        },
        methods:{
           test1() {
                this.cla="bbb"
           }
        }
    });
    console.log(vue)
</script>

点击后，颜色就会变了~

3.5.2、语法简化加新技巧

不止是class，除了value，其他的都可以~

3.6、v-for

v-for：作用就是用来对 对象进行遍历（数组也是对象的一种）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>

        <!-- 遍历对象 -->
        <div v-for="(value,key,index) in user">
            {{index}}_{{key}}: {{value}};
        </div>

        <!-- 遍历数组 -->
        <div v-for="(name,index) in names">
            {{index}}_{{name}}
        </div>

        <!-- 变量含有对象的数组 -->
        <div v-for="(user,index) in users">
            方1：{{index}}___{{user}}
            方2：{{index}}___name:{{user.name}};age"{{user.age}};bir:{{user.bir}}
        </div>

    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18,
            user:{
                name:"小龙",
                age:18,
                bir:"2003"
            },
            names:["龙","陈","CL"],
            users:[
                {name:"小龙",age:18,bir:2003},
                {name:"小c",age:20,bir:2004},
                {name:"小l",age:22,bir:2002},
            ]

        },
        methods:{
           test1() {
                this.cla = !this.cla
           }
        }
    });
    console.log(vue)
</script>

效果：

3.7、v-model双向绑定

v-model：作用是用来绑定标签元素的值与vue实例对象中的data数据保持一致，从而实现双向的数据绑定

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <div>1年龄：{{age}}  </div>
        <input type="text" v-model="age">
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#test",
        data:{
            age:18
        },
        methods:{
        }
    });
    console.log(vue)
</script>

所谓的双向绑定，就是指表单中的数据变化，vue实例data数据也会变化，vue中data的值变化，表单的值也会变化

龙洋静
关注
  • 21
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3新手村纯前端项目——校园跑腿系统前台部分.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。测试代码可运行。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者...
SpringBoot毕业设计-SpringBoot+Vue的疫情防控期间某村外出务工人员信息管理系统.zip
08-09
Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，...
走出 Vue 新手村
GitChat
07-02 166
Vue 的学习曲线平缓，入门很简单，所以后发夺人，争取到一大批支持者，我也是其中之一。但是因为隐蔽了很多细节，所以我也没少踩坑，挠头拍桌，不厌其烦。如今，我终于突破屏障，遇到大部分问题，都能举一反三，快速定位、快速解决。这段过程，难免追本溯源，穷究细节。我希望通过这次分享，把我的经验和收获传达给大家。 面向听众： 有一定 Vue 开发经验，希望进一步提升； 平时业务代码写得多，想学习技术细节。 ...
初始化一个vue项目(新手村教程)
恰恰冲鸭
05-18 225
没有安装自行百度。切换至国内镜像。
Vue新手村之新手村概述
dazongji6362的博客
08-02 97
Vue新手村之新手村概述 　　如果你读到这里，那么可能有一定的JS基础，那么就开始闯荡Vue新手村吧 　　Vue新手村分为下面这几个部分： 　　　　1.页面服务器渲染区（vue内置指令） 　　　　2.数据存贮区 　　　　3.逻辑方法区（包含函数初始化，过...
Vue新手村之新手村的搭建
dazongji6362的博客
08-02 50
Vue新手村之新手村的搭建 　　此Vue新手村是基于脚手架搭建的，不适用使用CDN引入的vue，以后会再开单独使用vue CDN引入的方式开发。此外系统是基于win 10开发 mac和linux或者是unix请自行寻找开发环境的搭建。 　　首先打开度娘 安装n...
Vue新手村任务之Vue常用指令
dazongji6362的博客
08-02 70
Vue新手村任务之Vue常用指令 　　首先看下这个文件长什么样 在编辑器中很容易就发现分成了三个部分 <template> 里面是写html的 <script>里面写vue的逻辑层 <style>里面写vue的样式sco...
Vue新手村任务之认识项目目录
dazongji6362的博客
08-02 80
Vue新手村任务之认识项目目录 　　使用VS code打开项目 文件下面有个安装扩展 分别搜索vue css js 和path 安装 　　 　　build文件夹是打包时候用的 这里先不用管 　　config里面是设置 可以到配置代理服务器的时候会说 　...
Vue新手村（二）
LYJbao的博客
01-11 1023
例如下面的例子【其他：.tab .delete .esc .space .up .down .left .right】此时，我们点击子div，也不会触发父div的alert，因为添加了.self，他只关心自己标签上的事件。.self：用来针对当前标签的事件触发——只触发自己标签上的特定动作，只关心自己标签上触发的事件，不监听事件冒泡。不管是点击子div，冒泡触发的，还是点击父div自己触发的，一共只触发一次~修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制~
Vue新手村任务之任务前言
dazongji6362的博客
08-02 120
Vue新手村任务之任务前言 　　在新手村，不讲Vue原理实现，不讲这个东西这么来的，直说快速说使用通关方法，可能会拿JQ做对比（这个纯看个人心情） 新手村任务做完之后可获得 使用vue熟悉的资格。 　　这个Vue新手村，在进村之前，必须的掌握的技能有：1.了...
vue 连载软件大陆 vue之新手村，vue创建运行指导（如：vue脚手架，创建启动项目，配置等）
weixin_45137175的博客
07-03 324
自此小V习会了Node.js的基础篇章，得以可以将vue家族基础功法运用，此时族长又将vue基础功法掏出说到，我们这套技能需要搭载酷睿系列+Node.js+Vue基础技能方可运用自如，此时族长大喝一声，小辈看好了，我只教一次，曾经为老牌实力的vue家族，因曾经的一次大战后，就此陨落，族长拼死保族人方得以在H市的某处苟延残喘，而我们的主角小V从小便习得十八般武艺，如今更是得到了现今族长的亲睐，教他祖传vue功法习得。族长又说道，次功法有很多种搭配组合的方法，会让你在日后的道路更加规范，走的更高 ，
Java毕业设计--SpringBoot+Vue的疫情防控期间某村外出务工人员信息管理系统（附源码，数据库,教程）.zip
02-20
Java 毕业设计，Java 课程设计，基于 SpringBoot +Vue 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 661
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 289
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
vue3 reactive原理（二）-代理Set和Map及ref原理
KEEP CODING
07-25 1205
Set和Map类型的数据也属于异质对象，它们有特定的属性和方法用来操作自身。因此创建代理时，针对特殊的方法需要特殊的对待。 Vue 的ref 是基于reactive函数实现的，它在其基础上，增加了基本类型的响应性、解决reactive在解构时丢失响应性的问题及在模版字面量中自动脱落Ref.
common-intellisense：助力TinyVue 组件书写体验更丝滑
OpenTiny的博客
07-24 1121
本文由体验技术团队Kagol原创~前两天，common-intellisense 开源项目的作者 Simon-He95 在 VueConf 2024 群里发了一个重磅消息：common-intellisense 支持 TinyVue 组件库啦！common-intellisense 插件能够提供超级强大的智能提示功能，包含属性(props)、事件(events)、插槽(slots)以及对应的注释和类型，实例上的方法(methods)等等，支持多个UI库，让你的开发效率更上一层楼。
vue中的nexttrick
最新发布
gt8011的博客
07-25 486
nextTick是 Vue 中一个强大的工具，它允许你在 DOM 更新完成后执行代码。正确使用nextTick可以避免很多常见的问题，但也要注意不要过度依赖它，以免影响应用的性能。如果你对nextTick有更深入的问题或需要示例代码，请随时提问。我会尽力提供帮助。
vue 新手指引跳转页面
08-02
对于Vue新手指引跳转页面的问题，可以使用Vue Router来实现。在每个页面加载时，可以通过router.push方法来跳转到下一个路由，并在下一个路由的组件中加载新手指引。具体实现可以参考以下步骤： 1. 首先，在Vue项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

龙洋静

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

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

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

打赏作者

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

抵扣说明：

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

余额充值