A. vue.js中，在一個vue組件中，想通過點擊按鈕，才載入另外一個目標vue組件，要怎麼實現
<button @click='onclick'></button>
<div>
<mycomponent v-if='showcom'></mycomponent>
</div>
{
data: {
showcom: false
}
methods: {
onclick: function () {
this.showcom = true;
}
}
}
B. 5分鍾看懂VUE項目
VUE是前端開發框架。誕生於2014年吧。
原始的前端開發框架需要工程師寫html、寫css、寫javascript(js)。js是腳本語言，瀏覽器可以運行js來執行一些js支持的動作，例如點擊反饋，下拉菜單、操作html的DOM元素之類。這樣開放效率就很低了。
後來誕生了一些前端開發框架，VUE就是其中之一。目前在國內前端開發中，特別是手機app的h5頁面的開發部分，被很多公司採用。
使用VUE開發的時候，不需要js直接操作html元素，只需要管理js的變數值，html會自動更新這些值。傳統的html配合js能完成的功能，VUE都給出了實現方案，開發只寫簡單的html和js語句就可以實現。
VUE開發的工具一般是visio stdio code（vscode），稍微適應兩天就可以熟練應用了。還是很強大的。
但是vscode本身只是編輯器，開發編譯類語言需要自己配編譯環境，具體我沒配過。
前端開發不需要配編譯環境了，只需要把需要的各種庫、工具在命令行界面安裝就行。具體過程網上搜「從零開始搭建vue項目」。
剛建立好的項目一定是下面這種目錄結構（ranktable.vue是我後加的
這對於新手村的人會引起頭暈嘔吐，老子啥都沒寫就出來這么多文件，不但數量不少，文件種類還齊全。
學習VUE別想一下吃的太多，除非你本身前端經驗豐富。否則先看懂紅色箭頭的幾個文件吧，看懂這幾個就算入門了。看的順序嚴格按照下面這樣。
index.html->main.js->App.vue->index.js->HelloWorld.vue
我將這幾個文件大概講一講，你就能有個清晰的脈絡了。
一、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tradedatapy</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
頁面開發當然是要有html了，VUE開發也不例外。這個html就是整個項目的入口了。只不過是<body>裡面過於簡單。<div id="app"></div>表示本html綁定了一個id為app的VUE對象。
二、main.js
new Vue({ //new Vue語句就是定義了一個VUE對象
el: '#app', //vue對象的id是app
router,
components: { App }, //vue的組件名是APP
template: '<App/>' //template 名是APP
})
這就定義了一個app的VUE對象，index.html就可以找到它了。
三、App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App' //export 了名為App的組件，main.js就可以找到它了
}
</script>
上面的template都理解為html的一部分片斷就行了，片斷可以拼接到html對應的位置，構成一個有內容的完整的頁面。<img src="./assets/logo.png">這句被我注釋了，否則頁面會顯示這個圖片的。下面的<route-view/>部分是路由，根據用戶的url不同，會路由到不同的vue文件，進而展示不同的頁面內容。
四、index.js
項目里有不只一個index.js，一定看準了，我要講解的是router目錄下的index.js.
//這里的配置決定了App.vue里<router-view/>位置會展示什麼內容
export default new Router({
routes: [
{
path: '/', //當用戶訪問 http://localhost:8080/ 根目錄也就是默認目錄會被路由到HelloWorld組件，
//這個組件的所有內容會被在App.vue里<router-view/>顯示出來
name: 'HelloWorld',
component: HelloWorld
},
{//當用戶訪問 http://localhost:8080/ranktable 會顯示ranktable.vue內容
//ranktable.vue是我後加的
path: '/ranktable',
name: '/ranktable',
component: ranktable
}
]
})
五、HelloWorld.vue
最後看看這里有什麼
<template>
<div>
原來的內容被我刪除了，現在頁面顯示這句話。
</div>
</template>
<script>
</script>
vscode命令行執行npm run dev，看見下面說明成功了，將地址貼進瀏覽器
Compiled successfully in 983ms 15:43:26
I Your application is running here: http://localhost:8080
如果想要更復雜的功能，在helloworld.vue實現就行了，比如我要一個填表查詢功能，裡面改成
<template>
<div>
<group title="城市">
<selector placeholder="請選擇城市" v-model="demo01" title="" name="district" :options="list" @on-change="onChange1"></selector>
</group>
<group title="街道">
<selector placeholder="請選擇街道" v-model="demo03" title="" name="district" :options="list4" @on-change="onChange3" @click.native="onClickpz"></selector>
</group>
<group title="小區">
<selector placeholder="請選擇小區" v-model="demo02" title="" name="district" :options="list3" @on-change="onChange2" @click.native="onClickheyue"></selector>
</group>
<group title="日期">
<selector placeholder="請選擇日期" v-model="demo04" title="" name="district" :options="list5" @on-change="onChange4" @click.native="onClickdate"></selector>
</group>
<group title="統計類型">
<selector placeholder="請選擇統計類型" v-model="demo06" title="" name="district" :options="list6" @on-change="onChange6"></selector>
</group>
<div style="padding:15px;">
<x-button type="primary" @click.native="getValue('plainValueRef')">查詢</x-button>
</div>
</div>
</template>
<script>
import { Selector, Group, Cell, CellBox, XButton } from 'vux'
此處省略很多東西
</script>
這個例子有點復雜，需要下面<script>里實現很多內容，引入vux的一些組件，vux大家可以自行研究。效果是這樣的
C. vue前端工程代理之後怎麼查看請求介面的真實url呢
項目啟動以後按F12 點選Network然後點擊 XHR 就是所有的後端介面地址，然後點擊一個訪問的地址，右邊出現headers裡面的 Request URL 後面的就是真實的url地址了
D. Vue組件（28）做一個更好用的查詢控制項（四）把日期查詢做到極致
客戶需要查詢上一個月的新增客戶的功能。
為啥讓我先選一號，然後再去選31號？太麻煩了，你們能不能做出這樣：
直接選月份不香嗎？
這個怎麼辦？似乎要做個轉換，前端日期控制項給的類型一般都是標準的date，那麼怎麼表達月份？或者這個需求其實要的是起始日期和結束日期，這又要怎麼轉換？
如果要做轉換的話，那麼是前端做還是後端做？
聽說因為這些事情，前後端經常吵架。。。
這還只是按月查詢，那麼有沒有按年查詢的需求呢？
我一朋友和我說，後端不愛轉的話，那麼就前端轉唄，有啥的。
當然也可以換過來說，前端不愛轉的話，那麼後端轉唄，有啥的。
好吧，還是說點有用的，這種麻煩事前後端都不愛做，煩。這是人之常情，誰又願意給自己找活干呢？
但是總是要做呀，不做的話，客戶用的不方便。
先總結一下各方的需求。
直接使用 dayjs 來實現格式化， https://day.js.org/docs/zh-CN/display/format 。因為element-plus用的就是這個，我們就不引入其他庫了，
這樣就可以非常靈活了。按月查、按年查，設置開始結束都可以。
也就是說要把用戶選擇的一個日期，改成一個范圍日期。還需要做點判斷和轉換才可以。
E. vue 前端頁面跳轉 傳值 一個頁面列表中的某一列設置超鏈接，點擊跳轉到新頁面，怎樣在新頁面獲取值
看你要傳遞什麼類型的值，一般可以 a.html?a=1 傳入 b頁面，那麼b頁面通過獲取瀏覽器url query參數來獲取a的值 或者 通過cookie localstroage
F. vue.js項目 el-input 組件 監聽回車鍵實現搜索功能示例
基於element-ui
組件
開發的vue.js項目，
實現回車鍵發起搜索，和原生的input
標簽使用方法不一樣：
el-input
監聽鍵盤按下狀態
得用@keyup.enter.native,如果是非el-input
組件，可以直接用@keyup.enter
<el-input
placeholder="搜索"
icon="search"
v-model="input"
:on-icon-click="pchandleIconClick"
@keyup.enter.native="searchEnterFun">
</el-input>
<input
placeholder="搜索"
type="text"
@keyup.enter="searchEnterFun">
在methods方法集里，寫上監聽的方法，當獲取的keyCode
為13時，表示按下了回車鍵，如果需要監聽空格或者其他鍵，換成別的鍵值
searchEnterFun:function(e){
var
keyCode
=
window.event?
e.keyCode:e.which;
//
console.log('回車搜索',keyCode,e);
if(keyCode
==
13
&&
this.input){
this.$router.push({path:'/Share?keywords='+this.input});
}
}
which
和
keyCode
屬性提供了解決瀏覽器的兼容性的方法。
keyCode屬性返回onkeypress事件觸發的鍵的值的字元代碼，或者
onkeydown
或
onkeyup
事件的鍵的代碼
注意：
在
Firefox
中，keyCode
屬性在
onkeypress
事件中是無效的
(返回
0)。瀏覽器兼容問題，可以一起使用
which
和
keyCode
屬性來解決：
var
keyCode
=
window.event
?
e.keyCode:e.which;
which
屬性返回onkeypress事件觸發的鍵的值的字元代碼，或者
onkeydown
或
onkeyup
事件的鍵的代碼
瀏覽器支持：谷歌、火狐、ie9、safari、歐朋
以上這篇vue.js項目
el-input
組件
監聽回車鍵實現搜索功能示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:詳解.vue文件中監聽input輸入事件（oninput）vue使用element-ui的el-input監聽不了回車事件的解決方法vue點擊input彈出帶搜索鍵盤並監聽該元素的方法
G. SpringBoot-Vue實現增刪改查及分頁小DEMO
主要通過後端 Spring Boot 技術和前端 Vue 技術來簡單開發一個demo，實現增刪改查、分頁功能以及了解Springboot搭配vue完成前後端分離項目的開發流程。
PS：假設以上的的工具你都安裝好啦，寫CRUD小DEMO時進坑了，這篇blog參考一下，僅供參考，僅供參考😤，，如有不足請不吝賜教。
1、File->New->Project...
2、選擇 Spring Initializr ，然後選擇默認的 url 點擊next
1、更新pom.xml如下：
2、新建 .java
3、更新demosrcmain esourcesapplication.properties
4、新建.java
5、新建demosrcmain esourcesmapperUserMapper.xml
6、新建.java
7、新建.java
9、後端就寫完了，整體結構如下：
1、win+R->cmd->進入項目目錄依次執行命令： vue init webpack projectName 、 cd projectName 、 npm install 、 npm run dev 如圖所示：
1、在項目根目錄安裝axios執行命令 npm install axios ，安裝element ui 執行命令 npm i element-ui -S
2、更新vue01srcApp.vue
3、更新vue01srcmain.js
4、更新vue01srccomponentsHelloWorld.vue
方式一：
在 vue01configindex.js 文件中配置 proxyTable{} ，如下：
方式二：
在vue-cli項目根目錄執行命令 npm run build ，編譯完成後將dist/static文件夾至springboot項目的 src/main/resources/static 目錄下然後直接啟動springboot項目就OK了。
大材小用，✍這篇博客の源碼在 我的GitHub 上。
H. 2021-11-10.Vue前端面試題及答案
const vm = new Vue({
...
methods: {
handlerEvent(event) {
console.log(event) // 滑鼠點擊時，獲取到事件對象
}
}
})
1、如果只是事件函數的調用，函數名稱後面不要添加括弧
好處：函數執行時，第一個形式參數會被系統自動注入
一個事件對象，提供給函數使用
@click="handlerEvent"
2、如果事件函數調用執行時，需要傳遞參數，函數名稱後面
必須添加括弧，如果要使用事件對象，就必須手工注入(固定語法)
@click="handlerEvent($event)"
事件冒泡是JS語法中的一種事件觸發機制，描述的是目標元素上的事件一旦發生，就會根據DOM節點結構，將事件逐步依次觸發到父節點上的一種事件機制
原生JS中通過兼容性語法阻止事件冒泡
event.stopPropagation?event.stopPropagation():event.cancelBubble=true
Vue中對於事件冒泡的處理進行了封裝，提供了事件修飾符完成阻止冒泡行為
固定語法：標簽對象的事件屬性上，添加 @事件對象.stop="處理函數"
.self事件修飾符的作用，就是讓事件的觸發方式只能由當前標簽上發生的事件觸發！
.lazy作為表單修飾符，經常用在表單元素上，用於將表單數據的同步機制延遲到表單元素失去焦點時再進行同步，節省資源、提高整體效率！
Vue數據雙向綁定的特性，指代的是Vue實例中的數據和網頁視圖中的數據綁定，實例中數據的更新會直接影響視圖的渲染展示，視圖中的數據更新會自動同步到實例中的數據，這樣的操作機制就是數據雙向綁定機制；Vue底層主要是通過Object.defineProperty()數據劫持的操作方式完成的！
數據劫持本質上就是一種變數的高級聲明方式，通過數據劫持的語法聲明的變數，我們可以針對變數數據的查詢、編輯進行監聽，隨時根據變數的使用情況進行功能的添加，如數據的雙向綁定，完成數據的自動同步和自動渲染！
I. 史上最全前端vue面試題！推薦收藏
1.為什麼會形成跨域？
不是一個源的文件操作另一個源的文件就會形成跨域。當請求端的協議、域名、埠號和伺服器的協議、域名、埠號有一個不一致就會發生跨域。
解決方法：安裝插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue組件裡面，通過dispatch來出發actions提交修改數據的操作。
② 然後再通過actions的commit來出發mutations來修改數據。
③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心裏面的數據狀態）裡面的數據。
④ 最後由store觸發每一個調用它的組件更新。
3.vuex是什麼？怎麼使用？
vuex是一個專為vue.js應用程序開發的狀態管理模式。使用:store,getters,mutations,actions,moles詳細使用寫法請見：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的數據在頁面刷新後數據消失怎麼解決？
使用sessionStorage或localStorage存儲數據;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默認行為？
在綁定事件時，在指令後邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認行為
6.深拷貝與淺拷貝？
假設B復制A，修改A的時候，看B是否變化：B變了是淺拷貝（修改堆內存中的同一個值），沒變是深拷貝（修改堆內存中不同的值）。淺拷貝只是增加了一個指針指向已存在的內存地址，深拷貝是增加了一個指針並申請了一個新的內存，使這個增加的指針指向這個新的內存。深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調用
8. keep-alive: 組件緩存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被緩存
鉤子執行順序：created -> mounted -> actived
include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設置，exclude優先順序更 改，則組件不會被緩存。
應用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態。
9.vue傳值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟組件傳值
$emit 分發
$on 監聽
$off 取消監聽
$once 一次性監聽一個事件
在js文件中定義一個中央事件匯流排Bus，並暴露出來
具體的實現方式：
使用Bus的時候在接收Bus的組件的beforeDestroy函數中銷毀Bus，否則會一直疊加調用這個方法。
應用場景：「退出登錄」 -> ①點擊退出登錄；②修改密碼後自動退出登錄
11.組件跨級傳值
$attrs a->b->c
$listeners 監聽
12.vue事件修飾符有哪些？
.stop .prevent .self .once .passive .sync
13.箭頭函數中的this？
不具有this綁定，但函數體可以使用this，這個this指向的是箭頭函數當前所處的詞法環境中的this對象。
15.為什麼vue組件中data必須是一個函數？
如果不是函數的話，每個組件的data都是內存的同一個地址，一個數據改變了其他也改變了，當他是一個函數時，每個組件實例都有自己的作用域，每個實例相互獨立，就不會互相影響。
16.v-if 和 v-show區別？
v-if 是對標簽的創建與銷毀， v-show 則僅在初始化時載入一次，v-if 開銷相對來說比v-show 大；
v-if 是惰性的；v-show 做的僅是簡單的css切換。
17.v-text 與 v-html區別？
v-text 用於普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染過的數據，它默認用「就地復用」策略。如果數據項的順序改變，vue將不是移動DOM元素來匹配數據項的改變，而是簡單地復用此處每個元素，並確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。
key的特殊屬性主要用在虛擬DOM演算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的演算法，它會基於key的變化重新排列元素順序。
19.Scss是什麼？在vue-cli中安裝步驟？有哪幾大特性？
npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴展中下載;
特性：可以用變數，可以用混合器，可以嵌套等。
20.vue獲取dom？
ref
21.vue初始化頁面閃動問題？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什麼是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模塊化 基於組件路由配置，路由參數、查詢、通配符，細粒度導航控制，自定義的滾動條行為等。
23.vue路由傳參，接收？
傳： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和節流？
節流是一定時間內執行一次函數，多用在scroll事件上；
防抖是在一定時間內執行最後一次的函數，多用在input輸入操作，表單提交等。
25.如何讓scss只在當前組件中起作用？