vue

vue的特點是什么?

1.國人開發的一個輕量級框架，

2.雙向資料系結，在資料操作方面更為簡單，

3.視圖,資料,結構分離,不需要進行邏輯代碼的修改，只需要操作資料就能完成相關操作，

4.組件化，方便封裝和復用

5.虛擬DOM: dom操作是非常耗費性能的，不再使用原生的dom操作節點， 極大解放dom操作

vue中父子組件是如何傳值的?

組件傳值–父組件向子組件傳值

第一步：父組件 在參考子組件時，通過屬性系結（v-bind：）的形式，把需要傳遞給子組件的資料，傳遞到子組件內部，供子組件使用 

第二步：把父組件傳遞過來的資料， 在 props陣列 中定義一下

組件中的 所有props 中的資料，都是通過父組件傳遞給子組件的

 props 中的資料都是只讀的，無法重新賦值

第三步：在該子組件中使用props陣列 中定義好的資料

子組件通過事件呼叫向父組件傳值

在子組件中，利用  $emit  觸發 父組件傳遞過來的方法的時候，可以將子組件的資料當做引數傳遞給父組件

詳情請點擊

v-show和v-if指令的共同點和不同點?

共同點:都能控制元素的顯示和隱藏，

不同點:實作本質方法不同，
v-show本質就是通過控制css中的display設定為none,控制隱藏，只會編譯一次;
v-if是動態的向DOM樹內添加或者洗掉DOM元素，若初始值為false, 就不會編譯了，而且v-if不停的銷毀和創建比較消耗性能，

說出幾種vue當中的指令和它的用法?

1.v-model雙向資料系結

<input type="text" v-model="msg"/>

2.v-for回圈

<div id="box">

    <ul>

            <li v-for="item in arr">

                <span>{item.name}</span>

                <span>{item.age}</span>

            </li>

    </ul>

</div>

<script src="text/JavaScript">

    new Vue({

            el:"#box",

            data(){

                return(){

                    arr:[

                                {"name":"yifengchun","age":18},

                                 {"name":"yifengchun","age":18},

                                 {"name":"yifengchun","age":18},

                                 {"name":"yifengchun","age":18}

                            ]

                }

            }

    })

</script>

3.v-show 顯示與隱藏

<div id="box">

    <div style="width:100px;height:100px;border:1px solid red;display:none" v-show="show"></div>

</div>

<script>

    new Vue({

            el: "#box",

            data(){

                return {

                    show: true

                }

            }

        })

</script>

4.v-on事件

<div id="box">

    <button v-on:click="say">按鈕</button>

</div>按鈕-->

<script>

new Vue({

        el: "#box",

        data(){

            return {}

        },

        methods: {

            say() {

                alert(111);

            }

        }

    })

</script>

5.v-once只系結一次

vue-loader是什么? 使用它的用途有哪些?

vue檔案的一個加載器，將template/js/style轉換成js模塊，
 用途: js可以寫es6、 style樣式可以scss或less、template可以加jade

axios是什么? 怎么使用?

答:請求后臺資源的模塊，
npm install axios -save裝好，js中使 用import進來,然后.get或.post，回傳在.then函式中如果成功，失敗則是在.catch函式中，
詳情

單頁面應用和多頁面應用區別及優缺點

答:頁面應用(SPA) ，通俗一點說就是指只有一個項面的應用，瀏覽器一開始要加載所有必須的html, js,css，所有的頁面內容都包含在這個所謂的主頁面中，但在寫的時候,還是會分開寫(頁面片段)，然后在互動的時候由路由程式動態載入，

多頁面(MPA) ,就是指一個應用中有多個頁面,頁面跳轉時是整頁重繪，

頁面的優點:用戶體驗好,快，內容的改變不需要重新加載整個頁面，基于這一點spa對服務 器壓力較小;前后端分離;頁面效果會比較炫酷(比如切換頁面內容時的專場影片)，

單頁面缺點:不利于seo; 導航不可用，如果一定要導航需要自行實作前進、后退，

簡述一下vue常用的修飾符和作用?

.stop:等同于JavaScript中的event.stopPropagation(防止事件冒泡);

.prevent:等同于JavaScript中的event.preventDefault), 防止執行預設的行為(如果事件可取消，則取消該事件，不停止事件的進一步傳播) ;

.capture: 與事件冒泡的方向相反,事件捕獲由外到內;

.self:只會觸發自己范圍內的事件，不包含子元素;

.once:只會觸發一次，

談談你對MVVM開發模式的理解

MVVM分為Model、View、 ViewModel三者，

●Model: 代表資料模型，資料和業務邏輯都在Model層中定義; .

●View: 代表U|視圖,負責資料的展示; .

●ViewModel: 負責監聽Model中資料的改變并且控制視圖的更新，處理用戶互動操作;

