Vue学习笔记

123 阅读4分钟

1.描述MVM的理解 MVVM分为Model、View、ViewModel三者。

Model:代表数据模型,数据和业务逻辑都在Model层中定义; View:代表UI视图,负责数据的展示; ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟 界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。 而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

2.Vue怎么实现组件间的参数传递的 父组件与子组件传值   父组件传给子组件:子组件通过props方法接受数据    子组件传给父组件:$emit方法传递参数

3.routeroute 和 router的区别 $route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

① $route.path字符串,对应当前路由的路径,总是解析为绝对路径,如 "/order"。

② $route.params一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。

route.query一个key/value对象,表示URL查询参数。例如,对于路径/foo?user=1,则有route.query一个 key/value 对象,表示 URL 查询参数。 例如,对于路径 /foo?user=1,则有 route.query.user为1, 如果没有查询参数,则是个空对象。

④ $route.hash当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。

⑤ $route.fullPath完成解析后的 URL,包含查询参数和 hash 的完整路径。

⑥ $route.matched数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

⑦ $route.name 当前路径名字

$router 是“路由实例”对象,即使用 new VueRouter创建的实例,包括了路由的跳转方法,钩子函数等。

router.pushrouter.push和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属性

Open Case
通过改变里面的bool类型的值来改变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

  1. .sync 属性在子组件内部更新,父组件也能感知的到,实现了“双向绑定”。

20.修改数组或对象的属性 set对象的:this.set 对象的:this.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是用与父组件调用子组件方法例如子组件是个弹出层定义一个方法控制弹出层的显示然后父组件调用时想控制子组件弹出就可以使用refs是用与父组件调用子组件方法 例如 子组件是个弹出层 定义一个方法控制弹出层的显示 然后父组件调用时 想控制子组件弹出就可以使用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只存在于