js與vue基礎學習

vue創建項目

安裝node

安裝node、npm、cnpm

node -v
npm -v
#npm服務器位置處于國外，下載包的速度會比較緩慢。阿里為國內用戶提供的cnpm，他是npm的鏡像，下載第三方包時，們完全可以使用cnpm來替代npm。
cnpm -v

在node中執行JavaScript程序

#輸入命令node，按回車鍵即可進入node的終端，然后可以在這個終端輸入JavaScript程序
node# 可以使用node命令執行js文件，例如我們在一個test目錄中新建一個hello.js文件，然后在此目錄下
node hello.js

創建第一個vue項目

目前前端開發最火熱的三大框架分別是React、Angular和Vue

全局安裝vue-cli

# -g指全局安裝，安裝在本機中，只安裝一次
npm install -g @vue/cli

vue創建項目
```
vue create hello
```
創建項目后，根據相應提示進入項目目錄中，使用命令啟動項目
```
npm run serve
# 啟動后根據提示的url訪問
```
項目簡介
- node_modules：存放項目依賴包
- public：存放靜態文件(例如圖片等)
- src：項目源文件，后續開發幾乎都在這個目錄下進行
  - main.js為項目的入口文件
  - App.vue是單文件組件
- 自定義組件一般在components目錄中創建，命名用大駝峰的方式。

組件化開發

以vue為后綴的文件是vue的單文件組件，我們在開發vue應用的過程中，主要任務就是去編寫這些以vue為后綴的文件。大家可以把組件理解成一個，可以自定義的，有更強大功能的標簽。

//main.js文件說明
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false   //配置開發選項，開發過程中的錯誤提示new Vue({render: h => h(App),//上面render箭頭函數相當于下面的return，h也是一個函數createElement，將App組件作為參數傳入//作用：將App.vue組件傳入，createElement可以將App組件渲染到#app（index.html中的id=app的DOM節點），//從而將組件加載到html文件中對應DOM節點中，這樣，就成功地將單文件組件App.vue加載到index.html中了// return (createElement){//   return createElement(app);// }
}).$mount('#app')

vue語法

vue文件說明

<template><!-- 組件的應用 -->
</template><script>//  導入其他組件，定義該組件的數據、方法等
</script><style>/* 組件的樣式  */
</style>

template標簽中添加的是html代碼，template內部所有內容都要包含在一個標簽之內。
script標簽中添加的是JavaScript代碼
style標簽中添加的是CSS樣式。

例子：

<template><!-- template：網頁模板，編寫的是html代碼，template內部所有內容都要包含在一個標簽之內 --><div id="app"><img alt="Vue logo" src="./assets/logo.png"></div>
</template><script>
// script標簽中添加的是JavaScript代碼
import HelloWorld from './components/HelloWorld.vue'
//用模塊化的語法export default將組件的示例暴露給外部,這樣組件文件才能被使用
export default {name: 'App',components: {HelloWorld}
}
</script><style>
/* style標簽中添加的是CSS樣式 */
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

vue模板語法

指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性

v-bind：綁定屬性**（簡寫：）**
v-on：綁定事件**（簡寫@）**

綁定屬性和事件的方法：

<template><div><h1 :title="message">hello world</h1><button @click="sayHi">say hi</button></div>
</template><script>
export default {data(){return {message:"hello vue"}},methods:{sayHi(){alert("Hi!")}}
}
</script>

條件判斷

通過v-if和v-show指令可以控制元素的顯示與隱藏：
- v-if='false'：不會渲染DOM，瀏覽器控制臺查看元素不可見。
- v-show='false'：會渲染DOM，查看元素可見，但是樣式為display:none;，即前端樣式用戶不可見
顯示列表v-for指令

顯示列表的功能在web應用中是非常常見的，例如文章列表、博客列表，學生列表等等，可以使用v-for指令將數據綁定在列表中

組件嵌套

引入組件+注冊組件

