Vue简单入门

已于 2022-10-19 15:14:48 修改
阅读量210 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-10-19 15:12:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58037062/article/details/127408481
版权

1、Vue的介绍

  • Vue是一套构建用户界面的渐进式前端框架。
  • 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
  • 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
  • 特点易用：在有HTMLCSSJavaScript的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

2、Vue的快速入门

  • 开发步骤
  1. 下载和引入vue.js文件。
  2. 编写入门程序。视图：负责页面渲染，主要由HTML+CSS构成。脚本：负责业务数据模型（Model）以及数据的处理逻辑。
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        {{msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });
</script>
</html>

3、Vue快速入门详解

  • Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。let vm = new Vue({
    选项列表;
    });
  • 选项列表el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。
  • 数据绑定在视图部分获取脚本部分的数据。{{变量名}}

4、Vue快速入门的升级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
        el:"#div",
        data:{
            name:"张三",
            classRoom:"程序员"
        },
        methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

    //定义打招呼方法
    function hi(){
        vm.study();
    }

    //定义修改班级
    function update(){
        vm.classRoom = "程序员";
    }
</script>
</html>

5、Vue入门结束小结

  • Vue是一套构建用户界面的渐进式前端框架。
  • Vue的程序包含视图和脚本两个核心部分。
  • 脚本部分
    • Vue核心对象。
    • 选项列表
      • el：接收获取的元素。
      • data：保存数据。
      • methods：定义方法。
  • 视图部分
    • 数据绑定：{{变量名}}

Vue 常用指令

1、指令介绍

  • 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
  • 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
  • 常用指令

2、文本插值

  • v-html：把文本解析为 HTML 代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{{msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

3、绑定属性

  • v-bind：为 HTML 标签绑定属性值。
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

4、条件渲染

  • v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
  • v-else：条件性的渲染。
  • v-else-if：条件性的渲染。
  • v-show：根据条件展示某元素，区别在于切换的是display属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>
</html>

5、列表渲染

  • v-for：列表渲染，遍历容器的元素或者对象的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>
</html>

6、事件绑定

  • v-on：为 HTML 标签绑定事件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"程序员"
        },
        methods:{
            change(){
                this.name = "程序员"
            }
        }
    });
</script>
</html>

7、表单绑定

  • 表单绑定v-model：在表单元素上创建双向数据绑定。
  • 双向数据绑定更新data数据，页面中的数据也会更新。更新页面数据，data数据也会更新。
  • MVVM模型(ModelViewViewModel)：是MVC模式的改进版在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。将Model和View关联起来的就是ViewModel，它是桥梁。ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>
</html>

8、指令小结

  • 指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
  • 文本插值v-html：把文本解析为HTML代码。
  • 绑定属性v-bind：为HTML标签绑定属性值。
  • 条件渲染v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。v-else：条件性的渲染。v-else-if：条件性的渲染。v-show：根据条件展示某元素，区别在于切换的是display属性的值。
  • 列表渲染v-for：列表渲染，遍历容器的元素或者对象的属性。
  • 事件绑定v-on：为HTML标签绑定事件。
  • 表单绑定v-model：在表单元素上创建双向数据绑定。
善仁-灿哥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue入门到精通（一）
zxpmoxo的博客
01-11 1211
保姆级分享，快速上手并达到开发水准
Vue简单入门.pdf
03-24
Vue.js 是一款流行的前端开发框架，以其简单、精确和快速上手的特点被广泛采用。它是一种渐进式框架，特别适合构建数据驱动的web界面。Vue.js 的设计目标是通过简洁的API实现响应式的数据绑定和组件组合，使得开发者...
Vue学习-Vue入门
weixin_59357453的博客
04-02 4268
这是一篇vue学习记录
VUE入门
weixin_52725665的博客
04-15 111
它是一个Javascript框架，作用:简化dom的操作，以及响应式编程Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
Vue开发简单入门
最新发布
weixin_41247583的博客
05-05 1086
工具链支持： Vue 与现代前端工具链兼容，支持如 Webpack 和 Babel 等工具，以及像 Vuex（状态管理）、Vue Router（路由管理）和 Vue CLI（项目脚手架工具）等官方支持的库和插件。Vue.js 是由前 Google 工程师尤雨溪（Evan You）在 2014 年创建的，其设计的初衷是通过尽可能简单的 API 提供数据响应性和组件化的视图层解决方案。通过以上步骤，你可以搭建一个 Vue.js 开发环境，并开始开发和部署你的第一个 Vue 应用。
vue入门开发
XUN__MLF的博客
02-09 3883
1、介绍 vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代 化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官方网站：Vue.js 2、初始vue <!DOCTYPE html> <html lang="en"> <head> <meta charset
【Vue】快速入门案例与工作流程的讲解
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-17 4041
Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
vue简单入门小案例，vue简单入门小案例
11-30
这个“vue简单入门小案例”是为初学者准备的，旨在帮助那些刚开始接触Vue并希望快速理解其基本概念和用法的开发者。 案例主要基于HTML、CSS和JavaScript构建，HTML作为结构层，Vue.js作为应用的逻辑层，实现数据...
vue小白入门教程
08-27
Vue 小白入门教程 ...下面是一个简单的 Vue 应用程序： ```html <!DOCTYPE html> <title></title> <div>{{title}} ()">单击事件</button></br> 今年{{age}} <script src="lib/vue.js"> ...
vue简单入门.pptx
06-16
vue简单入门.pptx
vue简单入门介绍.docx
11-22
Vue.js的简单易用性和高效的性能使其在前端开发领域受到广泛欢迎。它的核心特性包括组件化、指令系统、虚拟DOM、计算属性、响应式系统等。组件化允许开发者将UI拆分为可复用的部分，提高代码重用率；指令系统如v-if...
vue.js 快速开发入门pdf
02-12
vue.js前端开发快速入门与专业应用.pdf 完整版 适合新手
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue的快速入门
qq_63534255的博客
10-17 457
百度一下{{url}}-->案例效果：在输入框中输入网址，动态改变超链接的地址,并动态的将输入框中的信息展示出来。点我点我
Vue的入门学习
Cream336的博客
07-11 421
通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？我们先来分析下页面的组成。一个完整的html页面包括了视图和数据，数据是通过请求 从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。正因为这种开发流程，所以我们引入了一种叫做，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？如图所示就是MVVM开发思想的含义：)]
Vue介绍与入门（一篇就可入门）
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/
vue基础入门
weixin_58470558的博客
05-13 6310
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue入门——初步了解
秋书一叶的博客
11-25 2098
Vue的简单介绍及快速入门
vue简单入门的项目
01-31
Vue.js 是一款简单易学的前端框架，下面我将用300字详细介绍如何进行Vue简单入门项目。 首先，你需要确保你已经安装了Node.js和npm。然后通过npm全局安装Vue CLI，使用以下命令： npm install -g @vue/cli 接下来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值