【5k字长文 | Vue学习笔记】#1 认识Vue对象和基础语法

Vue是一个非常流行的渐进式JavaScript框架,渐进式指的是自底向上,从小组件逐渐向上构成整个项目,渐进式还可以理解为:用什么就拿什么,每个组件只做自己的事,尽可能解耦合。

本节我们将学习简单的Vue实例,选用版本是Vue2(更加稳定且生态丰富)。

请确保在学习本内容前,你有一定的HTMLJavaScript基础(要理解JavaScript的对象的概念)。

在刚开始学习的时候,我们可以用在页面中引入Vue.js的方法来使用Vue,但是后续实际开发的时候还是要用Node.js来构建Vue项目。

Node.js:一个包管理工具,你可以理解为python中的pip或者anaconda,不过node.js是一种面向js的管理工具。

1.引入Vue.js

先创建一个HTML页面,内容如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><!--引入Vue2--><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.0.0-rc.1/vue.min.js"></script>
</head>
<body></body><script>
//咱们自己的代码写在这里
</script></html>

2.创建Vue实例

Vue实例是Vue.js中最基本的单元,通过new Vue(构造参数)可以得到一个实例对象。

在后面,我们不再叫Vue对象,而是Vue实例,这更加准确,并且有助于与数据对象进行区分。

一般我们会用vm来命名一个Vue对象。(vm: ViewModel试图模型)

body里面添加一个div,并将其id设置为app,这个命名是自己定的,但是通常情况下都使用app

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

这里的{{msg}}是一种“显式调用”,这里将会把app对应的Vue实例中的data中的msg取出来放到这里,并实现数据的“双向绑定”。先不要管这些概念,有个大概了解就好。

Vue实例和一个DOM对象利用id进行绑定,并且这个绑定是双向的,意思是如果我们修改Vue实例中的数据,DOM中的也会改变,反之亦然。

然后我们在<script>中创建一个Vue实例,它可以包含一些属性,这些属性用一个对象包起来:

const vm = new Vue({el: "#app",//绑定到对应的dom上data: function(){return {msg : "Hello, World!"}}
})

注意看这里的data里面是一个函数,它返回一个对象,里面可以放一些数据(键值对)。

现在打开这个html,它就会显示一个"Hello, World!"字符串。

3.Vue实例的常用属性

  • el:表示Vue实例将要挂载到的元素。它可以是一个CSS选择器字符串,也可以是一个DOM元素。当Vue实例被创建时,它会自动将自己挂载到这个元素上。
  • data:表示Vue实例的数据对象。它可以包含各种数据属性,用于存储和管理Vue实例的状态。这些数据属性可以在模板中被访问和展示。它的值是一个函数,这个函数返回一个数据对象。
  • methods:表示Vue实例的方法。这些方法可以在模板和Vue实例内部通过this访问。注意这个不能使用() => 的形式来写,因为这样是不能用this的

4.给实例加一些方法

我们来实现这样一个功能:点击按钮,让页面上的元素值+1或-1。

先写下HTML:

<div id="app"><h1>{{msg}}{{cnt}}</h1><button>ADD</button><button>SUB</button>
</div>

我们的业务逻辑如何设计呢?原理就是在Vue实例的methods属性中添加两个函数用于修改cnt的值,然后将它们分别绑定到两个按钮的点击事件上即可。

写一个Vue实例,通过el属性绑定到#app这个DOM上面。

const vm = new Vue({el: "#app",//绑定到对应的dom元素上data: function(){return {msg: "Count : ",cnt: 0}},methods:{add(){this.cnt ++//注意这里一定要写this否则会出错},sub(){this.cnt --}}
})

接下来将这两个函数绑定到按钮事件上,可以使用v-on:click或者@click属性来设置(但是@click是Vue3.x的语法糖,我也不知道为啥在Vue2.x可以用,很神秘):

<div id="app"><h1>{{msg}}{{cnt}}</h1><button v-on:click="add">ADD</button><button @click="sub">SUB</button>
</div>

以下是一些常见的监听器(不用谢我,点个赞不过分叭):

  • v-on:mouseover:鼠标移动到元素上时触发的事件监听器。
  • v-on:mouseout:鼠标从元素上移开时触发的事件监听器。
  • v-on:mousemove:鼠标在元素上移动时触发的事件监听器。
  • v-on:keydown:按下键盘按键时触发的事件监听器,,只有在获得焦点时有效。
  • v-on:keyup:释放键盘按键时触发的事件监听器,只有在获得焦点时有效。
  • v-on:focus:元素获得焦点时触发的事件监听器。
  • v-on:blur:元素失去焦点时触发的事件监听器。
  • v-on:change:元素值发生变化时触发的事件监听器,一般配合输入框使用。
  • v-on:submit:表单提交时触发的事件监听器。
  • v-on:click:鼠标点击元素时触发的事件监听器。

5.条件与循环

Vue中,可以在HTML中使用v-if属性来设置条件,使用v-for来设置循环。

