Vue | 基础语法快速入门

最新推荐文章于 2024-07-24 12:54:56 发布
最新推荐文章于 2024-07-24 12:54:56 发布
阅读量574 收藏 16
点赞数 2
分类专栏： 前端 文章标签： vue.js javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45716120/article/details/112971775
版权
本文详细介绍了Vue.js的基本概念和核心特性，包括模板语法、基础指令（如分支判断、循环和事件绑定）、表单数据双向绑定、组件使用以及网络通信Axios。通过实例展示了Vue如何简化前端开发，实现数据驱动视图，并探讨了计算属性、插槽的使用和自定义事件分发。此外，还涵盖了Vue组件化开发和与后台交互的基本操作。
摘要由CSDN通过智能技术生成

文章目录

一、初识 Vue.js

Vue.js 是啥 ？

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  • Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
  • 当与现代化的工具链以及各种支持类库结合使用时，Vue 能够为复杂的单页应用提供驱动。

为啥要用 Vue.js ？
学过 jsp 与 php 的应该都知道，当前端页面要加载后台数据时，如发送 Ajax 请求，往往需要通过繁琐的修改 DOM 来更新数据。
有了 Vue.js，我们便可以轻轻松松地完成数据绑定工作，同时也避免大量的原生 javascript 或者是 jQuery 代码，给前端开发带来了很大的方便
除此之外，许多 UI 框架都会涉及到 Vue，因为其具有丰富的组件库
最后，Vue.js 是实现前后端分离的关键，其可以实现前端模块化与工程化开发

二、Vue.js 模板语法

Vue.js 的模板语法为：{{ data }}，其中的 data 为需要显示的数据的变量名（即在 Vue 实例的 data 中定义的 key 值）
在写 Vue 之前，需引入其 CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

第一个 Vue 程序如下：

    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'vue-01~~~',
            }
        });
    </script>

浏览器运行后会显示 js 中 Vue 实例对应的 data 的 message 值（这里为：vue-01~~~），我们无需与 HTML 直接交互，一个 Vue 应用可以挂载到一个 DOM 元素上，即 Vue 实例中 el 的 id 与 html 标签的 id 一一对应绑定，data 定义 Vue 应用的数据，如这里的 message，HTML 的 DOM 中只需通过模板（两个大括号）包裹 data 中定义的 key 即可显示对应的数据

三、Vue.js 基础指令

掌握了 Vue.js 的模板语法后，我们首先掌握一些基础指令的使用，同时以下的基础指令也是经常要用到的

1、分支判断

    <div id="app">
        <h1 v-if="date=='Yesterday'">昨天</h1>
        <h1 v-if="date=='Today'">今天</h1>
        <h1 v-else-if="date=='Tommrrow'">明天</h1>
        <h1 v-else>后天</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                date: 'Today'
            }
        });
    </script>

date 的值为 Toady，则最终显示的是文本是“今天”

2、循环

    <div id="app">
        <li v-for = "(item, index) in items">
            第{{index}}个标签： {{item.message}}
        </li>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                items: [
                    {message: '昨天不够认真'},
                    {message: '今天加油冲'},
                    {message: '明天会更好'}
                ]
            }
        });
    </script>

v-for 标签类似于 for each 循环，在 javascript 中，方括号对应数组，大括号对应对象，需通过【对象.属性名】获取对象的属性值，
同时通过 index 参数，我们可以得到循环的索引，其默认从 0 开始

3、事件绑定

    <div id="app">
        <button v-on:click = "eventTest">Vue注册事件</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: '事件绑定学习'
            },
            methods: {
                eventTest: function() {
                    alert(this.message);
                }
            }
        });
    </script>

通过 v-on 绑定事件，v-on:click 表示绑定的是点击事件，绑定的事件需在 Vue 实例的 methods 中声明，注意不要少了 methods 末尾的 s

四、表单数据双向绑定

表单通过 v-model 实现数据双向绑定，当表单的数据发生变化时，对应 Vue 实例中 data 中相应变量的值也会发生变化
我们可将 Vue 实例中的变量回显出来，以查看双向绑定的效果，具体实例如下：

1、输入框

    <div id="app">
        输入：<input type="text" v-model = "message">
        回显：{{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: ''
            }
        });
    </script>

运行效果如下：
在这里插入图片描述

2、文本域

    <div id="app">
        输入：<textarea name="" id="" cols="30" rows="10" v-model = "message"></textarea>
        回显：{{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: ''
            }
        });
    </script>

运行效果如下：
在这里插入图片描述

3、单选框

    <div id="app">
        单选：
        <input type="radio" name="food" value="苹果" v-model="radioVal">苹果
        <input type="radio" name="food" value="西瓜" v-model="radioVal">西瓜
        <br>
        回显：{{radioVal}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                radioVal: ''
            }
        });
    </script>

运行效果如下：
在这里插入图片描述

4、下拉框

    <div id="app">
        下拉框：
        <select v-model = "selectVal">
            <option value="" disabled>请选择</option>
            <option>苹果</option>
            <option>西瓜</option>
            <option>芒果</option>
        </select>
        回显：{{selectVal}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                selectVal: ''
            }
        });
    </script>

