Vue入门教程

最新推荐文章于 2024-05-13 08:35:21 发布
最新推荐文章于 2024-05-13 08:35:21 发布
阅读量647 收藏 2
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42696010/article/details/124741490
版权

Vue实战

1.0 简介

什么是vue?

渐进式 JavaScript 框架,让我们很少的操作页面dom,甚至不操作,就可以实现视图与数据的绑定

在使用vue的时候,不要引用jQuery

**渐进式 **

  1. 易用

    已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

  2. 灵活

    不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

  3. 高效

    20kB min+gzip 运行大小 超快虚拟 DOM 最省心的优化

1.1 vue 版本选择(开发,与生产)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1.2 第一个入门程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{
  { msg }}</p>
    {
  { user.name }}
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script !src="">

    const app = new Vue({
        //表示给vue实例作用到那个元素上
        el: "#app",
        //用来给vue实例定义一些相关的数据
        data: {
            msg: "你好vue",
            user: {
                name: "王五"
            }
        }
    });
</script>
</html>
  1. el 表示vue对象的作用范围,在该范围内都可以使用vue的语法
  2. data 表示存放vue对象的一些数据,绑定的数据可以通过{ {数据名}} 取出来
  3. 使用{ {}} 取值的时候可以书写表达式列如{ { name.toLocaleUpperCase()+“oop” }}
  4. el 中可以书写任意的css选择器,在使用vue开发是建议使用id选择器

1.3 v-text与v-html

  • v-text

    可以获取vue中data的数据,以文本的形式渲染到元素中(类似于jQuery中的innerText)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <del v-text="msg"></del> 
    <span v-text="msg"></span>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "你好"
        }
    });
</script>
</html>

总结

使用{ {}}代表插值表达式于v-text的区别

  1. 使用v-text会将标签中原有的数据覆盖,{ {}}不会覆盖
  2. 使用v-text可以避免在网络延迟是,出现数据未渲染的闪烁情况,{ {}}在网络情况差时渲染数据,会出现闪烁情况

  • v-html

    可以获取vue中data的数据,以html的形式渲染到元素中(类似于jQuery中的innerHTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-html="msg"></span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "<i>你好</i>"
        }
    });
</script>
</html>

总结

使用{ {}}代表插值表达式于v-html的区别

  1. 使用v-html会将标签中原有的数据覆盖,{ {}}不会覆盖
  2. 使用v-html可以避免在网络延迟是,出现数据未渲染的闪烁情况,{ {}}在网络情况差时渲染数据,会出现闪烁情况
  3. 使用v-html可以解析html,而{ {}}不会

1.4 vue事件绑定(v-on)

语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button type="button" v-on:click="getDate">点我显示时间</button>
    <span v-text="msg"></span>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            msg:""
        },
        //methods用来定义vue中的事件
        methods: {
     
            getDate: function () {
     
                //在事件函数中,this就是vue实例
                this.msg = new Date();
            }
        }
    });
</script>
</html>

事件总结

  1. 在vue中使用v-on:事件名完成事件于元素的绑定
  2. 在vue中事件函数统一的放在vue对象实例中methods属性管理
  3. 在vue事件函数中this就代表vue对象实例

事件绑定简化写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-text="age"></span>
    <input type="button" value="点击我增长一岁" @click="increment">
    <!--  等价于下面  -->
    <input type="button" value="点击我增长一岁" v-on:click="increment">
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            age: 16
        },
        methods: {
     
            increment: function () {
     
                this.age++;
            }
        }
    });
</script>
</html>

事件绑定简化写法总结

  1. 日后在开发vue中可以使用 @事件名=事件函数的方式,替换v-on:事件名=事件函数 的写法

​ 事件函数简写

methods: {
    // increment: function () {
    //     this.age++;
    // }
    increment() {
        this.age++;
    }
}

1.5 v-show v-if v-bind

V-show 用来表示标签是否显示(其底层是控制的是display属性)不会修改DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="点击我显示时间" @click="showdate">
    <!--  v-show 可以控制标签是否显示  -->
    <p v-show="show" v-text="msg"></p>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
     
        el: "#app",
        data: {
     
            show: false,
            msg: ""
        }, methods: {
     
            showdate() {
     
                this.msg = new Date();
                this.show = !this.show;
            }
        }

    });
</script>
</html>

总结在使用v-show可以直接使用bool值控制,可可以书写bool表达式控制

v-if 于v-show差不多不过(底层控制的是DOM元素) 会修改DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-if="msg==='男'">男</li>
        <li v-else-if="msg==='女'">女</li>
        <li v-else>双性</li>
    </ul>
    <input type="button" value="男" @click="sex('男')"><br>
    <input type="button" value="女" @click="sex('女')"><br>
    <input type="button" value="中性" @click="sex('中性')"><br>

</div>

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

    });
</script>
</html>

