![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习篇
文章平均质量分 59
安之ccy
非志无以成学
展开
-
el-table点击单元格切换成可输入状态el-input
el-table点击单元格切换成可编辑状态,修改数据后提示已修改原创 2021-11-22 09:41:44 · 9293 阅读 · 11 评论 -
听说你也想vuex入门,快来瞅瞅吧~走过路过不要错过啦~
vuex入门,包括安装、创建store文件、getters获取数据、mutations修改数据、actions设置异步,推荐chrome扩展程序:Vue.js devtools。欢迎小伙伴们一起交流学习~原创 2021-06-09 17:39:08 · 2096 阅读 · 130 评论 -
一小时入门vue组件(建议收藏)
初识vue组件应用,包括:1.实例化多个vue对象;2.全局组件与局部组件;3.父向子传值/传引用(props);4.子向父事件传值($emit);5.使用脚手架创建项目并运用组件and传值的案例。欢迎小伙伴们一起交流学习~原创 2021-06-06 00:19:10 · 21793 阅读 · 225 评论 -
【零基础】1小时入门Vue(建议收藏)
vue的基础知识,包括:1.安装;2.vue对象创建(el、data、methods、属性绑定);3.基本事件;4.动态绑定class和style;5.条件渲染;6.列表渲染,还有一个小案例。欢迎小伙伴们一起交流学习呀~原创 2021-06-02 11:04:50 · 3150 阅读 · 130 评论 -
json-server使用与postman
json-server官方教程json-server安装与基础配置1.先全局安装json-server:npm install -g json-server2.新建一个文件夹,命名JSONSERVER,cd到这个目录下,初始化package.json文件:在命令行输入:npm init,回答里面的问题,可以一路回车(相当于直接在命令行输入npm init --yes),此时文件夹下会有一个package.json文件{ "name": "JSONSERVER", "version": "原创 2021-05-20 16:44:19 · 625 阅读 · 23 评论 -
router-link-active使用
路由切换时,选中哪个路由,这个路由就被激活,当前页面所有与此路由匹配的链接(父级/子级)都会被加上这个class:router-link-active,绑定的css样式也就生效了与exact(严格模式)属性配合使用,只匹配被选中的那个链接,相关的链接不会被匹配到<template> <nav> <ul> <li><router-link to="/" exact>博客</router-lin原创 2021-05-18 10:42:19 · 2694 阅读 · 8 评论 -
Vue过滤器使用
官网链接Vue允许自定义过滤器,一般在两种情况下使用:1.双花括号插值2.v-bind 表达式全局过滤器:Vue.filter(过滤器名称,实现的功能)局部过滤器:写在组件的filters属性中示例:全局过滤器,使用双花括号插值:在main.js中定义:// 自定义过滤器,大写转换Vue.filter("to-uppercase",function(value){ return value.toUpperCase();})使用:<h3 v-rainbow>{{bl原创 2021-05-17 20:47:07 · 161 阅读 · 2 评论 -
vue自定义指令钩子函数
官网地址指令钩子函数参数:示例:1.把标题设置为彩虹色:定义:// 自定义指令,彩虹色Vue.directive("rainbow",{ bind(el){ el.style.color = '#'+Math.random().toString(16).slice(2,8) }})使用:<h3 v-rainbow>{{blob.title}}</h3>2.改变容器的max-width定义:// 自定义指令:宽度调整Vue.directi原创 2021-05-17 16:36:36 · 318 阅读 · 4 评论 -
checkbox/select与v-model:将选择的内容存储到列表中
绑定复选框与contentType:<label v-for="c in blob.ctType" v-bind:key="c" > <input type="checkbox" name="ctType" :value="c" v-model="contentType"><label>{{c}}</label></label>看一眼contentType,初始是个空列表:data(){ return { blob原创 2021-05-16 15:56:07 · 294 阅读 · 2 评论 -
checkbox与v-for:解决“只显示框,不显示选择文字”
正常我们想要的复选框效果是一个框对应一个描述文字:<div> <input type="checkbox" name="test" value="123">123 <input type="checkbox" name="test" value="456">456 <input type="checkbox" name="test" value="789">789</div>效果:如果v-for直接加在input原创 2021-05-16 15:14:32 · 1815 阅读 · 3 评论 -
Vue路由基本使用
1.安装vue-router我用的win10系统,命令为:npm install --save vue-router;这是按照官网安装vue-router不成功却导入vue-router时,终端提示的命令;我没有用管理员身份打开终端;后面安装vue-resource也是差不多如此,记录一下2.在main.js导入vue-routerimport VueRouter from 'vue-router'3.定义路由组件,导入之前定义好的组件Home和HelloWorld,用做路由跳转的案例:i原创 2021-05-15 22:39:12 · 311 阅读 · 8 评论 -
Vue生命周期钩子
好文链接官网图示:涉及到的方法的解释:beforeCreate:实例对象被创建之前,不可获取实例里的数据和方法created:创建实例对象,可获取实例里的数据和方法created之后判断是否有"el"或"$mount(’’)",即要渲染的根节点,若没有,则本轮生命周期结束如果有,再判断是否有template或者html标签,用render去渲染,如果没有,则没有要渲染的模板,本轮生命周期结束beforeMount:挂载前,编译模板前,rander函数首次被调用mounted:挂载后,这个过原创 2021-05-14 12:09:14 · 139 阅读 · 6 评论 -
Vue子向父事件传值:$emit
子向父传值,需要在子组件使用$emit注册一个事件A,告诉父组件,此刻我希望你执行这个事件,并传递参数给你父组件接收子想要执行这个事件的要求,开始处理子组件注册事件updateTitle: methods:{ changeTitle:function(){ this.$emit("updateTitle","子向父传值") } }父组件接收v-on:updateTitle,执行updateTitle函数;将title改成子传过来的数据:<div原创 2021-05-14 10:55:19 · 353 阅读 · 7 评论 -
Vue父向子传值/传引用:props
父向子传值/引用:基本使用:1.在父组件上定义了某个数据,使用bind指令传给子组件(简单字符串可以直接传字符串本身)2.子组件用props接收传值/传引用(深浅拷贝):1.如果传给了多个子组件,并且传的是值,其中一个组件修改了该值,不会影响其他组件得到的值2.如果传的是引用(传址),有一个组件修改了这个数据,所有组件得到的这个数据都会被改变3.可以用另外的变量存储接收的数据,保存在data中,并且对源数据进行深拷贝,这样不论源数据如何修改,均不会影响到本组件所需要的数据demo:父组件:原创 2021-05-14 10:42:54 · 1484 阅读 · 19 评论 -
Vue:在CLI上注册全局/局部组件
vue注册全局/局部组件的基本操作 和 CLI安装步骤,在之前的文章可以找到本文内容:在CLI创建的vue项目中注册全局/局部组件我的src目录:其中HelloWorld.vue是系统默认的组件,User.vue是自定义的,注册案例使用User.vueUser.vue内容:<template> <div class="user"> <ul> <li v-for="user in users">{{user}}</l原创 2021-05-13 11:30:33 · 957 阅读 · 16 评论 -
Vue组件全局注册和局部注册使用
小知识点:1.template:覆盖原dom;需要有一个根元素,把所有元素包裹在一个元素里面2.el如果匹配了多个dom节点,只会对第一个匹配的节点有效正文:1.组件是可复用的 Vue 实例,也有data、methods、computed、watch等选项,但没有像el这样的根实例特有的选项;2.其中的data必须是函数,因为每用一次组件,都会创建出新的实例;每次使用该组件,都独立维护一份data数据,不能因某一个实例修改data而影响其他实例维护的data3.每个组件必须有且只有一个根元素,原创 2021-05-03 19:47:09 · 2606 阅读 · 16 评论 -
vue CLI脚手架初安装记录
1.为何需要脚手架:减少花在配置的时间,专注于开发平常开发需要的:开发服务器:模拟真实的开发环境,不是file://本地文件babel:将es6转换成es5语法,再转到服务器上postcss后处理器 less / sass预处理器 高效esLint代码规范 不规范就报代码规范的错前端自动化构建工具,配置babel,postcss,esLint1.Webpack,需要配置webpack插件2.Gulp脚手架 负责自动配置 ——“零配置”Vue CLI2Vue CLI32.安装脚手架原创 2021-05-02 10:44:46 · 1044 阅读 · 16 评论 -
Vue深入理解的好文搬运
1.绑定数据:Object.defineProperty(vm, “title”, {get(){}, set(){}} )el:选择dom节点_data:传入用户设定的属性$refs:选择dom节点2.vue虚拟DOM:减少重排重绘,如果一个事件触发后要改变inner HTML,但改变前后的innerHTML是一样的,这时候没有必要重新渲染,vue将dom节点先存入对象,排成树状,即虚拟DOM,如果事件发生前后没有真的发生改变,两次生成的虚拟DOM一致,就不会重排重绘,所以会比jQ快3.原创 2021-04-30 17:24:10 · 127 阅读 · 2 评论 -
vue的条件渲染(v-if 与 v-show指令)与列表渲染
条件渲染v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true时被渲染,当不满足条件时,不会有这个dom节点相对应的,有if判断的系列指令:v-if / v-else-if / v-else,当前面的if和if-else条件均不满足,匹配v-else指令下的内容<template元素:设置相同判断条件的一组标签可以组合设置,但又不想多增不必要的dom节点,可以使用<template></template>标签,它是一个不可见的包裹元素,最终原创 2021-04-29 23:26:54 · 1238 阅读 · 5 评论 -
Vue绑定class / 绑定内联样式
绑定class方式一:对象语法:给 v-bind:class传 一个对象,以动态地切换 class.box { width: 100px; height: 100px; background-color: gray;}.circle { border-radius: 50%;}<div id="app"> <div class="box" @click="isCircle = !isCircle" :class="{circle:is原创 2021-04-29 11:56:52 · 647 阅读 · 10 评论 -
vue监听数据:computed与watch/methods
computed计算属性:与methods的区别:1.当作属性,调用时不写括号;2.监听指定数据,当指定数据发生改变时,才会被触发watch侦听属性:对象名代表要监听的数据,对象值为数据改变时要做的操作(处理函数),监听的数据的最新值会以形参的方式传进这个函数,仅监听的数据更新时才触发操作与computed的区别:1.没有返回值2.可以写异步代码3.一个侦听属性只监听一个数据computed与methods的区别:每次触发重新渲染时,methods里所有的方法均会被执行一遍;原创 2021-04-28 20:23:46 · 1594 阅读 · 22 评论 -
vue获取/设置input的内容与双向数据绑定
单向操作:获取/设置input内容<div id="app"> <input type="text" v-bind:value="value" v-on:input="changeValue"> <!--输入即改变value值--> <p>{{ value }}</p> <!--用于显示当前value值--></div><script src="https://cdn.jsdelivr.net/原创 2021-04-28 16:22:33 · 17939 阅读 · 0 评论 -
用vue的事件修饰符阻止冒泡
用mousemove事件举例1.传统做法:定义一个阻止冒泡的函数stop,形参为事件e,执行e.stopPropagation(),在标签上添加v-on:mousemove="stop"<div id="app"> <p v-on:mousemove="getPosition">输出鼠标位置:{{x}}/{{y}} <span v-on:mousemove.stop>不输出鼠标位置</span> </p>&原创 2021-04-28 14:06:32 · 1079 阅读 · 2 评论 -
用vue指令在input框默认输出指定字符串
使用v-bind指令,让input默认输出data中的name:<div id="app"> <input type="text" v-bind:value="name"></div>new Vue({ el:"#app", data:{ name:"ccy" } })效果:如果不用v-bind,用平常的双大括号,被双引号包裹,只会被当作字符串的:<input typ原创 2021-04-28 09:30:46 · 1302 阅读 · 2 评论 -
vue指令v-on和事件修饰符的使用
vue指令v-on:可以搭配事件使用,后面跟上事件处理函数,如:点击事件:v-on:click="clickFunction"鼠标移动事件:v-on:mousemove="getPosition"v-on:事件=事件处理函数(形参, $event)两个参数可选当没有传入形参时,默认有一个事件参数event,不用手动传事件修饰符:如:阻止冒泡:.stop取消默认事件:.prevent匹配回车触发:.enter匹配空格触发:.space等等事件修饰符可以串联使用,如.stop.pre原创 2021-04-28 15:09:19 · 594 阅读 · 0 评论 -
Vue学习篇(三):Vue指令v-bind、v-once、v-html
1.双大括号里可以写变量/函数/js表达式,复杂的if等代码不能写<div id="app"> <input type="text" v-on:input="changeName"> <h1>{{name + 123}}</h1> <h1>{{sayName()}}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/v原创 2021-04-28 09:24:45 · 358 阅读 · 8 评论 -
Vue学习篇(二):Vue初使用:双大括号与v-on指令
Vue的双大括号Vue指令用双大括号括起变量,是从Vue中的data获取数据的标识<div id="app"> <input type="text" v-on:input="changeName"> <!--使用指令v- --> <h1>{{name}}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><原创 2021-04-27 22:41:46 · 2339 阅读 · 0 评论 -
Vue学习篇(一):主流框架基本认识
为什么要使用前端框架:保持UI(能够看到的)和状态(要展示的数据)同步原生实现最大的问题:1.状态改变时需要手动更新视图层,如添加删除某个dom节点2.代码可读性很差3.代码很脆弱(状态改变的一个小操作,但有很多UI代码,容易出错)——UI和状态分离,管理好状态即可,UI交给框架就好三大主流框架:Angular vs React vs Vue1.Angular:优点:MVVM模式 :自动更新视图双向数据绑定:视图和数据双向绑定,一方改变,另一方也会改变原创 2021-04-27 21:37:10 · 337 阅读 · 8 评论