<script>
import Hello from "@/components/Hello"
import HelloWorld from "@/components/HelloWorld"     //引入組件
export default {components:{Hello,HelloWorld      //注冊組件}
}
</script>

使用引入的組件

<template><div><Hello img=“”></hello><HelloWorld></HelloWorld>    <!-- 該標簽是自定義組件，引入后可當標簽使用 --><!-- 在template中，組件的標簽不區分大小寫，切駝峰命名的組件可以使用 - 鏈接 ，下面的和HelloWorld是同一個標簽--><Hello-World></Hello-World><hello-world></hello-world></div>
</template>

組件傳值

組件傳值3種情況
- 父級向子級傳遞數據
- 子級向父級傳遞數據
- 非父子級傳遞數據

父級向子級傳值

父級可以通過屬性向子級傳遞數據：

創建子組件，在src/components/文件夾下新建一個Child.vue
Child.vue的中創建props，然后創建一個名為message的屬性

//父級App.vue
<template><div><h1>hello world</h1><!-- 父級通過屬性向子級傳遞數據 --><child :msg="message"></child></div>
</template><script>
import Child from "./components/Child.vue"
export default{components:{Child},data(){return {message:"app.vue data"}}
}
</script><style></style>

//子級Child.vue
<template><div><h1>{{msg}}</h1></div>
</template><script>export default{// 子級獲取父級的數據通過props屬性，msg為子級標簽自定義的屬性props:["msg"]
}
</script>

子級向父級傳遞數據

子級想父級傳遞數據需要用自定義事件:

//父級App.vue
<template><div><h1>{{childData11}}</h1><!-- 父級通過屬性向子級傳遞數據 --><child @myevent="changeData1" :msg="message"></child></div>
</template><script>
import Child from "./components/Child.vue"
export default{components:{Child},data(){return {message:"app.vue data",childData11:""             //默認值}},methods:{changeData1(childData1){this.childData11=childData1;}}
}
</script><style></style>

//子級Child.vue
<template><div><h1>{{msg}}</h1><!-- 點擊按鈕時觸發sendData方法 --><button @click="sendData">向父級傳遞數據</button>   </div>
</template><script>export default{// 子級獲取父級的數據通過props屬性，msg為子級標簽自定義的屬性props:["msg"],data(){return {childData:"I am child"}},methods:{sendData(){this.$emit("myevent",this.childData)     //通過$emit方法可以觸發父級的自定義事件,第二個參數是myevent調用函數的參數}}
}
</script>

非父子級組件傳值

目錄結構：

src
- components
  - Sister.vue
  - Brother.vue
- store.js
- main.js

//store.js
export default {state:{message:"hello vue"},setStateMessage(str){this.state.message = str;}
}<!-- sister組件 -->
<template><h1>{{state.message}}</h1>
</template><script>
import store from "../store.js"
export default {data(){return {title:"sister組件",state:store.state}}
}
</script><!-- brother組件 -->
<template><div><button @click="changeData">change data</button></div>
</template><script>
import store from "../store.js"
export default {methods:{changeData(){store.setStateMessage("122");console.log(store.state.message)}}
}
</script>

參考資料

文檔資料：https://xiaozhoubg.com/book/section/145

視頻：https://www.bilibili.com/video/BV1er4y1P7UN?p=6

vue官網：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

js基礎

變量與運算符

var**（最新版本ES2015使用let，let語法更嚴謹）**

var s = "hello world";    //var用來聲明變量
var s1 = "hello",s2="world";    //逗號可以連續聲明變量

瀏覽器console控制臺打印
```
console.log(s1);
```

數據類型6種

var s = "hello";     //字符串 String類型
var s2 = 100;     //數值  Number類型
var s3 = true;    //布爾類型  Boolean
//另外
//未定義類型（Undefined）：undefined，變量未賦值，值為undefined
var v;
console.log(v);   //v的值為undefined
//空類型（Null）：null，未初始化一個對象，可以暫時賦值null   
//對象（Object）：{}

注意：運算符

//==與===
console.log(20=="20");   //true,不比較數據類型
console.log(20==="20");   //false，常用
//!=與!==
console.log(20!="20");   //false
console.log(20!=="20");   //true，常用//邏輯與或時，常用===和!==

函數

語句塊用{}括起來

函數通過function關鍵字聲明，聲明時不執行，調用時才執行；

//聲明函數
function fun(){//語句
}
//調用函數，調用寫在聲明前也可以正常調用（函數提升特性）
fun();

函數表達式

//函數表達式，沒有函數提升特性
const fun = function(n,m){return n+m;
}
let result = fun(10,20);    //直接用fun調用

函數默認值

function fun = function(n=10,m=20){return n+m;
}
let result = fun();   //沒有實參時使用默認值
console.log(result);
let result = fun(30,5);    //有實參時使用實參
console.log(result);
let result = fun(100);    //也可以傳一個實參，另一個使用默認值
console.log(result);

立即執行函數

//兩個（），即聲明完直接執行，只能調用一次
(function(){console.log("hello")
})()

箭頭函數

//原函數
const fun = function(x){return x * x;
}
let result = fun(2); 
console.log(result);
//對應的箭頭函數,刪去function，在（）和{}之間加個箭頭
const fun = (x) => { return x * x;
}
//一個參數時，還可以在簡化
const fun = x =>  x * x;

箭頭函數中的this；

普通函數中的this指向的是調用該函數的對象
箭頭函數：this在哪里定義，就指向誰

const cat = {name:"miaomiao",sayName(){setInterval(function(){console.log(this.name)},1000)        //定時函數，每1000ms執行一次function}
}
cat.sayName();   //這時無法輸出miaomiao，因為定時函數setInterval返回的是window類型，setInterval內部的this指向的是setInterval函數//使用箭頭函數
const cat = {name:"miaomiao",sayName(){setInterval(() => {console.log(this.name)},1000)        }
}
cat.sayName();   //這時輸出miaomiao

對象

js中的對象：是6種數據類型中的一種；屬性的無序集合

//定義對象
var cat = {name: "miaomiao",age: 16
}
//使用屬性
console.log(cat.age);   //.方式，一般常用
console.log(cat["age"]);   //[""]方式

對象的某個屬性可以是函數值

var cat = {name: "miaomiao",age: 16,sayName: function(){console.log("我是苗苗")},sayName(){           //最新版本ES2015的簡寫方式，不寫functionconsole.log("我是苗苗")},eat: function(food){console.log("吃"+ food);},computed:function(x,y){return x+y;}
}
//調用
cat.sayName()
cat.eat("魚")
var result = cat.computed(1,3);
console.log(result);

屬性賦值

var cat = {name: "miaomiao",sayName: function(){console.log("我是"+this.name)},eat: function(food){console.log("吃"+ food);},computed:function(x,y){return x+y;}
}//賦值使用
cat.name="小白"；
cat.sayName();   //輸出”“我是小白

對象類型
- 自定義對象：封裝
- 內置對象：例如Date，獲取當前時間
- 宿主對象：document
- 第三方對象：jQuery、vue等

面向對象

ES5版本沒有類的概念，通過構造函數實現，構造函數函數名首字母大寫

function Dog(n,a){this.name=n;this.age=a;
}//通過原型對象prototype，為構造函數生成的對象賦予新的方法
Dog.prototype.sayName = function(){console.log('我的名字是${this.name}');
}var dog = new Dog("小白",2);
console.log(dog.name);var dog1 = new Dog("小白2",2);
dog1.sayName();

ES2015（ES6）的面向對象：class

class Dog{constructor(name,age){   //構造函數this.name=name;this.age=age;}sayName(){        //其他方法console.log('我的名字是${this.name}');}
}
let dog = new Dog("小白",2);
console.log(dog.name);
dog.sayName()；

ES6的繼承

class Animal{constructor(name){   //構造函數this.name=name;}sayName(){        //其他方法console.log('我的名字是${this.name}');}
}class Dog extends Animal{      //繼承constructor(name,age){   //構造函數super(name);this.age=age;}
}let dog = new Dog("小白");
dog.sayName()；let dog = new Dog("小白",2);
console.log(dog.age);

數組

定義數組

var list = ["a","b"];
var list = new Array("a","b");  //new 構造函數//使用
console.log(list);
var item=list[0];
console.log(item);
var length=list.length;
console.log(length);

遍歷數組

//while\for循環
//for in 遍歷:i是索引值
for(var i in list){console.log(list[i]);
}
//for of 遍歷:i是元素值
for(var i of list){console.log(i);
}
//map方法遍歷：參數是函數
list.map(function(value,index){console.log(value);   //輸出值console.log(index);   //輸出索引
});

數組的常用方法

map方法
push方法：在數組最后追加元素，list.push(“f”)
sort方法：排序

filter方法：過濾器

var list = [1,3,6,5,2];
var newList = list.filter(function(item){if(item>=3){return item;  //滿足條件的放入newList里}
})
console.log(newList);   //過濾出大于等于3的組成新的數組

join方法：連接數組里元素成字符串

var list = ["a","b"];
var str = list.join("+");   //參數為連接符
console.log(str);   //輸出字符串類型：a+b

結合數組與對象

var list = [{name:"小明",age:2,sex:"男"},{name:"小明2",age:3,sex:"女"},{name:"小明3",age:4,sex:"男"},
]console.log(list[0].name);
//遍歷：找出所有男同學放入新數組
var newList = list.filter(function(item){if(item.sex==="男"){return item;  //滿足條件的放入newList里}
})
console.log(newList);

正則表達式

定義正則表達式

var str = "123aa";
var reg = /^[a-z]$/;  //正則表達式，匹配字母
reg.test(str);   //正則表達式對象的test方法可以檢測是否匹配，匹配成功返回true
reg.exec(str);   //exec方法可以輸出匹配的內容

DOM & BOM基礎

DOM

dom：文檔對象模型（document對象）

//事件函數
<body><button>按鈕</button><div class="box"> </div><div> <img src="image/1.jpg" alt=""></div><script>let btn = document.querySelector("button");btn.onclick = function(){     //事件監聽函數,點擊事件console.log("hello");img.src="image/2.jpg";      //改變圖片，鼠標點擊后切換圖片}let box = document.querySelector(".box");box.onmouseenter = function(){     //事件監聽函數,鼠標移入事件console.log("hello red");this.style.backgroundColor= "blue";    //設置樣式，鼠標移入背景變藍}box.onmouseleave = function(){     //事件監聽函數,鼠標移出事件console.log("hello box");}</script>
</body>

BOM
- bom：瀏覽器對象模型
  - window對象（全局對象）
  - screen對象，包含用戶屏幕信息
  - location對象，獲取當前頁面的url，并把瀏覽器重定向到新的頁面
  - history對象，包含瀏覽器歷史
  - navigator對象，包含有關訪問者瀏覽器的信息
文檔：https://www.w3cschool.cn/javascript/js-window-screen.html