尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

从原生JS到Vue响应式:后端视角下的前端数据绑定与事件处理入门

从原生JS到Vue响应式:后端视角下的前端数据绑定与事件处理入门
📅 发布时间:2026/7/13 16:06:02

一.什么是JavaScript(不重要)

  • JavaScript(简称JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,它能使网页进行可交互操作
  • 不论是概念还是设计,JavaScript和Java是两种完全不同的语言,但是基础语法类似
  • JavaScript在1995年由Brendan Eich发明,并在1997年称为ECMA标准
  • ECMAScript(ES6)是由最新的JavasScript版本(发布于2015年)

二.JS的引入方式

内部脚本:将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中,可以在任何地方,放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部,可以改善显示速度
<script> alter("Hello javaScript") </script>

外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中

  • 外部JS文件中,只包含JS代码,不包含<script>
  • <script>标签不能闭合
<script src = "js/demo.js"></script> alert("Hello World")

三.JS基础语法

1.书写语法

  • 区分大小写:与Java一样,变量名、函数名以及其他一切东西都是区分大小写的
  • 每行结尾的分号可有可无
  • 注释:
    • 单行注释://注释内容
    • 多行注释:/*注释内容*/
  • 大括号表示代码块
判断语句 if(count == 3){ alert(count); }

2.输出语句

使用window.alert()写入警告框

使用document.write()写入HTML输出

使用console.log()写入浏览器控制台

<script> window.alert("hello javascript"); document.write("hello"); console.log("hello"); </script>

3.变量

JavaScript中用var关键字(variable的缩写)来声明变量

特点:

  • 作用域比较大,作为全局变量
  • 可以被重复定义

JavaScript是一门弱类型语言,变量可以存放不同类型的值

变量名需要遵循以下规则:

  • 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
  • 数字不能开头
  • 建议使用驼峰命名
var a = 20; a = "张三";

注意事项:

在es6中新增了两个关键字:let和const

let:用法类似于var,但所声明的变量,只在let关键字所在的代码块内有效,即作为局部变量,且不允许重复声明

const:用来声明一个只读的常量。一旦声明,常量的值就不能被改变

4.数据类型、运算符、流程控制语句

1)数据类型

在JavasScript中分为:原始类型和引用类型

原始类型:

number:数字(整数、小数、NaN(Not a Number))

string:字符串,单双引皆可

boolean:布尔。true、false

null:对象为空

undefined:当声明的变量未初始化时,该变量的默认值是undefined

使用typeof运算符可以获取数据类型:

var a = 20; alert(typeof a)

2)运算符

类型转换:

  • 字符串类型转为数字:
    • 将字符串字面值转为数字。如果字面值不是数字,则转为NaN
其他类型转为数字 alert(parseInt(“12”)); //12 alert(parseInt(“12A45”));//12 alert(parseInt(“A45”)); //NaN(not a number)
  • 其他类型转为boolean:
    • Number:0和NaN为false,其他均转为true
    • String:空字符串为false,其他均转为true
    • Null和undefined:均转为false

3)流程控制

以上所有流程控制语句使用方法均和Java中一致,如果忘记可以点开以下链接复习

Java零基础学习Day04---判断和循环

5.函数

介绍:函数(方法)是被设计为执行特定任务的代码块

定义:JavaScript函数通过function关键字进行定义,语法为:

function functionName(参数1,参数2..){ //要执行的代码 }

注意:

  • 形式参数不需要类型。因为JavaScript是弱类型语言
  • 返回值也不需要定义类型,可以在函数内部直接使用return返回即可

调用:函数名称(实际参数列表)

定义方式1:

function add(a,b){ return a+b; } var result = add(10,20); alert(result)

定义方式2:

var functionName = function(参数1,参数2...){ //要执行的代码 }
var add = function(a,b){ return a+b; } var result = add(10,20); alert(result)

注:JS中,函数调用可以传递任意个数的参数

6.对象

1)Array数组

注:JavaScript中的数组相当于Java中的集合,数组的长度是可变的,而JavaScript是弱类型,所以可以存储任意类型的数据。

aff.forEach(function(e){ console.log(e); }) arr.forEach((e) =>{ console.log(e); })

2)String

3)JSON

JavaScript自定义对象:

JSON-介绍:

概念:JavaScript Object Notation,JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本

由于语法简单,层次结构鲜明,现多用于数据载体,在网络中进行数据传输,例如前后端的请求与响应