Model和View并無直接關聯，而是通過Vi ewModel來進行聯系的，Model和ViewModel之間有著雙向資料系結的聯系，因此當Mode1中的資料改變時會觸發Vi ew層的重繪，View中由于用戶互動操作而改變的資料也會在Model中同步，

這種模式實作了Model和View的資料自動同步,因此開發者只需要專注對資料的維護操作即可，而不需要自己操
作dom，

MVC全名是Model View Controller，模型(Model)、視圖(View)和控制器(Controller)

前端如何優化網站性能?

1、減少HTTP請求數量

在瀏覽器與服務器進行通信時，主要是通過HTTP 進行通信，瀏覽器與服務器需要經過三次握手，每次握手需要花費大量時間，而且不同瀏覽器對資源檔案并發請求數量有限(不同瀏覽器允許并發數)， 一-旦HTTP 請求數量達到一定數量，資源請求就存在等待狀態，這是很致命的，因此減少HTTP 的請求數量可以很大程度上對網站性能進行優化，

可以通過精靈圖、合并css和js檔案、 懶加載等方式來減少http請求，
CSS Sprites

國內俗稱CSS精靈，這是將多張圖片合并成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內容，這種方案同時還可以減少圖片總位元組數，

合并CSS和JS檔案

現在前端有很多工程化打包工具，如: grunt、gulp、webpack等， 為了減少HTTP 請求數量，可以通過這些工具再發布前將多個CSS或者多個JS合并成一個檔案，

采用lazyLoad

俗稱懶加載，可以控制網頁上的內容在一開始無需加載， 不需要發請求，等到用戶操作真正需要的時候立即加載出內
容，這樣就控制了網頁資源一次性請求數量，

2、控制資源檔案加載優先級

瀏覽器在加載HTML內容時，是將HTML內容從上至下依次決議，決議到link或者script標簽就會加載href或者src對應鏈接內容，為了第一時間展示頁面給用戶，就需要將CSS提前加載，不要受JS加載影響，一般情況下都是CSS在頭部，JS在底部，

3、利用瀏覽器快取

瀏覽器快取是將網路資源存盤在本地，等待下次請求該資源時，如果資源已經存在就不需要到服務器重新請求該資源，
直接在本地讀取該資源，

4、減少DOM操作(vue這種減少操作DOM)
5、圖示使用IconFont替換image標簽

vue中樣式系結語法

1.物件方法v-bind:class="{' orange' :isRipe, ' green' :isNotRipe}"

2.陣列方法v-bind:class=" [class1,class2]"

3.行內v-bind:style=" {color :color , fontsize:fontsize+'px'}"

寫出3個使用this的典型應用

1)、在htm|元素事件屬性中使用，如: .

<input type=“button” οnclick=”showInfo(this);”value=“點擊一下”/>

2)、建構式

function Animal(name， color) {
this.name = name;
this.color = color ;

3)、input點擊, 獲取值

<input type="button"  id="text" value="點擊一下" />
<script type="text/javascript">
var btn = document . getElementById("text");
btn. onclick = function() {}
</script>

簡述vue中每個生命周期具體適合哪些場景?

beforeCreate: 在new一個vue實體后，只有一 些默認的生命周期鉤子和默認事件，其他的東西都還沒創建，在beforeCreate生命周期執行的時候， data和methods中的資料都還沒有 初始化，不能在這個階段使用data中的資料和methods中的方法

created: data和methods都已經被初始化好了，如果要呼叫methods中的方法，或者操作data中的資料，最早可以在這個階段中操作

beforeMount:執行到這個鉤子的時候，在記憶體中已經編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的

mounted:執行到這個鉤子的時候，就表示Vue實體已經初始化完成了，此時組件脫離了創建階段,進入到了運行階段，如果我們想要通過插件操作頁面上的DOM節點，最可以在和這個階段中進行

beforeUpdate:|當執行這個鉤子時，頁面中的顯示的資料還是舊的，data中的資料是更新后的，頁面還沒有和最新的資料保持同步
updated :頁面顯示的資料和data中的資料已經保持同步了，都是最新的

beforeDestory Vue實體從運行階段進入到了銷毀階段,這個時候上所有的data和methods，指冷，過濾器…都是處于可用狀態，還沒有真正被銷毀

destroyed這個時候上所有的data和methods，指令，過濾器…都是處于不可用狀態，組件已經被銷毀了，

如何避免毀掉地獄?

●模塊化:將回呼函式轉換為獨立的函式

●使用流程控制庫,例如[aync]

●使用Promise

●使用aync/await

使用NPM有哪些好處?

1、通過NPM,你可以安裝和管理專案的依賴，并且能夠指明依賴項的具體版本號，

2、對于Node應用開發而言，你可以通過package. json檔案來管理專案資訊，配置腳本,以及指明依賴的具體版本