运行效果如下：
在这里插入图片描述
可以看到，通过双向绑定，可以很容易地实现回显效果，比用原生 javascript 写简直方便太多

五、Vue 组件

组件 Component 是 Vue 中一个重要的概念。在前端模块化开发中，一个 web 页面是由一个个组件组合拼接而成的，我们可以很方便地对组件进行修改
通过定义组件，还可以实现自定义标签的效果

    <div id="app">
        <diytag v-for = "item in items" v-bind:mydata="item"></diytag>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        Vue.component("diytag",{
            props: ['mydata'],
            template: '<li>{{mydata}}</li>'
        });

        var vm = new Vue({
            el: "#app",
            data: {
                items: ["1st", "2nd", "3rd"]
            }
        });
    </script>

其中，divtag 为组件名，props 为组件接收的参数，template 为组件的模板（即我们通过引入自定义标签即可显示模板中的内容）
运行效果如下：
在这里插入图片描述

六、网络通信 Axios

Vue 中主要通过 Axios 与后台交互，其可以很方便的发送 Ajax 请求，同时对 data 中的变量的值进行更新
首先，引入 Axios 的 CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在当前目录下创建一个 data.json，用于模拟后端返回的 json 数据
data.json：

{
    "name": "今天要学习",
    "url": "https://www.baidu.com",
    "age": 3,
    "school": {
        "xiaoxue": "小学",
        "chuzhong": "初中",
        "gaozhong": "高中"
    },
    "friends": [
        {
            "name": "xiaoming",
            "age":1
        },
        {
            "name": "xiaohong",
            "age":2
        },
        {
            "name": "xiaohua",
            "age":3
        }
    ]
}

页面内容：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-clock>
        <div>{{info.name}}</div>
        <div>{{info.url}}</div>
        <div>{{info.school.xiaoxue}}</div>
        <div>{{info.friends[0].name}}</div>
        <a v-bind:href = "info.url">点击跳转</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    info:{
                        name: null,
                        url: null,
                        age: null,
                        school: null,
                        friends: null
                    }
                }
            },
            mounted() {
                axios.get('data.json').then(response => (this.info = response.data));
            }
        });
    </script>
</body>

注意：
这里是 data() ，而不是 data：
并且 data() 内部需含 return，在 return 内部声明 json 的键值对形式（即需要定义与 json 中的键名一致的变量）。这种方式可将数据直接返回。同时，结合钩子函数 mounted（当视图被加载时会先执行该方法），可以实现组件数据初始化的操作。

七、计算属性

    <div id="app" v-clock>
        <div>function调用：{{currentTime1()}}</div>
        <div>计算属性调用：{{currentTime2}}</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message : 'hello'
            },
            methods: {
                currentTime1: function() {
                    return Date.now();
                }
            },
            computed: {
                currentTime2: function() {
                    this.message;
                    return Date.now();
                }
            }
        });
    </script>

计算属性用于返回计算结果，其在 computed 中定义，类似于 function，但在调用计算属性时末尾没有括号！
运行效果如下：
在这里插入图片描述

八、插槽的使用

    <div id="app">
        <news>
            <news-title slot="news-title" :title = "title"></news-title>
            <news-items slot="news-items" v-for = "item in items" v-bind:item = "item"></news-items>
        </news>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        Vue.component("news",{
            template:'<div>\
                            <slot name="news-title"></slot>\
                            <ul>\
                                <slot name="news-items"></slot>\
                            </ul>\
                      </div>'        
        });

        Vue.component("news-title",{
            props: ['title'],
            template: '<div>{{title}}</div>'
        });

        Vue.component("news-items",{
            props: ['item'],
            template: '<li>{{item}}</li>'
        });

        var vm = new Vue({
            el: "#app",
            data: {
                title: '插槽的使用',
                items: ['标签1','标签2','标签3']
            }
        });
    </script>

运行效果如下：
在这里插入图片描述
插槽相当于一个模板占位符，可以在一个大的模板中引入插槽 slot，slot 可以当成是内部更小的 Component，使得页面的标签更为组件化、模块化，语义更为清晰。同样地，Component 还是通过 props 参数接收 Vue 实例中的 data 参数值

九、自定义事件分发

这里要实现一个点击子标签旁边的按钮进行删除的操作，显然我们需要为子标签（即 li）所在的 Component 绑定一个删除事件，而这个删除的函数 removeItem 是在 Vue 实例中定义的，我们如何能够在组件内部调用 Vue 实例中的 function 呢？
此时就可以用到自定义事件分发了。我们在页面的 HTML 部分通过 v-on 给插槽的元素绑定一个自定义事件，名为 remove，它被赋值为 Vue 实例的 removeItem 删除方法（页面标签可以获取到 Vue 实例中的属性方法）。
然后在对应的组件内部定义名为 remove 的自定义函数，在其内部通过：

 this.$emit('自定义事件名',参数)