v-bind(重点)用来把标签的属性绑定到vue对象属性上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
最低0.47元/天 解锁文章
typ maxval
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端基础-VUE入门教程(一)
hjw15910531612的博客
07-21 3313
总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识
vue小白入门教程
12-13
一、vue是什么 Vue 是一套用于构建用户界面的 渐进式框架 。 压缩后仅有17kb 二、vue环境搭建 你直接下载并用 [removed] 标签引入， Vue 会被注册为一个全局变量。 但在用 Vue 构建大型应用时推荐使用 NPM 安装。 ...
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue快速入门
梵高的向日葵
11-05 8183
文章目录一、Vue快速入门1、第一个Vue程序2、Vue基本语法2.1、if判断2.4、事件双向绑定3、Vue组件4、Axios异步通信5、计算属性6、插槽slot7、自定义事件内容分发8、创建vue项目二、Vue实战1、项目创建2、项目开发未完结 一、Vue快速入门 1、第一个Vue程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti
Vue的学习 —— ＜vue的开发环境＞ “6000字超详细”
2301_78038072的博客
05-13 891
在开始编写Vue应用程序之前，搭建一个合适的开发环境至关重要。本章节将详细指导如何设置和配置Vue的开发环境，确保有一个稳定、高效的工作空间。从安装Node.js开始，因为Vue.js项目需要Node.js来执行构建和打包过程。然后，我们会介绍如何使用Vue CLI（命令行界面）以及Vite创建新的Vue项目，包括一些常见的选项和配置。在创建项目之后，继续探索如何安装和管理项目依赖，以及如何设置开发服务器以便实时预览应用程序。
vue基础教程
shiyzhang
07-24 2747
vue基础教程，带你走进vue
vue教程
sslcsq的博客
03-29 3648
vue教程
vue入门教程.docx
02-26
vuevue入门教程.docxvue入门教程.docx
VUEVue基础教程、实战案例和实战项目讲解
最新发布
05-17
Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和...
vue入门教程.pptx
10-26
vue的基本原理，基础入门，安装教程，语法教程，案例展示。
vue基础教程视频学习资料
12-13
本人买来的视频教程，对VUE基础学习很有帮助，可放心下载，网 盘资源，文档下载后有链接和密码，到度娘处下载学习视频即可。
vue2 基础入门
ClearloveYt的博客
07-03 2590
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 8121
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了
热门推荐
Javachichi的博客
09-14 3万+
网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
vue超详细教程，手把手教你完成vue项目
sylvia_lily的博客
07-14 2万+
Vue 一. Vue简介 ​ Vue是于2013年(与React框架同年发布)推出的一个渐进式、自底向上的前端框架，它的作者叫尤雨溪。那么什么叫做渐进式框架呢？比较官方的说法就是：以Vue内核作为核心，随着业务的深入、需求的递增，可以使用其周边生态(vue-router、vuex、ssr等)深度应用到项目中。那么通俗上来讲：就是我们可以使用vue的部分功能不断的迭代掉我们项目中部分的功能，从表单提交到列表渲染，再到多路由应用，再到SSR等。 ​ Vue主要具备以下几个特点： 解耦视图和数据 组件复
Vue的详细教程--入门
m0_74315688的博客
09-16 2118
什么是vue？它有什么优势？怎么使用vue？vue的基本语法如何掌握？ 如果你也有疑问的话，不妨点进来看看呢！！
vue基础入门
weixin_58470558的博客
05-13 5832
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
初识Vue
Floatwor青舟的博客
10-30 1289
目录为什么学习流行框架框架和库的区别Vue.js简介安装第一个简单实例一些常用指令跑马灯小案例 为什么学习流行框架 企业中为了提高开发效率：在企业中，时间就是效率，效率就是金钱。 提高开发效率的发展历史：原生JS–>Jquery之类的类库–>前端模板引擎–>Angular.js/Vue.js等（能够帮助我们减少不必要的DOM操作，提高渲染效率。通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了） 在Vue中，一个核心的概念就是，让用户不再操作DOM元
vue3入门基础教程
09-06
Vue 3 是一款流行的 JavaScript 框架，用于构建交互式的用户界面。下面是一个简单的 Vue 3 入门基础教程： 1. 安装 Vue 3：你可以通过使用 npm 或 yarn 在你的项目中安装 Vue 3。在命令行中运行以下命令来进行安装： ``` npm install vue@next ``` 或者 ``` yarn add vue@next ``` 2. 创建 Vue 实例：在你的 HTML 文件中，引入 Vue 库，并创建一个新的 Vue 实例。可以在实例化时指定选项对象来配置 Vue 实例。例如： ```javascript <html> <head> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> {{ message }} </div> <script> const app = Vue.createApp({ data() { return { message: 'Hello, Vue 3!' }; } }).mount('#app'); </script> </body> </html> ``` 3. 数据绑定：Vue 3 支持使用双大括号语法将数据绑定到 HTML 模板中。在上面的示例中，`message` 数据绑定到了 `<div>` 元素中。 4. 计算属性：Vue 3 还提供了计算属性的特性，用于在模板中动态计算一些值。可以通过定义 `computed` 对象来创建计算属性。例如： ```javascript const app = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe' }; }, computed: { fullName() { return this.firstName + ' ' + this.lastName; } } }).mount('#app'); ``` 在模板中，你可以直接使用 `fullName` 计算属性。 这只是一个简单的入门教程，Vue 3 还有很多其他功能和概念，例如组件、指令、事件处理等。你可以查阅 Vue 3 的官方文档以获得更详细的了解和学习资源。祝你学习愉快！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值