3、npm install xx -S和npm install -D的命令含義

4、npm uninstall xx是什么意思

5、專案轉換的時候，不會把node_ modules包發過去，那么你拿到沒有nodeModules目錄的專案怎么讓它跑起來
(npm install安裝所有的依賴)

請描述一下cookies, sessionStorage 和localStorage的區別?

cookie是網站為了標示用戶身份而儲存在用戶本地終端(Client Side). 上的資料(通常經過加密)，

cookie資料始終在同源的http請求中攜帶(即使不需要)，記會在瀏覽器 和服務器間來回傳遞，

sessionStorage和1ocalStorage不會自動把資料發給服務器，僅在本地保存，

存盤大小:
cookie資料大小不能超過4k.

sessionStorage和localStorage雖然也有存盤大小的限制，但比cookie大得多，可以達到5M或更大，
有期時間:
localStorage
存盤持久資料，瀏覽器關閉后資料不丟失除非主動洗掉資料;

sessionStorage資料 在當前瀏覽器視窗關閉后自動洗掉，

cookie
設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

跳轉頁面

1：router-link跳轉

<!-- 直接跳轉 -->
<router-link to='/testDemo'>
 <button>點擊跳轉2</button>
</router-link>
  
<!-- 帶引數跳轉 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>點擊跳轉1</button>
</router-link>
  
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>點擊跳轉3</button>
</router-link>

2：this.$router.push()

<template>
 <div id='test'>
 <button @click='goTo()'>點擊跳轉4</button>
 </div>
</template>
<script>
 export default{
 name:'test',
 methods:{
 goTo(){
 //直接跳轉
 this.$router.push('/testDemo');
  
 //帶引數跳轉
 this.$router.push({path:'/testDemo',query:{setid:123456}});
 this.$router.push({name:'testDemo',params:{setid:111222}});
 }
 }
 }
</script>

詳情

css

介紹一下標準的CSS的盒子模型? 與低版本IE的盒子模型有什么不同的?

標準盒子模型:寬度=內容的寬度(content) + border + padding + margin

低版本IE盒子模型:寬度=內容寬度(content+ border+padding) + margin

用來控制元素的盒子模型的決議模式，默認為content -box

context -box: W3C的標準盒子模型，設定元素的height /width屬性指的是content部分的高/寬

border-box: IE傳統盒子模型，設定元素的hei ght/wi dth屬性指的是border + padding + content部分的高/寬

CSS選擇器有哪些?哪些屬性可以繼承?

CSS選擇符: id選擇器( #myid)、類選擇器( . myclassname)、標簽選擇器(div, h1，p)、 相鄰選擇器(h1 +p)、子選擇器(ul > li)、
后代選擇器(li a)、通配符選擇器 (*)、屬性選擇器 (a[rel=“external”]) 、偽類選擇器(a: hover，li :nth-child)

可繼承的屬性: font-size，font-family, color

不可繼承的樣式: border ，padding， margin, width，height

優先級(就近原則):!important>[id>class>tag]
! important比行內優先級高

CSS3有哪些新特性?

background-image background-origin(content -box/ paddingbox/bor der-box) background-size

background-repeat

word-wrap (對長的不可分割單詞換行) word-wrap: break-word 

文字陰影: text-shadow:
5px 5px 5px #FF0000; (水平陰影，垂直陰影，模糊距離，陰影顏色)

font-face屬性:定義自己的字體

圓角(邊框半徑) : border-radius屬性用于創建圓角

邊框圖片: border-image: url(border.png) 30 30 round

盒陰影: box-shadow: 10px 10px 5px #888888

媒體查詢:定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性

js 字串操作函式?

concat()-將兩個或多個字符的文本組合起來，回傳一個新的字串，

indexOf)-回傳字串中一個子串第一處出現的索引， 如果沒有匹配項，回傳-1，

charAt)-回傳指定位置的字符，

lastlndexOf()-回傳字串中一個子串最后一處出現的索引， 如果沒有匹配項，回傳-1，

substr()函式-回傳從string的startPos位置，長度為length的字串

slice()-提取字串的一部分，并回傳一個新字串，

replace()-用來查找匹配一個正則運算式的字串,然后使用新字串代替匹配的字串，

split()-通過將字串劃分成子串，將一個字串做成一 個字串陣列，

length-回傳字串的長度,所謂字串的長度是指其包含的字符的個數，

toLowerCase()-將整個字串轉成小寫字母，

toUpperCase()-將整個字串轉成大寫字母，

詳情

怎樣添加、移除、移動、復制、創建和查找節點?

1)創建新節點

createElement() //創建一個具 體的元素

2)添加、移除

appendChild() /添加
removeChild() //移除

3)查找

document.getElementsByTagName() //通過標簽名稱獲取的是陣列