来调用对应页面中绑定的 Vue 实例中的 removeItem 方法，参数为 index。
简单来说，就是通过页面标签的事件进行一个连接，然后在组件内部通过 this.$emit() 进行调用

    <div id="app">
        <news>
            <news-title slot="news-title" :title = "title"></news-title>
            <news-items slot="news-items" v-for = "(item, index) in items"
             v-bind:item = "item" v-on:remove="removeItem(index)" :index = "index"></news-items>
        </news>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        Vue.component("news",{
            template:'<div>\
                            <slot name="news-title"></slot>\
                            <ul>\
                                <slot name="news-items"></slot>\
                            </ul>\
                      </div>'        
        });

        Vue.component("news-title",{
            props: ['title'],
            template: '<div>{{title}}</div>'
        });

        Vue.component("news-items",{
            props: ['item'],
            template: '<li>{{item}}<button @click="remove">点击删除</button></li>',
            methods: {
                remove: function(index) {
                    this.$emit('remove', index);
                }
            }
        });

        var vm = new Vue({
            el: "#app",
            data: {
                title: '自定义事件分发',
                items: ['标签1','标签2','标签3']
            },
            methods: {
                removeItem: function(index) {
                    this.items.splice(index,1);
                }
            }
        });
    </script>

运行效果如下：
在这里插入图片描述
附录：

只是曾路过
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue 快速入门
lucien_ma的博客
10-25 276
Vue Soc：关注度分离原则 HTML+ CSS + JS: 视图：给用户看，刷新后台给的数据 网络通信：axios 页面跳转：vue-router 状态管理：vuex Vue-UI：ICE 前端的打包工具：webpack NPM：项目综合管理工具，类似于 maven 我的第一个 vue 程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt
vue.js入门教程之基础语法小结
10-21
在这个“vue.js入门教程之基础语法小结”中，我们将深入探讨Vue.js的基本语法，帮助初学者快速掌握其核心概念。 1. 插入文本 在Vue中，我们可以使用双大括号`{{ }}`来插入文本。例如，`<span>Message: {{ text }}...
Vue快速入门
Major_S的博客
01-31 341
Git &GitHub
Vue——快速入门 模板语法 指令（一）
每天一个前端小知识~
12-03 1229
一、Vue是什么 Vue 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 Vue官网：https://cn.vuejs.org/ 二、快速入门 下面我们比较 传统jquery和Vue 点击事件传值的区别 效果图： 1.jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jq点击事件&lt
【Vue快速入门】
棒棒的邦邦
08-27 877
一、简介 Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。 1.MVVM编程思想 MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染 M（model）：普通的javascript数据对象 V（view）：前端展示页面 VM（ViewModel）：用于双向绑定数据与页面，对于我们的课
Vue_快速入门
qq_44509920的博客
09-22 186
文章目录1.前言2.认识Vue3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.3.vue入门案例3.3.1.HTML模板3.3.2.vue渲染3.3.3.双向绑定3.3.4.事件处理 1.前言 前端开发模式的发展。 静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了Ja
一、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...
Vue.js 基础语法简介，入门级基础语法
05-19
### Vue.js 基础语法详解 #### 一、Vue.js 概述 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它以轻量级的库出现，专注于视图层，因此非常容易学习且能很好地与现有的项目和其他库集成。Vue 的设计...
vue入门基础语法基本使用以及组件配置安装教程.zip
05-15
以下是一个关于 Vue.js 入门基础语法、基本使用以及组件配置和安装的简要教程 1. Vue.js 基础语法和基本使用 数据绑定 指令 事件处理 2. 组件配置和安装 全局组件注册 局部组件注册 使用 Vue CLI 搭建项目并安装组件...
Vue的快速入门
qq_63534255的博客
10-17 465
百度一下{{url}}-->案例效果：在输入框中输入网址，动态改变超链接的地址,并动态的将输入框中的信息展示出来。点我点我
vue-快速入门
最新发布
qq_62892403的博客
07-24 1124
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
vue快速入门
weixin_53616401的博客
05-18 473
Vue 是一套构建用户界面的。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现和。
VUE学习笔记
chuangkui8021的博客
08-29 386
Vue项目骨架下载: 骨架下载 1,安装依赖的命令:npm install 2,启动依赖: "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js...
大牛教你Vue 快速入门实现？新手小白速度来收藏!!!干货满满！
VUE2020的博客
08-29 642
VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博… VUE 快速入门 官方js文件下载 cn.vuejs.org 业务及代码实现 构建HTML页面，呈现如下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。 第一步：定义HTML页面并引
Vue 快速入门
Alittle_lazy的博客
06-08 234
Vue是现在主流的前端开发框架 提供DIFF算法支持，优异的视图渲染性能，提高用户的使用体验 Vue提供了虚拟DOM结构，提高前端视图更新效率 Vue提供了完善的技术生态，极大的提高了前端应用开发效率 Vue同时开发多个版本，包含市场主流版本以及未来的使用趋势...
Vue.js入门教程：MVVM框架对比与基础语法
"本文介绍了Vue.js的基础语法和常用指令，包括MVVM框架的比较以及Vue的相关网址。" 在前端开发领域，MVVM（Model-View-ViewModel）...通过学习Vue的基础语法和常用指令，开发者可以快速上手并开始构建自己的Vue应用。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值