1.描述MVM的理解 MVVM分为Model、View、ViewModel三者。
Model:代表数据模型,数据和业务逻辑都在Model层中定义; View:代表UI视图,负责数据的展示; ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟 界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。 而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
2.Vue怎么实现组件间的参数传递的 父组件与子组件传值 父组件传给子组件:子组件通过props方法接受数据 子组件传给父组件:$emit方法传递参数
3.router的区别 $route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。
① $route.path字符串,对应当前路由的路径,总是解析为绝对路径,如 "/order"。
② $route.params一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。
③ route.query.user为1, 如果没有查询参数,则是个空对象。
④ $route.hash当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。
⑤ $route.fullPath完成解析后的 URL,包含查询参数和 hash 的完整路径。
⑥ $route.matched数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
⑦ $route.name 当前路径名字
$router 是“路由实例”对象,即使用 new VueRouter创建的实例,包括了路由的跳转方法,钩子函数等。
router.replace的区别:
使用push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
使用replace方法不会向 history 添加新记录,而是替换掉当前的 history 记录,即当replace跳转到的网页后,‘后退’按钮不能查看之前的页面。
$route为当前router跳转对象里面可以获取name、path、query、params等
4.Vue实现数据双向绑定的原理是什么? vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变; 核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法;
Ctrl + K Ctrl + C 添加行注释 editor.action.addCommentLine Ctrl + K Ctrl + U 删除行注释 editor.action.removeCommentLine
5.vue前端如何解决跨域问题 在config文件夹下的index.js 里面设置代理 proxyTable: { '/WebAPI': { target: 'cloudnifier-devops-webapi.azurewebsites.net',//后端接口地址 changeOrigin: true,//是否允许跨越 pathRewrite: { '^/WebAPI': '/WebAPI',//重写, } } } 然后再在iis上设置反向代理(下载ARR插件)
6.vue+element ui 表格如何处理2019-05-01T16:00:00.000Z时间格式 npm 安装 moment插件 定义一个方法 setDate(row,column){ var newdate = row[column.property]; if(newdate == undefined){return ''}; return moment(newdate).format("YYYY-MM-DD HH:mm") } 表格中:formatter="setDate"格式化数据
7.绑定HTML代码用v-html
8.Ag-grid表格在vue中的用法 列属性: sortable:true 排序 filter:true 筛选 filterParams:{suppressAndOrCondition:true} 只要一个筛选条件 onRowClicked: function (event) 行点击事件 在里面调用事件最好在外面先定义var that = this; 导出csv:this.gridOptions.api.exportDataAsCsv({allColumns:true}); gridOptions为定义表格事的date 要记得定义
9.前端如何处理时间日期的转换(随便转换什么格式的日期时间) npm install moment -- save 引入moment.js文件 import moment from 'moment' moment(newdate).format("YYYY-MM-DD HH:mm")
10.前端如何删除数组里的某个值 var index = this.pic.indexOf(file.name); this.pic.splice(index,1); 先找到字符串出现的下标 然后再用splice删除指定下标的值
11.让鼠标光标停留在某个输入框内 在输入框内定义一个ref回传函数ref="CaseSubject" 然后在mounted钩子函数里面 this.nextTick(() =>{ this.refs.CaseSubject.focus(); })
12.this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来
13.在vue中使用document.getElementById('#CaseSubject')一定要注意DOM元素是否被渲染出来 不然是获得不到元素的方法
14.vue input添加回车触发 普通vue input @keyup.enter="onSubmit"
element el-input @keyup.enter.native="onSubmit"
15.vue 动态绑定class属性
16.查找 数组的对象中的某个元素的索引 let index = this.userList.findIndex(item => item.name === name);
17.ES 6 语法尽量要用let去给变量赋值 因为let可以使变量有块级作用域 不会被外面的函数改变它的值
18.vue的生命周期 beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
beforeCreate
- .sync 属性在子组件内部更新,父组件也能感知的到,实现了“双向绑定”。
20.修改数组或对象的属性 set(this.data,"key",value) 数组的:this.$set(this.data,index,value)
21.vue-router路由的作用 1)、路由懒加载配置 2)、改变单页面应用的title 3)、登录权限验证 4)、页面缓存配置
22.监听组件的生命周期 @hook:mounted="dosomes"
23.vue中动态绑定class或style有两种方法 数组语法([]) 对象语法(()) 动态拼接:src路径只能用数组语法 对象语法会报错
24.refs 父组件: that.FeedbackdetailsVisible = true that.nextTick(() => { that.refs.toFeedbackdetails.init(that.Imagesdate,that.filedate) }) 子组件: init(Imagesdate,filedate){ this.visible = true this.$nextTick(() =>{ console.log(filedate) this.Imagesdate = Imagesdate, this.filedate = filedate }) },
25.watch监听属性 watch:{
message:{
handler:function(val, oldVal){ //回调函数 监听到变化时应该执行的函数 if(val){ console.log(val, oldVal)
}
},
deep: true, //是否深入监听 immediate: true //是否以当前的初始值执行handler函数 }
}
26.this.$el指向当前组件的DOM元素
27、插槽就是子组件中的提供给父组件使用的一个占位符,用表示, 父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。 具名插槽:在子组件的中加入name参数,然后父组件填充内容时,父组件通过 v-slot:[name] 的方式指定到对应的插槽中v-slot只存在于