JavaScript 基础知识总结归纳(一)

本文介绍了JavaScript的基础语法,包括引入方式、命名规范、基本数据类型、操作符等内容,并提供了多个示例帮助理解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JS 是用于web的脚本语言,不能独立使用。有自己的变量、函数、控制语句。是一门解释性的语言。

一、基础语法

1、引入方式:和css类似,分行内、内部、外部。外部的js是通过<script src = "js的路径" ></script>进行连接的。

2、命名规范:第一个字符可以是大小写的字母、$、_,不能是数字开头;

                        第二个字符开始可以是数字;

                        不能使用js的保留字、关键字。

3、5种基本的数据类型:number  string  Boolean  undefined  null。

      string 会用 " " 或者 ' ' 包起来。当文本中本身有 " " 或者 ' ' 的,可以通过 \ 来进行转译。

      比如what's this   用string来表示是 ‘what\'s this’

4、操作符

      (1) 一元操作符:

       ① ++(递增/自加)     --(递减/自减))      

<span style="color:#3333ff;">var a = 1;
a = a ++;
console.log(a);    </span><span style="color:#3333ff;">得到的结果是a = 2;</span>
<span style="color:#3333ff;">
</span>
<span style="color:#3333ff;"></span><pre class="javascript" name="code">var b = 2;
b = b --;
console.log(b);    得到的结果是 b = 1;


<span style="color:#3333ff;">var a = 10;
var b = ++a;</span><pre class="javascript" name="code"><span style="color:#3333ff;">console.log(a);
console.log(b);    得到的结果是a = 11; b = 11; </span>


<span style="color:#3333ff;">var a = 10;
var b = a++;</span><pre class="javascript" name="code"><span style="color:#3333ff;">console.log(a);
console.log(b);    得到的结果是 a = 11; b = 10;</span>



      ② +    -

      对非数字类型应用一元+时,该操作符会把这个数据类型强制转换成数值型。

      (2)算数操作符

       +    -    *    /    %

       + 对于字符串起拼接作用。

      (3)逻辑操作符

       ① 不同类型的值转换为布尔值

       对象 true;  空字符串  false;  非空字符串  true;  数值0  false;  任意非0数值、infinity  true;  null  false;  Nan  false;  undefined  false。

       ② 或 || :满足其中一个条件即可;  与 && :必需同时满足;  非 ! :即不等于。

      (4) 关系操作符

       <    <=    >    >=

       返回一个布尔值。

      (5) 相等操作符

       == 相等    != 不相等    ==== 全等    !== 不全等

       == 与!= 是先转换类型再进行比较是否相等

       === 与 !== 不转换类型,直接进行判断是否全等

      (6) 赋值操作

       = :把 = 右边的值赋予左边

      (7) 条件操作符(三目运算符)

       Boolean。expression ? true_value : false_value

      注意:操作符具有优先级之分,可以通过()来提升优先级。

5、注释:单行注释 //      多行注释 /**/




### Vue.js 基础知识总结与归纳 Vue.js个用于构建用户界面的渐进式 JavaScript 框架,其核心库专注于视图层,能够轻松集成到现有项目中[^3]。以下是关于 Vue.js基础知识总结和归纳: #### 1. 核心概念 - **MVVM 模式**:Vue 实现了 MVVM(Model-View-ViewModel)模式,开发者通过绑定数据模型(Model)和视图(View),使得数据变化时视图会自动更新。 - **模板语法**:Vue 使用双大括号 `{{ }}` 表达式将数据插入到 HTML 中[^2]。 - **指令**:Vue 提供了些内置指令(如 `v-if`、`v-for`、`v-bind` 和 `v-on`),用于操作 DOM[^2]。 #### 2. 生命周期 Vue 实例从创建到销毁的过程称为生命周期。以下是关键的生命周期钩子: - `beforeCreate`:实例初始化完成,但尚未挂载数据或事件监听器。 - `created`:实例已完成数据观测,但尚未挂载到 DOM。 - `beforeMount`:模板已编译,但尚未渲染到页面上。 - `mounted`:实例已被挂载到 DOM 上,可以访问真实 DOM[^5]。 - `beforeUpdate`:当数据发生变化时触发,此时 DOM 尚未更新。 - `updated`:DOM 已经根据最新的数据完成更新[^5]。 - `beforeDestroy` 和 `destroyed`:实例即将销毁或已经销毁。 #### 3. 数据绑定 - **单向绑定**:通过 `v-bind` 指令实现父组件向子组件传递数据。 - **双向绑定**:通过 `v-model` 指令实现表单输入与数据之间的同步[^2]。 #### 4. 组件化开发 - **局部组件**:在 `components` 属性中定义组件,并在模板中使用。 - **全局组件**:通过 `Vue.component` 方法注册全局组件。 - **Props 和 Events**:`props` 用于父组件向子组件传递数据,`$emit` 用于子组件向父组件发送事件。 #### 5. 路由管理 Vue Router 是官方提供的路由管理器,用于构建单页面应用中的路由系统。通过配置路由规则,可以实现页面间的切换和参数传递。 #### 6. 状态管理 Vuex 是 Vue 官方的状态管理库,适用于管理复杂的应用状态。它提供了集中式的存储机制,使组件间共享状态变得更加高效。 #### 7. 过渡效果与动画 Vue 提供了丰富的过渡效果支持,包括 CSS 动画、JavaScript 钩子函数等,用于增强用户体验。 #### 8. 插件系统 Vue 具有强大的插件系统,可以通过安装插件扩展核心功能。例如,`vue-router` 和 `vuex` 都是以插件形式提供的。 #### 示例代码 以下是个简单的 Vue 实例示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值