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只在当前组件中起作用？