![](https://img-blog.csdnimg.cn/b42c8a72d471458d8eff8137a44b4e9e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue学习
最易懂的浅析Vue学习
T-ihan
这个作者很懒,什么都没留下…
展开
-
Vue这样配置Axios
Vue这样配置Axios原创 2022-07-01 10:25:53 · 271 阅读 · 0 评论 -
v-model语法糖
语法糖: 对一个更加复杂的操作的封装,讨好vue程序员的。众所周知Vue中,v-model可以实现双向绑定,其中的原理解析其实就是v-model的语法糖!// 1. v-model 在表单元素上使用<input v-model="xxx" />// 2. v-model 在自己定义的组件上使用<MyCom v-model="xxx" />上面的写法是快捷方式,它等价于如下复杂的写法:<MyCom :value="xxx" @input="新值=>xx原创 2022-05-16 14:31:58 · 2200 阅读 · 0 评论 -
Vue项目启动后自动打开浏览器
vue-cli 覆盖webpack配置vue项目每次启动时都需要复制链接地址打开浏览器,影响到开发效率,下面一行代码配置,解决问题,自动打开浏览器!项目根目录下新 vue.config.js(和src同级)补充devServer代码如下const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, devServer原创 2022-05-14 20:02:34 · 1461 阅读 · 0 评论 -
组件插槽的使用(组件进阶)
vue中的插槽: 组件通过插槽传入自定义结构 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容 vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽 下面详细介绍插槽使用 :::一:默认插槽格式:在定义组件时,在template中用slot来占个坑;使用时,将组件之间的内容来填坑;如图示例:二:具名插槽当一个组件内有2处以上需要外部传入标签的地方就需要使用具名插槽格式.原创 2022-05-10 16:01:57 · 1558 阅读 · 1 评论 -
什么是生命周期函数(钩子函数)
vue 框架内置函数,随着组件的生命周期,自动按次序执行作用: 特定的时间点,执行某些特定的操作场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据阶段: 初始化 =》创建组件 => beforeCreate created 挂载 =>渲染显示组件 => beforeMount mouted 更新 =》修改了变量=》触发视图刷新 => beforeUpdate updated 销..原创 2022-05-08 21:58:31 · 179 阅读 · 0 评论 -
Vue单向数据流(不要修改props)
在使用Vue组件通信是经常会出现以下此类错误:在vue中需要遵循单向数据流原则所以什么是单向数据流:向单项数据流指的是,在父传子的前提下,父组件里面的数据发生改变会带动子组件里的数据进行更新。那么反过来对子组件里的props进行修改是否可以影响父组件里的数据进行改变呢?遵循单向数据流示例代码如下:运行后:此时代码并不会报错违背单向数据流示例代码如下:运行后:此时代码会报错,但是会正常运行,后续会影响代码运行特殊说明:父组件传给子组件的...原创 2022-05-06 21:21:26 · 826 阅读 · 1 评论 -
Vue监听器的基本使用(监听属性-深度监听和立即执行)
一:vue监听器-基本使用语法是:watch: { "被监听的属性名" (newVal, oldVal){ }}方便理解,示例代码:<template> <div> <input type="text" v-model="name"> </div></template><script>export default { data(){ r...原创 2022-05-05 20:43:57 · 10363 阅读 · 0 评论 -
Vue-cli 安装使用详细教学
一:安装设置npm的淘宝镜像:npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址npm config get registry #查看镜像地址全局安装命令:npm install -g @vue/cli注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装,换一个网络环境来继续重新安装。检查是否安装成功在任意小黑窗中:vue --version 如果可以看...原创 2022-05-04 14:27:56 · 3132 阅读 · 0 评论 -
Vue指令超详细演示理解
每个指令都有不同的作用,下面是一些常见的,必须要掌握的指令:v-on v-model v-for v-text v-html v-if v-show v-if,v-else-if, v-else v-bind原创 2022-05-03 21:57:50 · 717 阅读 · 0 评论