<div id="app"><li v-for="item in items">姓名:{{item.name}}大学:{{item.university}} 网址:<a v-bind:href="item.url">{{item.url}}</a></li>
</div>

我们可以看到HTML中仅需写一个li,就可以实现循环生成多个li的功能。

我们写的Vue实例如下:

const vm = new Vue({el: "#app",//绑定DOM元素,注意一定要写#data: function(){return {msg: "Hello",//这个可以不写items:[{name: "张三", university: "武汉理工大学", url: "https://www.baidu.com"},{name: "李四", university: "武汉原神大学", url:"https://www.yuanshen.com"},{name: "李四2号", university: "湖北原神大学", url:"https://www.yuanshen.com"},{name: "王五", university: "武汉冰红茶大学", url:"https://www.binghongcha.com"},]}},
})

结果如图:

并且我们可以再加一个v-if属性,来筛选大学中带有"武汉"的对象。

<div id="app"><li v-for="item in items" v-if="item.university.indexOf('武汉') != -1">姓名:{{item.name}}大学:{{item.university}} 网址:<a v-bind:href="item.url">{{item.url}}</a></li>
</div>

结果如下:

Vue中,可以使用javascript语句:[可迭代数据对象名].push({数据对象})来新增一个数据。

6.处理用户输入

在前面的例子中我们尝试了使用按钮来进行交互,现在我们来看下Vue如何处理用户的输入框。

我们来实现一个input输入框:输入什么,页面上就显示什么,实时更新。

这里我们需要用到v-model属性来将input输入框和message变量来绑定。

<div id="app"><p>Message is: {{message}}</p><input v-model="message" placeholder="edit me">
</div>

Vue实例如下:

const vm = new Vue({el: "#app",data: function(){return {message: ""}},
})

效果如下:

v-model 指令在表单 <input>,<textarea>,<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

7.写在最后

本文仅作一个Vue的入门学习,没有具体全面的逐个学习组件,而是挑选一些简单有趣的例子进行实现。

我自己也还在学习中,希望一起进步!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/200874.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

线性代数 - 几何原理

目录 序言向量的定义线性组合、张成空间与向量基线性变换和矩阵线性复合变换与矩阵乘法三维空间的线性变换行列式矩阵的秩和逆矩阵维度变换点乘叉乘基变换特征值和特征向量抽象向量空间 序言 欢迎阅读这篇关于线性代数的文章。在这里&#xff0c;我们将从一个全新的角度去探索线…

机器学习第10天:集成学习

文章目录 机器学习专栏 介绍 投票分类器 介绍 代码 核心代码 示例代码 软投票与硬投票 bagging与pasting 介绍 核心代码 随机森林 介绍 代码 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 介绍 集成学习的思想是很直观的&#xff1a;多个人判断的结合往往比…

家政保洁预约小程序app开发特点有哪些?

家政预约服务小程序APP开发的特点介绍&#xff1b; 1. 低成本&#xff1a;用户通过手机APP下单&#xff0c;省去了中介费用&#xff0c;降低了雇主的雇佣成本。 2. 高收入&#xff1a;家政服务人员通过手机APP接单&#xff0c;省去了中介费用&#xff0c;从而提高了服务人员的…

QT专栏1 -Qt安装教程

#本文时间2023年11月18日&#xff0c;Qt 6.6# Qt 安装简要说明&#xff1a; Qt有两个版本一个是商业版本&#xff08;收费&#xff09;&#xff0c;另一个是开源版本&#xff08;免费&#xff09;&#xff1b; 打开安装程序时&#xff0c;通过判断账号是否有公司&#xff0c;安…

校园报修抢修小程序系统开发 物业小区报修预约上门维修工单系统

开发的功能模块有&#xff1a; 1.报修工单提交&#xff1a;学生、教职员工等可以使用小程序提交报修请求。这通常包括选择报修的问题类型&#xff08;如水漏、电器故障、照明问题等&#xff09;&#xff0c;地点&#xff0c;报修联系人&#xff0c;联系电话等&#xff0c;并提供…

API之 要求接口上传pdf 以 合同PDF的二进制数据,multpart方式上传

实现 //时间戳13位毫秒private function getMillisecond() {list($s1,$s2) explode( ,microtime());return (float)sprintf(%.0f,(floatval($s1) floatval($s2)) * 1000);}// 组装参数private function gysscPost1($url,$data){// $data[timestamp] 1694402111964;$data[tim…

一个测试驱动的Spring Boot应用程序开发

文章目录 系统任务用户故事搭建开发环境Web应用的框架Spring Boot 自动配置三层架构领域建模域定义与领域驱动设计领域类 业务逻辑功能随机的Challenge验证 表示层RESTSpring Boot和REST API设计API第一个控制器序列化的工作方式使用Spring Boot测试控制器 小结 这里采用面向需…

小程序Tab栏与页面滚动联动

