vue
du_独孤九剑
这个作者很懒,什么都没留下…
展开
-
watch 监听数据的变化
watch 监听数据的变化监听谁就写谁的名字 data () { return { name: "张三" , // 最简单的情况 obj: { name: "李四" } } }, watch: { name: function (newValue,oldValue) { }, // 监听 obj中 name的变化 "obj.name":function (newValue,oldValue) { }, // 监听所有obj 数原创 2020-08-12 13:35:47 · 2209 阅读 · 0 评论 -
vue 动态 class
定义变量数组 :class=[条件?类名A : 类名B]对象 {类名A :条件A,类名B :条件A}动态style*一定定义变量 style={key:value,…}原创 2021-09-14 01:30:24 · 100 阅读 · 0 评论 -
组件的封装
完成公共组件的封装的要求传入不同的要求实现不同的按钮内容不同样式不同 支持多样式大小不同能禁用页面传入不同的参数实现不同按钮 添加文档说明,-》------------------------------------ 待更...原创 2021-09-05 15:52:16 · 89 阅读 · 0 评论 -
Websoket
原生webSocket为什么需要 websocket因为HTTP协议有一个缺陷 通信只能由客户端发起 例如 我们想了解今天的天气 只能是客户端向服务器发送请求 服务器返回查询结果 HTTP协议做不到服务器主动向客户端推送消息实现方式连接成功建立的回调方法ws.onopen = function(){cosole.log('webSocket 建立连接')}连接发生错误的回调方法ws.onerror = function(){cosole.log('webSocket 连接发原创 2021-09-05 15:48:13 · 88 阅读 · 0 评论 -
vue 和 vant移动端项目开发
统一处理页面访问权限在路由meta字段中配置 需要登录的子段页面在跳转时 在全局钩子根据该字段进行判断 没有登录next(false) 弹窗扩展小程序购物车没有登录会显示 未登录的页面 点击按钮跳转登录页 获取手机号进行登录。。。。待续...原创 2021-09-05 14:35:56 · 359 阅读 · 0 评论 -
vuecli vue.congfig.js
dev server devServer:{ port:8080, host:'localhost', open: true //默认不会自动打开 配置浏览器自动访问 } ------------------------------->待更原创 2021-08-17 14:04:56 · 80 阅读 · 0 评论 -
vue 和 elmentui开发后台系统项目总结
当我们用elment el-aside el-header 进行布局 组件和边框是有间距的当你使用NavMenu 导航菜单 是无法全屏的当你屏幕缩小时内容会被压缩 设置最小宽度 有滚动条保证内容完整显示 // 在mian.js global.css (全局的引入) html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; min-width: 1366px;}.原创 2021-08-17 13:51:30 · 722 阅读 · 0 评论 -
vue项目中,为什么elementUI中“NavMenu 导航菜单“中的参数unique-opened设置无效?
如图所示,设置完unique-opened为true之后,还需要再设置el-submenu或者el-menu-item中index的唯一性,如果index中有一样的,那么设置的unique-opened就会无效转载 2021-08-16 20:53:03 · 2133 阅读 · 0 评论 -
vue修饰符
lazy 修饰符默认情况下 v-model 默认是在input事件中同步输入框的数据的数据发生 data里的数据就会发生改变lazy 修饰符可以让失去焦点或者回车才会更新number修饰符默认情况下 在输入框中无论我们输入是字母还是数字 都会被当做字符串进行处理但是如果我们希望处理的是数字类型 那么最好直接将内容当做数字处理number 修饰符可以让在输入的内容自动转成数字类型trim 修饰符如果输入的内容首尾有空格 通常我们希望将其去除trim修饰符可以去除左右两边空格原创 2021-06-25 14:34:51 · 95 阅读 · 0 评论 -
vue 面试题(二)
Vue2.x响应式数据/双向绑定原理Model-View-ViewModel的缩写,Model代表数据模型,View代表UI组件,ViewModel将Model和View关联起来数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据Vue2.x响应式数据/双向绑定原理Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过事件监听的方式来实现,所以 Vue数据双向绑定的工作主要是如何根据Dat转载 2021-01-10 17:28:01 · 294 阅读 · 0 评论 -
Vue后台权限管理
什么是权限权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问被分配的资源 而前端权限总的来说是请求权限 ,请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说 所有的请求发起都触发自前端路由或试图 所以我们可以从这两个方面入手 ,对触发权限的源头进行控制 最终要实现目标是路由方面 用户登录后只能看到自己有权限访问的导航菜单 也只能访问自己有权限的路由地址 否则跳转 4xx提示页视图方面 ,用户只能看到自己有权浏览的内容和有权操作的控件最后再加上转载 2021-01-10 16:49:28 · 361 阅读 · 1 评论 -
vue 面试题(一)
基础篇css 只在当前组件器作用v-if 和 v-show 区别$route 和 $router 的区别vue.js的两个核心是什么vue 常用的指令vue常用的修饰符v-on可以绑定多个方法吗vue 中的 key 值的作用什么是 vue 计算属性vue等单页面应用及其优缺点怎么定义 vue-router 的动态的路由?怎么获取传过来的值watch 和 computed 差异组件中 data 为什么是函数扩展篇对于MVVM的理解VUE 生命周期的几个阶段什么是VUE原创 2021-01-09 17:12:00 · 167 阅读 · 0 评论 -
vue3 创建项目
vite 创建项目vite 其实现原理是利用 ES6的import 会发送请求去加载文件的特性 拦截这些请求 做一些预编译 省去webpack赘余的打包时间安装vitenpm i -g create-vite-app利用Vite创建Vue3项目 create-vite-app projectName安装运行依赖cd projectNamenpm inpm run servevuecli 创建项目参考该博客...原创 2021-01-07 15:38:55 · 191 阅读 · 0 评论 -
v-model 表单系类
v-model 结合radio的使用name 值相同 互斥v-model 绑定同一个值时 也是互斥 <label> <input type="radio" name="val" id="" value='男' v-model="value">男 </label> <label> <input type="radio" name="val" id="" value='女' v-model="value"&g原创 2021-01-04 20:25:26 · 105 阅读 · 0 评论 -
vue 计算属性(computed)
计算属性的简单用法在模板中可以直接通过插值语法显示data数据 但是在哪某些情况下需要进行转换 <div>{{fulling}}</div> data:{ a: '早上', b: '好' } computed:{ fulling (){ return this.a +this.b } }计算属性的完整写法一般是没有set 方法 没有set方法 是只读属性 不能改不需要加小括号 计算属性 是计算后的结果 最终还是一个属性 c原创 2021-01-04 17:08:07 · 306 阅读 · 0 评论 -
v-bind绑定样式
v-bind 的功能v-bind 用于绑定一个或多个属性值 或者向另一个组件传递props值开发标签属性的动态绑定v-bind绑定 class// 用法一:直接绑定一个对象<h2 :class='{'active':isAcive,...}'> </h2>// 用法 二: 和 普通的类同时存在 如果isAcive 为 true 类名会有两个 title active<h2 class=‘title’ :class='{'active':isAcive原创 2021-01-04 16:47:21 · 501 阅读 · 0 评论 -
vue 原理
表单控件在实际开发中非常常见 特别是对于用户信息的提交 需要大量表单Vue 中使用v-model 指令来实现表单元素和数据的双向绑定案例分析当我们在输入框输入内容时因为input中的v-model 绑定了message 所以会实时将输入的内容传递给message message发生改变当message 发生改变时 因为上面我们使用Mustache语法 将message 的值插入到DOM中 所以DOM会发生响应的改变所以 通过v-model实现双向绑定 <input .原创 2021-01-04 14:10:33 · 101 阅读 · 0 评论 -
Vue 自定义指令
参考vue官网/ 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() // 元素只有插入 dom 中才能获取焦点 }})Vue.directive('指令名',{// 指令绑定到元素上时候 会立即执行这个bind函数 bind(){}, // 插入dom中的会调用 inserted原创 2021-01-03 19:02:43 · 141 阅读 · 0 评论 -
函数式组件
函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。组件需要的一切都是通过 context 参数传递。它是一个上下文对象,具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。函数式组件<template> <div> <List :list="list" :itemCli.原创 2020-12-31 11:12:11 · 198 阅读 · 0 评论 -
修改组件库的样式
在开发中修改第三方组件样式是很常见,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style这些做法都会带来副作用(组件样式污染、不够优雅),样式穿透在css预处理器中使用才生效。我们可以使用 >>> 或 /deep/ 解决这一问题:<style scoped>外层 >>> .el-checkbox { display: block; font-size: 26px; .el-checkbox__.原创 2020-12-30 23:00:40 · 755 阅读 · 0 评论 -
事件侦听器
比如,在页面挂载时定义计时器,需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号,除此之外没有任何用处。export default { mounted() { this.timer = setInterval(() => { console.log(Date.now()) }, 1000) }, beforeDes.原创 2020-12-30 22:31:20 · 353 阅读 · 0 评论 -
监听组件生命周期
通常我们监听组件生命周期会使用 $emit ,父组件接收事件来进行通知子组件export default { mounted() { this.$emit('listenMounted') }}父组件<template> <div> <List @listenMounted="listenMounted" /> </div></template>其实还有一种简洁.原创 2020-12-30 22:26:27 · 140 阅读 · 0 评论 -
vue 组件通信合集
v-model允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。input 默认作为双向绑定的更新事件,通过 $emit 可以更新绑定的值<my-switch v-model="val"></my-sw.原创 2020-12-30 22:21:39 · 124 阅读 · 0 评论 -
VUE .sync 和 v-model理解
VUE .sync 理解注意: this.$emit(‘update:show’, !this.show) 一定要加冒号 不然sync 翻译不出来<body> <script src="./vue.js"></script> <div id="app"> <h2>父组件</h2> <div v-show='show'>你能看见我吗</div>原创 2020-11-30 15:52:49 · 100 阅读 · 0 评论 -
关闭eslint
vue 关闭 eslint// vue.config.js module.exports = { lintOnSave: false}// 但是webpack 其他配置项不能在该文件下配置在网络上搜索到的各种参考中,一般都是提到把文件.eslintrc.js中的各种规则开关进行修改,如下所示:module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/e转载 2020-11-24 15:13:51 · 724 阅读 · 0 评论 -
vueRouter路由 知识点合集(二)
vueRouter路由 知识点合集(二)参数数拼接在url后面// 路由定义{ path: '/describe/:id', name: 'Describe', component: Describe}// 页面传参this.$router.push({ path: `/describe/${id}`,})// 页面获取this.$route.params.id编程式路由导航 params传参 参数不会拼接在路由后面,页面刷新参数会丢失// 路由定义{原创 2020-09-18 14:13:57 · 164 阅读 · 0 评论 -
VUEX 详解
为什么使用vuex在中大型应用中,应用的各个组件间需要进行数据传递,使用传统方式繁琐且不可控Vuex 为所有组件提供集中式的可追踪的状态(数据) 管理vuex 的数据是响应式的使用Vuex将摒弃传统的 event emmit 和props的方式进行数据的传递和更新问题场景**问题一、**通过路由传参数,我们会采用params 或者query形式 ,但是这两种方式都会在URL上做手脚 , 如果传递参数过多,会导致400 Bad Request (如,点击表格某行,携带行数据跳转到新页面进行查看)原创 2020-09-16 16:28:32 · 221 阅读 · 0 评论 -
Vue精简知识
Vue基础Vue快速体验1. Vue介绍1.1 Vue是什么Vue.JS是优秀的前端 JavaScript 框架react/angular/vue库和框架的区别:库(如jQuery)库是工具. 提供大量API,体现了封装的思想、需要自己调用这些API框架框架提供了一套完整解决方案,使用者要按照框架所规定的某种规范进行开发1.2 为什么要学习 Vue传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt随着项目业务原创 2020-08-28 17:07:54 · 259 阅读 · 0 评论 -
this.$refs[formName].validate无效
this.$refs[formName].validate((valid) =>{} 无效确保每一个prop都写在标签上eg: 每一个 if 都要对应了一个 else 并且每个条件 下 都要 callback 确保 在不同情况下 都会执行callback打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。查看绑定的元素是否写对如果前都没有问题,那么就是你的自定义的校验有问题,没有走通,这也是我踩过的坑。你可以依次注释掉的一个校验原创 2020-08-17 10:11:46 · 2389 阅读 · 1 评论 -
修改element 表格中的数据
修改element 表格中的数据<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> <style> * { m原创 2020-08-13 13:25:41 · 775 阅读 · 0 评论 -
ElementUi form表单验证 二
ElementUi form表单验证validator 是一个函数, 其中有三个参数 ( rule(当前规则),value(当前值),callback(回调函数))var func = function (rule, value, callback) { // 根据value进行进行校验 // 如果一切ok // 直接执行callback callback() // 一切ok 请继续 // 如果不ok callback(new Error("错原创 2020-08-21 16:09:56 · 577 阅读 · 0 评论