document.getElementsByName() //通過元素的Name屬性的值

document.getElementByld) //通過元素ld,唯-性

document.querySelector(#id')查找元素唯一性

document.querySelectorAl( #id)查找元素獲取的是陣列

GET和POST的區別，何時使用POST?

GET和POST的區別:

GET: 一般用于查詢資料，使用URL傳遞引數，由于瀏覽器對地址欄長度有限制，所以對使用get方式所發送資訊的數量有限制，同時瀏覽器會記錄(歷史記錄,快取)中會保留請求地址的資訊，包括地址后面的資料，
get 只能發送普通格式(URL 編碼格式)的資料，

POST: 一般用于向服務器發送資料，對所發送的資料的大小理論上是沒有限制，瀏覽器會快取記錄地址，但是不會記錄post提交的資料，post 可以發送純文本、URL編碼格式、 二進制格式的字串,形式多樣，

在以下情況中，請使用POST請求:
1.以提交為目的的請求(類似語意化, get 示請求, post 表示提交) ; .
2.發送私密類資料(用戶名、密碼) (因為瀏覽器快取記錄特性) ;
3.向服務器發送大量資料(資料大小限制區別) ;
4.上傳檔案圖片時(資料型別區別) ;

正則運算式

詳情

js

JavaScript 的typeof回傳哪些資料型別?

alert(typeof null); // object

alert(typeof undefined);  // undefined

alert( typeofNaN); // number

alert(NaN == undefined);// false

alert(NaN == NaN);// false

var str ="123abc"
alert(typeof str++); // number

alert(str); // NaN

例舉至少3種強制型別轉換和2種隱式型別轉換?

1.強制型別轉換:

明確呼叫內置函式，強制把一種型別的值轉換為另-種型別，強制型別轉換主要有:
Boolean、Number、String、 parselnt、 parseFloat

2.隱式型別轉換:

在使用算 術運算子時，運算子兩邊的資料型別可以是任意的,比如，一個字串可以和數字相加，之所以不同的資料型別之間可以做運算，是因為JavaScript引擎在運算之前會悄悄的把他們進行了隱式
型別轉換，隱式型別轉換主要有: +、一、==、 !

JavaScript的事件流模型都有什么?

事件流描述的是從頁面中接收事件的順序，DOM 結構是樹形結構,頁面中的某一個元素觸發了某個一 個事件,事件會從最頂層的window物件開始，向下傳播到目標元素，途徑的祖先節點都會觸發對應的事件，如果當前節點的該事件系結了事件處理函式的話，則會執行該函式當事件達到目標元素并執行系結函式(如果有系結的話)后，事件又會向.上傳播到window元素，途徑的祖先節點都會觸發對應的事件(如果系結事件處理函式的話)

事件流包含三個階段:
●事件捕捉階段
●處于目標階段
●事件冒泡階段
事件捕捉階段:事件開始由頂層物件觸發,然后逐級向下傳播，直到目標的元素;
處于目標階段:處在系結事件的元素上;
事件冒泡階段:事件由具體的元素先接收,然后逐級向上傳播，直到不具體的元素;|

請簡述AJAX及基本步驟?

建議回復:
簡述AJAX: AJAX即"Asynchronous Javascript And XML”(異步JavaScript和XML)，是指一種創建互動式網頁應用的網頁開發技術，通過在后臺與服務器進行少量資料交換，AJAX 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，

AJAX基本步驟:
1.初始化ajax物件
2.連接地址，準備資料
3.發送請求
4.接收資料(正在接收,尚未完成)
5.接收資料完成
//初始化ajax物件var xhr =new XMLHttpRequest(); //連接地址，準備資料; xhr . open("方式”，"地址”，是否為異步); //接收資料完成觸發的事件 xhr . onl oad =function(){}~//發送資料“xhr .send();

HTTP 狀態訊息200 302 304 403 404 500分別表示什么?

●200:請求已成功，請求所希望的回應頭或資料體將隨此回應回傳，

●302:請求的資源臨時從不同的URI回應請求，由于這樣的重定向是臨時的，戶端應當繼續向原有地址發送以后的請求，只有在Cache-Control或Expires中進行了指定的情況下，這個回應才是可快取的，

●304:如果客戶端發送了一個帶條件的GET請求且該請求已被允許,而檔案的內容(自上次訪問以來或者根據請求的條件)并沒有改變,則服務器應當回傳這個狀態碼，304回應禁止包含訊息體，因此始終以訊息頭后的第一個空行結尾，

●403: 服務器已經理解請求,但是拒絕執行它，

●404:請求失敗,請求所希望得到的資源未被在服務器上發現，

●500:服務器遇到了-個未曾預料的狀況，導致了它無法完成對請求的處理，一 般來說，這個問題都會在服務器端的源代碼出現錯誤時出現，