小程序tab栏切换与页面滚动联动 tab栏与页面滚动联动点击tab栏页面跳到指定位置滚动页面时切换tab栏 tab栏与页面滚动联动 在进行小程序开发时&#xff0c;需要实现点击tab栏页面滚动到某一指定位置&#xff0c;并且滚动页面时&#xff0c;小程序的tab栏进行切换。 在一开始&a…

整套数字化招采平台安全防御体系

招采平台作为数字化供应链的重要组成部分&#xff0c;需要确保招标采购过程的安全性,主体信息和交易数据信息尤为重要,通过必要的安全架构、技术和安全管理制度&#xff0c;做到事前防范、事中监管和事后审计的安全防御。 一、平台技术安全架构 1、先进的技术架构&#xff0c…

智能座舱架构与芯片- (12) 软件篇 中

三、智能座舱操作系统 3.1 概述 车载智能计算平台自下而上可大致划分为硬件平台、系统软件&#xff08;硬件抽象层OS内核中间件&#xff09;、功能软件&#xff08;库组件中间件&#xff09;和应用算法软件等四个部分。狭义上的OS特指可直接搭载在硬件上的OS内核&#xff1b;…

SpringCloud 微服务全栈体系(十五)

第十一章 分布式搜索引擎 elasticsearch 五、RestClient 操作文档 为了与索引库操作分离&#xff0c;再次参加一个测试类&#xff0c;做两件事情&#xff1a; 初始化 RestHighLevelClient酒店数据在数据库&#xff0c;需要利用 IHotelService 去查询&#xff0c;所以注入这个接…

【精选】项目管理工具——Maven详解

Maven简介 Maven是一个项目管理工具。它可以帮助程序员构建工程&#xff0c;管理jar包&#xff0c;编译代码&#xff0c;完成测试&#xff0c;项目打包等等。 Maven工具是基于POM&#xff08;Project Object Model&#xff0c;项目对象模型&#xff09;实现的。在Maven的管理下…

redis的集群

高可用方案 1、持久化 2、高可用 主从复制 哨兵模式 集群 主从复制: 主从复制是redis实现高可用的基础&#xff0c;哨兵模式和集群都是在主从复制的基础之上实现高可用 主从复制实现数据的多机备份&#xff0c;以及读写分离&#xff08;主服务器负责写&#xff0c;从服务器…

人工智能给我们的生活带来了巨大的影响?

1. 人工智能从哪些方面给我们带来了影响&#xff1f; 人工智能出现&#xff0c;极大地影响了人类的生活&#xff0c;下面是人工智能所影响的领域&#xff1a; 1. 日常生活 智能家居: AI驱动的设备&#xff0c;如智能扬声器、灯光、恒温器&#xff0c;正在改变我们与家居环境的…

Moonbeam Network已上线原生USDC稳定币

原生USDC已经通过XCM从波卡来到了Moonbeam&#xff0c;该如何利用&#xff1f;此次集成通过把热门的Circle稳定币带来波卡生态&#xff0c;连接了区块链世界与传统金融。现在&#xff0c;用户和开发者可以在Moonbeam网络中踏寻USDC的强大之处。 Moonbeam生态中的Moonwell、FiD…

CPSC发布关于亚马逊含有纽扣电池或硬币电池产品的相关规则标准!UL4200A

2023年9月21日&#xff0c;美国消费品安全委员会&#xff08;CPSC&#xff09;在《联邦公报》上发布了纽扣及硬币电池及相关产品的最终规则&#xff08;DFR&#xff09;16 CFR 1263&#xff0c;以保护6岁以下儿童免受电池摄入危害。DFR将于2023年10月23日生效&#xff0c;除非消…

redis的性能管理和雪崩

redis的性能管理 redis的数据是缓存在内存当中的 系统巡检&#xff1a; 硬件巡检、数据库、nginx、redis、docker、k8s 运维人员必须要关注的redis指标 在日常巡检中需要经常查看这些指标使用情况 info memory #查看redis使用内存的指标 used_memory:11285512 #数据占用的…

Visual Studio Code 从英文界面切换中文

1、先安装中文的插件&#xff0c;直接安装。 2、点击右下角的 change language restart&#xff0c; 让软件重启即可以完成了。

leetcode:914. 卡牌分组(python3解法)

难度&#xff1a;简单 给定一副牌&#xff0c;每张牌上都写着一个整数。 此时&#xff0c;你需要选定一个数字 X&#xff0c;使我们可以将整副牌按下述规则分成 1 组或更多组&#xff1a; 每组都有 X 张牌。组内所有的牌上都写着相同的整数。 仅当你可选的 X > 2 时返回 tru…

基于单片机温湿度PM2.5报警系统

**单片机设计介绍&#xff0c; 基于单片机温湿度PM2.5报警设置系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 单片机温湿度PM2.5报警设置系统是一种智能化的环境检测与报警系统。它主要由单片机、传感器、液晶显示屏、蜂鸣器…