![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 65
米卡小米
这个作者很懒,什么都没留下…
展开
-
vue--样式绑定--样式切换方法
可以通过 :class='变量名'来动态改变标签的样式名,变量值可以是字符串、数组、对象;也i可以通过:style="obj"改变行内样式或html标签属性改变原创 2024-04-17 18:04:33 · 658 阅读 · 1 评论 -
vue--可复用技术--混入mixin
mixin 混入是非常灵活的技术用来分发Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项混入定义var mixin = { data:function(){return {info:"this is a mixin"}}, created(){console.log("this is mixin created");}, methods:{foo(){return "th...原创 2021-11-27 22:14:44 · 93 阅读 · 0 评论 -
vue--组件机制--动态组件component
动态渲染一个组件。<component v-bind:is="currentTabComponent"></component> 默认情况下,当组件在切换的时候都会重新创建组件,但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。<keep-alive> <component v-bind:is="currentT...原创 2021-11-27 21:40:14 · 1141 阅读 · 0 评论 -
vue--组件机制--插槽slot
普通插槽插槽允许我们在调用子组件的时候为子组件传递模板。子组件 <navigation-link><a v-bind:href="url" class="nav-link" > <slot>default</slot> </a>父组件<navigation-link url="/profile"> Your Profile </navigation-link> 当组件渲染的时候,<s...原创 2021-11-27 21:30:42 · 456 阅读 · 0 评论 -
vue--组件机制--组件传值
概述 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。组件定义 因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外...原创 2021-11-27 19:46:00 · 1143 阅读 · 0 评论 -
js实现vue双向数据绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue双向数据绑定.原创 2021-11-19 09:27:32 · 206 阅读 · 0 评论 -
vue--计算属性computed\监听属性watch
computed 我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性<div>{{total}}</div> computed: { total() { return this.a + this.b } }1. 在双大括号中直接使用表达式获取结果<div id="example"> {{ message.split('').reverse().jo...原创 2021-11-18 17:20:28 · 220 阅读 · 0 评论 -
vue--表单输入绑定
概述 用v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 你应该通过 JavaScript 在组件的 data 选项中声明初始值。1....原创 2021-11-18 17:08:30 · 438 阅读 · 0 评论 -
vue--事件--事件绑定,事件修饰符,
事件绑定 可以用 v-on 指令监听DOM 事件,并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。<button v-on:click="greet">Greet</button>methods: { greet: function (event) { if (event) { alert(event.target.tagName) } // `event` 是原生 DOM 事件 ...原创 2021-11-18 17:01:43 · 564 阅读 · 0 评论 -
vue--element+axios
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>element使用.原创 2021-11-18 10:02:57 · 172 阅读 · 0 评论 -
vue--模板语法--插值、指令、条件渲染、列表渲染、class绑定、style绑定
1.插值文本 <span>Message: {{ msg }}</span>原始html <span v-html="rawHtml"></span>属性 <div v-bind:id="dynamicId"></div>事件 <a v-on:click="doSomething">...</a>Javascript表达式 <div>{{ number + 1 }...原创 2021-11-18 10:01:03 · 238 阅读 · 0 评论 -
Less的安装、检测、使用、学习
less中文官网 https://less.bootcss.com/Less的安装 cnpm install less -gLess的安装检测 lessc -v 注意:要有“c” lessc --versionLess的使用 1.转化成css文件 在集成终端中打开目标文件输入命令...原创 2021-08-31 09:11:15 · 1048 阅读 · 0 评论 -
vue--vuex详解
1.什么是vuex 官方说法: Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解: Vuex是用来管理组件之间通信的一个插件2.为什么要用Vuex? 我们知道组件之间是独立的,组件之间想要实现通信,我目前知道的就只有props选项,但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢? 抛开怎么...转载 2021-08-26 20:27:02 · 384 阅读 · 0 评论 -
Vue--表单--输入绑定--表单标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.原创 2021-08-25 20:31:03 · 151 阅读 · 0 评论 -
Vue--style绑定样式--点击按钮切换样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-08-24 19:54:00 · 894 阅读 · 0 评论 -
Vue生命周期
Vue实例的生命周期全过程(图)1.在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件2.created钩子函数和beforeMount间的生命周期 首先系统会判断对象中有没有el选项 有el选项,则继续编译过程 没有...原创 2021-08-20 17:17:09 · 226 阅读 · 0 评论