注:JSON对象中定义外面必须有个单引号,key值必须有双引号,value值根据情况改变

4)BOM

概念:浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装成对象。

组成(具体要掌握标红的):

Window:浏览器窗口对象

Navigator:浏览器对象

Screen:屏幕对象

History:历史记录对象

Location:地址栏对象

获取 window.alert("Hello BOM"); alert("Hello BOM window"); 方法 confirm - 对话框 --确认:ture;取消:false var flag = confirm("您确认删除该记录吗"); alert(flag); 定时器-setInterval -- 周期性的执行某一个函数 var i = 0; setInterval(function()){ i++ console.log("定时器执行了"+"i"+"次"); },2000);代表每隔2秒执行一次 定时器-setTimeout -- 延迟指定时间执行了一次,后续不会再执行 setTimeout(function(){ alert("JS"); )

alert(location.href); 先执行上一条语句输出后,跳转到新的网址页面 loaction.href = "https://www.baidu.cn"

5)DOM

dom主要关注两点:

  • 第一点是如何获取这个元素。
  • 第二点是如何调用这个元素中的属性or方法从而来操纵html的元素对象(方法和属性查询参考手册)。

方法和属性查询参考手册https://www.w3school.com.cn/index.html

7.JS事件监听

事件:HTML事件是发生在HTML元素上的“事情”,比如:

  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘按键

事件监听:JavaScript可以在事件被侦测到时执行代码

1)事件绑定

2)常见事件

四.Vue

1.什么是Vue

Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写

基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上

官网:https://v2.cn.vuejs.org/

作用:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷,高效

2.Vue的快速入门操作

为什么能直接将数据模型的数据展示出来呢:

因为使用到了一个指令 v-model,这是进行数据绑定的指令,一旦进行了数据绑定,那么数据模型中的数据就会在视图层中显示出来,数据模型的数据变化也会影响视图,视图层中的数据变化也会影响数据模型,双向影响。

3.常用指令

v-model

作用:在表单元素上使用,双向数据绑定。可以方便的获取 or 设置 表单项数据

语法:v-model = “变量名”

注:通过v-bind或者v-model绑定的变量,必须在数据模型中声明,插值表达式不能直接在标签中。

注:v-else-if必须出现在v-if之后,可以出现多个;v-else必须出现在v-if/v-else-if之后

4.生命周期

生命周期:指一个对象从创建到销毁的整个过程

生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)

相关新闻

  • 【python零基础教程第18讲】GIL全局解释器锁 深度解析
  • 黄金回收市场实地探访:从行情波动到门店实测,一份完整的变现参考 - 衡金阁
  • 2026南京香奈儿服饰回收指南:这些款式竟能高价变现 - 信息热点

最新新闻

  • 3分钟学会配置洛雪音乐:免费获取全网高品质音乐的完整指南
  • Qwen2.5-VL-7B-Instruct-da8w8-torchao-v0.16.0震撼发布:AMD ZenDNN优化的CPU视觉语言模型终极指南
  • LRCGET:如何为离线音乐库批量获取专业级同步歌词的终极指南
  • 如何在AMD EPYC CPU上快速部署gpt-oss-20b-BF16-da8w8-torchao-v0.17.0?超详细环境配置指南
  • 从基础到精通:Mistral-7B-Instruct-v0.2_rai_1.7.1_npu_4K提示词工程完全指南
  • 开发者必备:NVIDIA Kimi-K2.6-Eagle3 API参考手册

日新闻

  • AI推荐结果怎么优化:适合深圳少儿素质培训机构的GEO服务商哪家好?全程零代码SAAS操作
  • RAG 实战教学完全指南
  • 企业级API网关架构深度解析:IBM Microgateway的技术实现与选型指南

周新闻

  • IX9104 PCIe5.0 高速交换芯片@ACP#完整规格 + 应用场景总结
  • Unity游戏集成Coze智能体:实现NPC智能对话与知识库联动
  • SAP EPIC 建行回单查询:从标准类CL_EPIC_EXAMPLE_CN_CCB_GHTD到Z类的5处关键修改

月新闻

  • 2026年6月公司网站搭建最新热门渠道测评:四大低成本/零代码平台对比+避坑
  • 【Linux】Linux arm 编译QT程序,出现expected “}“报错
  • 【MATLAB例程】四基站二维AOA定位与距离辅助增强对比仿真。基于角度观测和测距修正的固定目标平面定位精度分析

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号