vue
文章平均质量分 53
采默
要想拥有不曾拥有的美丽,就要坚持不曾坚持的努力
展开
-
前端常见面试题(详解)——持续更新中
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期初始化 beforeCreate created挂载 beforeMount mounted更新 beforeUpdate updated销毁 beforeDestroy destroyed一、创建前 / 后在beforeCreate生命周期函数执行的时候,data和method 还没有初始化在created 生命周期原创 2022-01-02 20:33:43 · 852 阅读 · 0 评论 -
基本路由传参
1.基本路由传参传:this.$router.push('/path地址?参数名=值&参数2=值2this.$router.push({ path:'/path地址', query:{ 参数名:值, 参数2:值2 }})收: this.$route.query.参数名 this.$route.query.参数2 2.动态路由匹配路由配制{ path:'/xxx/:参数名?', // ...原创 2021-11-22 00:24:12 · 592 阅读 · 0 评论 -
组件的使用及组件的传值
1.组件的基本使用2.组件的通信,父向子传值,子向父传值,兄弟组件之间的传值3.单项数据流4.使用props,emit进行父子组件传值,使用ref实现组件传值,使用双向绑定 v-model实现组件间传值,使用.sync修饰符实现组件传值原创 2021-11-19 00:05:20 · 1009 阅读 · 0 评论 -
路由前置导航守卫
路由值发生改变时会触发路由路由前置守卫语法router.beforeEach((to, from ,next) => { console.log(to); console.log(from); console.log(next);}) //路由跳转之前先执行这里,决定是否要跳转 //参数1: 要跳转到的路由 //参数2: 从哪里跳转的路由 //参数3: 函数体中next()放行,让路由正常的跳转切换 next(false)留在原地不跳转路由, next(pat原创 2021-11-15 18:54:33 · 1198 阅读 · 0 评论 -
vue-router的使用
yarn add vue-router2.在router/index.js中导入路由import Vue form 'vueimport VueRouter from 'vue-router'3.使用路由插件Vue.use(VueRouter)4.创建路由规则数组const routes = [ { // 这里的名字是我们要在浏览器上输入的路径 path: "/login", name: "login" component:原创 2021-11-15 18:22:11 · 782 阅读 · 0 评论 -
将ElementUI 添加到项目中
全局引入的方式1.在项目中安装 elementUIyarn add element-ui -S-S: 是--save的简写,表示 这个包是生产依赖, 表示项目上线也要使用这个包。-S: 是可以省略不写的。如果要安装开发依赖,则要加 -D。2.main.js 中引入并注册import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';原创 2021-11-03 17:29:44 · 586 阅读 · 0 评论 -
进入vue 项目起步工作
1.yarn global add @vue/cli2.vue create 文件名3.cd 文件名4.yarn serve5.在src并列处新建vue.config.js6.vue.config.js 中配置module.exports = {devServer: { // 自定义服务配置open: true, // 自动打开浏览器port: 3000//将端口号 改为3000},lintOnSave: false //关闭eslint 检查}...原创 2021-11-03 16:54:11 · 102 阅读 · 0 评论 -
vue 实现 全选功能
全选思路 准备标签,样式,js,准备数据 将数据循环展示在页面上, 在li 里v-for 在全选框 v-model = "isAll" //总的状态 小选框 v-model = "" //单个的状态 小选影响全选 ... 定义计算属性 isAll 统计小选框的状态, every查找数组里不符合条件的,直接返回false ...判断每一个小选框的状态, 只要有一个小选框的状态不为true 就是没有被勾上, 那就返回false , 全选框的状态就是false原创 2021-10-26 21:03:21 · 3440 阅读 · 2 评论 -
vue过滤器,计算属性,侦听器
一. vue过滤器1.定义及使用过滤器只能用在, 插值表达式与 v-bind 表达式中语法:全局定义的过滤器,在main.js 中定义 Vue.filter("过滤器名", (值) => {return "返回处理后的值"})局部定义的过滤器 filters: {过滤器名字: (值) => {return "返回处理后的值"} 2.传参与多过滤器可同时使用多个过滤器, 或者给过滤器传参...原创 2021-11-24 00:39:36 · 354 阅读 · 0 评论 -
vue 指令语法总结
1.v-bind给标签属性设置vue变量的值语法: v-bind:属性名 = "vue变量" 简写 :属性名= "vue变量"2.v-on给标签绑定事件语法: v-on:事件名 = "要执行的 少量 代码"v-on: 事件名 ="methods 中的函数"v-on: 事件名= "methods中的函数 (实参)"简写: @事件名 = "methods 中的函数"3.v-on事件对象vue事件处理函数中, 拿到事件对象 无传参,...原创 2021-10-20 23:07:55 · 393 阅读 · 0 评论 -
vue指令
差值表达式在dom 标签中,直接插入内容,又叫声明式渲染 /文本直插语法: {{表达式}}可以将vue 数据变量直接显示在标签内vue 中变量声明在data 函数返回的对象上,用key属性声明MVVM设计模式M: moudle 数据模型 ( data 里定义)V: view 视图 (html 页面)VM: ViewModel 视图模型 ( vue.js 源码 )MVVM 的好处: 减少DOM操作, 提高开发效率MVVM 通过数据双向绑定,让数据自动的双向.原创 2021-10-18 21:22:27 · 121 阅读 · 0 评论 -
vue/cli 脚手架
@vue/cli 脚手架概念@vue/cli 脚手架 是vue 官方提供的一个全局模块包(得到vue命令)此包用于创建脚手架项目@vue/cli 脚手架 的好处0配置 webpackbabel支持css, less 支持开发服务器支持@vue/cli 的使用@vue/cli 安装yarn global add @vue/cli或者npm install -g @vue/cli查看 vue 脚手架 版本vue -V@vue/cli 创建...原创 2021-10-18 20:57:08 · 96 阅读 · 0 评论