[TOC]
# 簡單數據類型
Number 數字類型 包含正數 負數 小數
字符串 String 凡是用雙引號或者單引號引起的都是字符串。
布爾數據類型 Boolean 只有2個值一個是true, 一個是false. 實際運算中true=1,false=0
undefined 變量未初始化 定義了變量,沒有給變量賦值
null 變量未引用值為空 object
# 復雜數據類型
★ object 對象
★ array 數組
# 判斷數據類型
typeof()
# 對象
## 對象創建方式
* 對象字面量
~~~
var o = {
name: 'zs',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
~~~
* new Object()創建對象
~~~
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function() {
console.log('Hello,everyBody');
}
~~~
* 工廠函數創建對象
~~~
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everyBody');
}
return person;
}
var p1 = createPerson('張三', 22, 'actor');
~~~
* 自定義構造函數
~~~
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('張三', 22, 'actor');
~~~
## new關鍵字
> 構造函數 ,是一種特殊的函數。主要用來在創建對象時初始化對象, 即為對象成員變量賦初始值,總與new運算符一起使用在創建對象的語句中。
1. 構造函數用于創建一類對象,首字母要大寫。
2. 構造函數要和new一起使用才有意義。
new在執行時會做四件事情
~~~
new會在內存中創建一個新的空對象
new 會讓this指向這個新的對象
執行構造函數 目的:給這個新對象加屬性和方法
new會返回這個新對象
~~~
## this詳解
~~~
JavaScript中的this指向問題,有時候會讓人難以捉摸,隨著學習的深入,我們可以逐漸了解
現在我們需要掌握函數內部的this幾個特點
1. 函數在定義的時候this是不確定的,只有在調用的時候才可以確定
2. 一般函數直接執行,內部this指向全局window
3. 函數作為一個對象的方法,被該對象所調用,那么this指向的是該對象
4. 構造函數中的this其實是一個隱式對象,類似一個初始化的模型,所有方法和屬性都掛載到了這個隱式對象身上,后續通過new關鍵字來調用,從而實現實例化
~~~
# 對象的使用
## 遍歷對象的屬性
> 通過for..in語法可以遍歷一個對象
~~~
var obj = {};
for (var i = 0; i < 10; i++) {
obj[i] = i * 2;
}
for(var key in obj) {
console.log(key + "==" + obj[key]);
}
~~~
## 刪除對象的屬性
~~~
function fun() {
this.name = 'mm';
}
var obj = new fun();
console.log(obj.name); // mm
delete obj.name;
console.log(obj.name); // undefined
~~~
- HTML
- 標簽
- 超鏈接
- 列表
- 表格和表單
- h5新增標簽
- 快捷方式
- 標簽包含
- CSS
- 選擇器
- 行內,塊元素,鏈接
- css三大特性
- 盒子模型
- 定位
- css可見性
- emment書寫
- 文本元素
- 外觀屬性
- 背景
- 浮動
- ps
- 用戶界面樣式
- 顯示和隱藏
- 過渡
- 2D,3D變形
- 動畫animation
- 伸縮布局(CSS3)
- BFC
- 優雅降級和漸進增強
- 3D旋轉
- 雙飛翼和圣杯
- JS基礎
- 輸出消息的幾種方式
- 數據類型
- Date對象
- Math對象
- Array對象
- 字符串常用方法
- 數據類型轉換
- 等號運算
- 代碼調試
- 數組
- 函數
- WebAPI
- webapi簡介
- 獲取頁面元素
- 事件
- 屬性操作
- 創建元素
- 節點操作
- 事件詳解
- BOM
- 位置相關屬性
- 拖拽彈窗
- 彈出層加遮罩
- ES6
- let和const
- 解構表達式變化
- 函數優化
- map和reduce
- nrm
- npm
- npm基礎
- package.json
- 淘寶鏡像
- webpack
- 介紹
- 多入口文件(Multiple entry files)
- Webpack CSS loader加載器
- webpack Image loader 加載圖片
- uglify-js壓縮打包JS
- webpack構建本地服務器
- vue內部指令
- v-if,v-show,v-for
- v-text,v-html
- v-on
- v-model
- v-bind
- v-pre,v-cloak,v-once
- vue全局api
- Vue.directive 自定義指令
- vue.extend構造器的延伸
- vue.set全局操作
- Vue的生命周期(鉤子函數)
- Template 制作模版
- Component 初識組件
- Component 組件props 屬性設置
- Component 父子組件關系
- Component 標簽
- vue選項
- propsData Option全局擴展數據傳遞
- computed Option 計算選項
- Methods Option 方法選項
- watch選項監控數據
- Mixins 混入選項操作
- Extends Option 擴展選項
- delimiters 選項
- vue實例和內置組件
- 實例屬性
- 實例方法
- 實例事件
- 內置組件 -slot
- vue-cli
- vue-cli介紹
- 項目目錄結構
- vue-cli模板
- vue-router
- 簡介
- 配置子路由
- 參數傳遞
- 單頁面多路由區域操作
- url傳遞參數
- vscode