vue 知识点
1.什么是vue.js？
Vue.js是一套构建用户界面的渐进式框架。
2.Mvvm和mvc的区别
MVC 是后端的分层开发概念。
MVVM是前端视图层的概念，主要关注于视图层分离。
MVC：view model controler
View是视图层负责与用户交互，
Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
Controller：控制器，数据模型和视图之间通信的桥梁，
MVVM Model-View-ViewModel
Modal：模型，指的是后端传递的数据。
View：视图，指的是所看到的页面。
ViewModal：视图模型，mvvm模式的核心，它是连接view和model的桥梁。主要用来处理业务逻辑
3.框架和库的区别
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
4.插值表达式 将数据展示在页面上的几种方式
V-text ,v-html, {{}}
5.vue防闪烁指令是？
v-clock
6.Vue指令v-html和v-text的区别
v-html和v-text都会覆盖原有的内容
v-htm会解析副文本
v-text 不会解析副文本
7.属性绑定，事件绑定的写法及简写方式
v-bind 简写：“：”
v-on 简写：“@”
8.什么是双向数据绑定，对应的vue指令是什么
数据发生改变，视图也改变 视图改变，数据也跟着改变 v-model
9.常见的事件修饰符有哪些，有什么作用，怎么用
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
10.v-for如何遍历数组，对象，数字
遍历数组：v-for (item,index) in list
遍历对象：v-for (value,key,index) in list
遍历数字 直接加数字
11.为什么设置key？
v-for key值是提高重排效率（让界面元素和数组里的每个记录进行绑定，key只能显示字符串和数字，key唯一）
12.Vue指令显示隐藏
v-if 删除dom元素 只修改一次
v-for 设置display;none 用于频繁切换
13.Vue循环渲染
v-for
14.Vue中样式绑定的几种方式（class，style）
data：{
font：' fontsize：32px；color：red'，
Class 1：'font'，
class 2：'color'
methods：{
getstyle() {
return“fontsize：32px；color：red"
}
(1).绑定style
：style =“fontsize：33px”
: style="{‘font-size’：'32px'. color：'red'} "
：style =~font"
：style ="getStyle() "括号不能去掉
(2) 绑定classe
：class ="[class1. class 2」"，
：class ="['font'color'] "
：class ="{ font：truc. color：false}：
：class ="getClass() "， 括号不能去掉
15.v-if与v-show的作用和区别
v-if删除dom元素v-show设置display:none
16.Vue过滤全局和局部声明方式及使用
过滤器被用作一些常见的文本格式化，可以用在两个地方 {{}} v-bind
作用：在页面显示值之前加一层过滤，显示过滤后的值。
语法：{{变量|过滤器名}}
{{变量|过滤器名|另一个过滤器名}}
全局定义：Vue.filter() 参数：过滤器名字，函数
私有定义：filters 为实例化vue的一个参数，和data平用
17.键盘修饰符使用
监听所有键盘：v-on:keyup
监听指定键：v-on:keyup.码
自定义键盘别名：vue.config.keyCodes.fi=112
18.vue自定义指令全局和局部声名方式及使用
Vue.directive()全局定义
directives私有定义
参数：
1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法
bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行
3. 这三个方法的参数有哪些
el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
19.vue生命周期周期有哪些，各自特点和作用
1.在beforeCreate生命周期函数执行的时候，data 和methods 中的数据都还没有没初始化，一般用于重定向。
2.在created 中，data和methods 都已经被初始化好了，一般用于接口请求和数据初始化。
3.在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串。
4.mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，依赖dom的操作放在此处。
5.当执行beforeUnplate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步。
6.updated事件执行的时候，页面和data 数据已经保持同步了，都是最新的。7.当执行beforeDestrox,的时候，实例上data和所有的methods,以及过滤器，指令.....都还处于可用状态，此时还没有真正执行销毁的过程，一般用于清除计时器，以及各种监听。
7befordestroy vue实例已经到了运行阶段进入了销毁还没有完全被销毁 都处于可用阶段
8.当执行到destroyed丽数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器。。。都已经不可用了。
20.vue-resource发送get.Post请求
Get this.$http.get(‘url’).then(res=>{}) 参数url
Post:this.$http.post(url.{... : ...},{...josn}).then(res=>{}) 参数1.url 2.要发送的数据对象
3. 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
21.axios发送get.post请求
GET请求：
mounted () {
axios.get(‘url').then(res => {
console.log( );
});
post请求：
mounted () {
axios .post('url').then(res => {
console.log( );
});
}
22.Vue中的动画 使用过渡类名
<transtion> </transtion>
V-enter v-enter-to v-enter-active
V-leave v-leave-to v-leave-active
23.vue中的过度动画结合第三方插件使用
导入动画类库：
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
定义 transition 及属性：
<transition
enter-active-class="fadeInRight"
leave-active-class="fadeOutRight"
:duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦</div>
</transition>
24.Vue钩子函数动画
定义 transition 组件以及三个钩子函数：
<div id="app">
<input type="button" value="切换动画" @click="isshow = !isshow">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div v-if="isshow" class="show">OK</div>
</transition>
</div>
定义三个 methods 钩子方法：
methods: {
beforeEnter(el) { // 动画进入之前的回调
el.style.transform = 'translateX(500px)';
},
enter(el, done) { // 动画进入完成时候的回调
el.offsetWidth;
el.style.transform = 'translateX(0px)';
done();
},
afterEnter(el) { // 动画进入完成之后的回调
this.isshow = !this.isshow;
}
}
定义动画过渡时长和样式：
.show{
transition: all 0.4s ease;
}
25.Vue设置v-for列表动画
定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：
<div id="app">
<input type="text" v-model="txt" @keyup.enter="add">
<transition-group tag="ul" name="list">
<li v-for="(item, i) in list" :key="i">{{item}}</li>
</transition-group>
</div>
26.Vue声名组件的方式
第一种：
<div id='app'>
<login></login>
</div>
<template id="box">
<div>
<p>cscaaca</p>
</div>
</template>
<script
Vue.component("login", {
template: "#box"
}
</script>
第二种：
vue.extend和vue.compontent
<div id='app'>
<login></login>
</div>
<Script>
Var login = vue.extend({
Template:’<h1>......</h1>
})
Vue.componment(‘login’.login)
Const vm = new vue({
El:’#app’
)}
第三种：
将模块版字符串定义在script中
<script type“x-template” id = “...”>
<p>...</p>
</script>
Vue.componment(“login”(template.”#...”)
第四种：
参数：组件名 对象
vue.compomment.
vue.compomment(regiter,{
Template:’<h1>...</h1>
})
27.父组件如何给子组件传值。
父组件中：
<sonComponentName sonAccptValueName=”10”
子组件中：props:
sonAcceptValueName:{
Type:[Value,String,Object]/String
defult:10
28.子组件如何给父组件传值，举例说明，写出核心代码即可父组件中;<sonÇomponentName fromSonEventType="fatherComponentFunctionName()"/>
mehords:{
fatherComponentFunctionName(valueFromSon){
conso1e.1og(valteFromSon)-
}
子组件中:<button@click="sendValueFunctonName()"> </button>
子组件中:methods;{
sendValueFunctonName(){
thịs.$emit("fromSonEventTvpe",valueFromSon)
}
29.什么是插槽，有几种，如何使用，举例说明，写出核心代码即可
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示
默认插槽
<slot></slot>
具名插槽
<template v-slot:[name]>
</template>
30.前端路由和后端路由的区别
前端路由：一个页面通过url中的hash来实现组件切换
后端路由：一个url对应服务器上的一个资源，就是对应一个页面
31.vue路由的基本使用步骤配合代码说明
<div id='app'>
<router-view></router-view>
</div>
<template id="index">
<div>
首页
</div>
</template>
<template id="detail">
<div>
详情
<router-view></router-view>
</div>
</template>
<script>
et index = {
template: "#son"
}
let login = {
template: "#index",
data() {
return {}
}
}
const vm = new Vue({
el: '#app',
data: {
},
router,
})
const router = new VueRouter({
routes: [
{
path: "/",
component: login,
},
{
path: "/detail",
component: {
template: "#detail",
},
},
],
});
</script>
32.路由跳转如何实现，结合代码，两种方式（声明式和函数式）
声明式：
<router-link to='/login'>登录</router-link>
函数式：
<button @click=“toindex”>登录<button>
toindex(){
this.$router.push(“/index)
33.路由传参的两种方式，如何获取参数，结合代码
路由传参：
<router-link to='/login？Id=123'>登录</router-link>
函数式：
<button @click=“toindex”>登录<button>
toindex(){
this.$router.push(“/index){
path:”index”
query:{name:”lisi”,id:123}
}
}
34.路由嵌套
声名路由的时候便设置children,children是一个数组，数组里是路由的对象，这个children的组件会渲染在它父组件的<router-view>中.
Children:[
{path:”son”
Component:son
}
]
35.路由高亮
使用默认的样式：
直接设置router-link-active
自定义样式：
配置 linkActiveClass:'自定义的类名'
36.$router和$route的区别
$router:全局vue.router实例化对象，负责跳转和传参。
$route:接受传参的值
37.如何进行路由重定向结合代码说明如何设置路由嵌套
<div id='app'>
<router-view></router-view>
</div>
<template id="index">
<div>首页
<router-link to="/detail"> 去详情</router-link>
</div>
</template>
<template id="detail">
<div>详情
<router-link to="/index"> 去首页</router-link>
</div>
</template>
const router = new VueRouter({
routes: [
path:"/",
redirect:"/index"
},
{
path: "/index",
component:login
}, {
path: "/detail",
component: {
template: "#detail"
}
}
]
})
38. 路由高亮
- 使用默认的样式
直接设置router-link-active
- 自定义样式
配置 linkActiveClass:'自定义的类名'
39.路由重定向
redirect可以进行路由的重定向
40.ref的使用
- 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
- 加上ref之后，在$refs属性中多了这个元素的引用。
- 通过vue实例的$refs属性拿到这个dom元素。
41.属性计算，属性监听
Wacth
methods: {},
watch: {
'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
this.fullName = newVal + ' - ' + this.lastName;
},
'lastName': function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
});
watch: {
'$route': function (newVal, oldVal) {
if (newVal.path === '/login') {
console.log('这是登录组件');
}
}
}
});
watch: {
'$route': function (newVal, oldVal) {
if (newVal.path === '/login') {
console.log('这是登录组件');
}
}
}
});
Computed
computed: {
fullName: {
get: function () {
return this.firstName + ' - ' + this.lastName;
},
set: function (newVal) {
var parts = newVal.split(' - ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
});
监听
watch: {
'$route': function (newVal, oldVal) {
if (newVal.path === '/login') {
console.log('这是登录组件');
}
}
}
});
42.vue-cli使用，如何创建和启动项目，项目文件结构
选择要创项目的的文件夹cmd或者 vue create 项目名
启动项目:npm run serve
Node_model 第三方依赖 public 静态资源（不进行编译）src源代码 gitignore不上传 babel es6降级文件 package.json 项目文件 readme.md 运行指令 assets静态资源（进行编译）
43.使用第三方ui组件
1.安装 npm i –save ant-design-vue 2.引入放入main.js中
全局 import Autd from ‘ant-design-vue’
Vue.use(Antd)
局部 例如：那个组件用就在那引入import {message} from ‘ant-design-vue’
44、覆盖ui组件样式 /deep/类名
45、什么是vuex 专为vue.js应用开发的状态管理模式
46、为什么用vuex，解决了什么问题
进行统一的状太管理，解决不同组件共享数据的问题
不同视图需要变更同一状态的问题
使用vuex之后，状态变化更清晰
47、vuex的核心模块
①state:定义全局状态
②getters:对全局状态进行加工(计算)，并不会改变状态值
③mutations:同步修改全局状态
④actions:异步修改全局状态，一般用于请求接口
⑤modules:将store模块化
48、vuex状态刷新重置问题如何解决
1.缓存 2.请求接口，重新赋值
49、什么是路由守卫，如何配置
导航守卫主要用来通过跳转或取消的方式守卫导航
导航守卫就是路由跳转过程中的一些钩子函数
全局：需要守卫的路由加一个mete
router.beforeEach(to,from,next())
局部：需要守卫的路由加beforeEach(to,from,next())
50、什么是同源策略，什么是跨域
浏览器的安全策略
跨域：指的是浏览器不能执行其他网站的脚本
协议、主机（ip或者域名）、端口 3者一致则同源
51、如何解决跨域
1、后端直接放开
2、JSONP
3、配置代理
module.exports = {
devServer: {//不设置 重写 http://wkt.myhope365.com/weChat
//设置重写 http://wkt.myhope365.com
proxy: {
//代理名称
'/course-api': { //这里最好有一个 /
target: 'http://wkt.myhope365.com', // 后台接口域名
changeOrigin: true, //是否跨域
//路径重写
pathRewrite:{
'^/course-api':''
}
},
}
}
}
52、代理如何配置，各个配置项什么意思
在vue.confie.js中写
devServer:{
proxy:{
‘/api’ （代理名称）:{
target: 后端接口域名
changeOrigin:true 什么跨域
pathRewrite:{‘^/api’:’’}} 路径重写
}
53.如何封装axios，好处是什么
达到扩展和易用的目的
如何封装axios：1.引入axios 2.使用自定义配置文件 3.添加请求/响应拦截器 4导出
posted on 2022-01-16 14:54 jaksgfdshkv 阅读(89) 评论(0) 编辑 收藏 举报
