JavaWeb——前端之JS&Vue

发布时间：2023年12月29日

接上篇笔记

4. JavaScript

概念

  • 跨平台、面向对象的脚本语言，使网页可交互
  • 与Java语法类似，但是不需要变异，直接由浏览器解析
  • 1995年Brendan Eich发明，1997年成为ECMA标准（ECMA制定了标准化的脚本程序设计语言ECMAScript，JavaScript是遵守ECMAScript标准的）
  • JS中可以识别HTML标签

1）引入方式

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

  • JS代码位于<script></script>标签之间
  • 在HTML文档中，可以在任意地方，放任意数量的<script>
  • 一般会把脚本置于<body>元素底部，可以改善显示速度

外部脚本：将JS代码定义在外部JS文件中，然后引入

  • 外部文件中就只有JS代码了，不包含<script>标签
  • <script>标签不能自闭合

2）基础语法

书写语法

  • 区分大小写
  • 结尾分号可有可无，建议有
  • 注释与Java同
  • 大括号表示代码块

输出语句

  • window.alert(“小鱼来咯”)——写入警告框
  • document.write(“小鱼又来咯”)——写入HTML，在浏览器中展示
  • console.log(“小鱼双来咯”)——写入浏览器控制台

变量

  • JavaScript中用var关键字来声明变量，可以重复使用
  • 弱类型语言，可以存放不同类型的值
  • 变量名需要遵循的规则
    • 组成字符：字母、数字、下划线、美元符号
    • 数字不能开头
    • 建议使用驼峰命名
    • 作用域是全局
  • 注：ECMAScript 6新增了let关键字来定义变量——局部变量，不允许重复声明；新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变
  • 有原始类型和引用类型共5种（number、string、boolean、null(返回Object，null可以解释为对象的占位符)、undefined(声明的变量未初始化时，变量的默认值)），可以使用alert(typeof 变量名)获取变量的类型

运算符

  • 与Java同
  • 特别
    • ==会进行类型转换
    • ===不会进行类型转换

类型转换

  • 字符串转int：parseInt(“字符串”);碰到第一个不是数字的就会停止，如果全都不是数字，返回NAN
  • 其他类型转换为boolean：
    • number：0和NaN为false，其余为true
    • string：空字符串为false，其余为true
    • Null和undefined：均转为false

流程控制语句与Java同

3）函数

定义： function关键字

function functionName (参数1，参数2) {

? // 要执行的代码

}

var add = functionName(参数) {

}

注意：

JS是弱类型的，形参不需要指定类型，也不需要指定返回值的类型

可以传递任意个数的参数，但是函数只会用它自己需要的

4）对象

基本对象：

①Array

  • 定义：var 变量名 = new Array(元素列表); / var 变量名 = [元素列表];
  • 访问：变量名[索引] = 值;
  • 注意：长度可变；类型可变
  • 属性：length—— 数量
  • 方法：forEach()——遍历数组中有值的元素
  • ? push()—— 添加元素到数组的尾部
  • ? splice()——删除元素

②String

  • 定义：var 变量名 = new String(“…”); var 变量名 = “…”;
  • 属性：length——长度
  • 方法：charAt()——返回在指定位置的字符
  • ? indexOf()——检索某个子字符串的位置
  • ? trim()——去除字符串两边的空格
  • ? substring()——提取字符串两个指定索引号之间的字符，左闭右开

③JSON

JS中自定义对象

  • 定义：

var 对象名 = {

? 属性名1：属性值1，

? …

? 函数名：function(形参列表) {

? 要执行的方法

? }

? 函数名(形参列表) {

? 要执行的方法

? }

};

  • 调用：
    • 对象名.属性名;
    • 对象名.函数名();

JSON(JavaScript Object Notation, JavaScript对象标记法)——JS自定义对象中将属性名也用双引号引起

  • 定义：
    • var 变量名 = ‘{“key1”: value1, “key2”: value2}’;
  • 特点：语法简单，层次结构鲜明
  • 作用：作为数据载体，在网络中进行数据传输
  • JSON字符串转为JS对象
    • var jsObject = JSON.parse(userStr);
  • JS对象转为JSON字符串
    • var jsonStr = JSON.stringify(jsObject);

浏览器对象：

BOM(Browser Object Model, 浏览器对象模型)，允许JavaScript与浏览器对话，将浏览器的各个组成部分封装为对象

组成：

  • Window：浏览器窗口对象
  • Navigator：浏览器对象（内核等）
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

文档对象：

DOM(Document Object Model, 文档对象模型)

作用：将标记语言的各个组成部分封装为对应的对象——>DOM树

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

DOM+事件监听机制来控制网页行为

  • 改变HTML元素的内容
  • 改变HTML元素的样式
  • 对HTML DOM事件作出反应
  • 添加和删除HTML元素

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5）事件监听

  • 事件：发生在HTML元素上的事情（按钮被点击，鼠标移动到元素上，按下键盘按键）
  • 事件监听：JS可以在事件被侦测到时执行代码
  • 事件绑定：
    • 方式一：通过HTML标签中的事件属性进行绑定
    • 方式二：通过DOM元素属性绑定
  • 常见事件：
  • 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5. Vue

概念： 一套前端框架，免除原生JS中的DOM操作。框架是一个半成品软件，是可以重用、通用的软件基础代码模型，就是不用从0开始了。

思想： 基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

在这里插入图片描述

引入： <script src=“js/vue.js”> </script>

数据模型： 在JS代码区域，创建Vue核心对象，定义数据模型

<script>

? new Vue ({

? el :“#app”,

? data:{

? message:“Hello Vue!”

? },

? methods:{

? // 具体的函数实现

? }

? })

</script>

视图模型：在body里面写的

<div id=“app”>

? <input type=“text” v-model=“message”>

? {{ message }} // 插值模型，里面的内容可以是变量、三元运算符、函数调用、算数运算

</div>

常用指令： HTML标签上带有v-前缀的特殊属性，不同指令有不同的含义

在这里插入图片描述

v-bind和v-model绑定的变量，必须要在数据模型中声明

Vue的生命周期： 指一个对象从创建到销毁的整个过程。每出发一个生命周期事件，会自动执行一个生命周期方法（钩子）

在这里插入图片描述

  • beforeCreate：Vue实例创建初期
  • created：Vue实例初始化
  • beforeMount：创建 vm.$el，并用其替换el之前
  • mounted：创建 vm.$el，并用其替换el之后——发送异步请求到后端获取数据
  • 挂载完毕
  • beforeUpdate：当data被修改时
  • updated：虚拟DOM重新渲染并应用更新之后
  • beforeDestory：当调用vm.$destroy()函数时
  • 解除绑定，销毁子组件以及事件监听器
  • destroyed：销毁完毕

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_44689664/article/details/135295249
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章