vue
关注
分享
扫一扫
文章平均质量分 87
博客即笔记，笔记即博客。
tiano_天道酬勤
天道酬勤
展开
-
（九）Vue - 组件
（九）Vue - 组件创建组件的三种方式父组件向子组件传值或方法创建组件的三种方式方式一 //如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候， //需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接； Vue.component('mycom1', Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' }))方原创 2020-09-03 21:35:51 · 517 阅读 · 0 评论 -
（八）Vue - 过渡和动画
（八）Vue - 过渡和动画过滤的类名自定义过渡的类名使用第三方类实现过渡动画动画的钩子函数列表动画过滤的类名vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了 transition 的封装组件，可以再某些条件下，给任何元素或组件添加进入或离开过渡动画。学习过渡，我们必须要知道有哪些过渡的类名。借用官方文档的一张图来讲解过渡的类名：在dom进入/离开的过渡中，会有 6 个 class 切换，我们可以理解为dom进入和离开的过渡，会存在6个class的钩子。原创 2020-07-12 22:26:20 · 858 阅读 · 0 评论 -
（七）Vue - Vue实例的生命周期
（七）Vue - Vue实例的生命周期什么是生命周期生命周期函数什么是生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期钩子：就是生命周期事件的别名生命周期钩子 = 生命周期函数 = 生命周期事件借用官方文档的生命周期图，本文主要讲解Vue生命周期函数生命周期函数对生命周期函数进行分类原创 2020-07-07 21:28:58 · 553 阅读 · 0 评论 -
（六）Vue - 自定义指令和键盘修饰符
（六）Vue - 自定义指令自定义指令的介绍自定义全局指令及钩子函数钩子函数参数自定义局部指令函数的简写自定义键盘修饰符自定义指令的介绍前面文章中讲解了一些Vue自带指令的使用，如果Vue自带的指令不满足于我们的需求呢？这篇文章我们学习如何自定义自己想要的指令来满足我们的项目需要。关于指令,我们可以总结下面几点:指令是写在 HTML 属性地方的.<input v-model='name' type='text' />指令都是以 v- 开头的.指令表达式的右边一般也可以跟值，例如v原创 2020-07-05 16:25:02 · 774 阅读 · 0 评论 -
（五）Vue - 过滤器filter
（三）Vue - 过滤器filter过滤器的使用全局过滤器局部过滤器多个过滤器的链式调用带参数的过滤器程序开发过程中经常会碰到需要对某一个数据进行加工或优化后使用或显示，这个时候就需要用到过滤器。过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，这点要切记。过滤器可被用于一些常见的文本格式化。过滤器分为全局过滤器和局部过滤器过滤器的使用在双花括号中使用管道符(pipeline) |隔开，或者v-bind 表达式//过滤器的简单使用 <p>{{ ms原创 2020-07-04 22:58:24 · 822 阅读 · 0 评论 -
（四）Vue - 在Vue中使用样式
（三）Vue - 在Vue中使用样式使用class样式使用内联样式使用class样式普通的使用class样式：<h1 class="red thin">我是h1标签！！！</h1>直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定数组中使用引号代表class样式名，不带引号则为变量名<h1 :class="['red', 'thin']">我是h1标签！！！</h1>在数组中使用三元表达式<h1原创 2020-06-27 21:32:59 · 629 阅读 · 0 评论 -
（三）Vue - 基本指令之v-for、v-if和v-show
（三）Vue - 基本指令之v-for、v-if和v-show指令：v-for指令：v-if 和v-show指令：v-else 和v-else-if指令：v-forfor循环，可遍历普通数组、对象数组、对象和数字；说千遍道万遍不如直接上代码：<body> <div id="app"> <h4>遍历普通数组</h4> <!-- list1: [1, 2, 3, 4, 5, 6] --> <p v-for="(it原创 2020-06-21 23:03:56 · 657 阅读 · 0 评论 -
（二）Vue - 插值表达式及基本指令之v-cloak、v-text、v-html、v-bind、v-model和v-on
这里写目录标题插值表达式指令：v-cloak指令：v-text指令：v-html指令：v-bind指令：v-on插值表达式再Vue中，{{}} 语法 叫做 插值表达式例如： <p>{{msg}}</p> 指令：v-cloak单纯使用插值表达式界面渲染数据时会出现闪烁，数据显示异常的问题，使用 v-cloak 能够解决 插值表达式闪烁的问题<p v-cloak>{{ msg }}</p>指令：v-text效果类同插值表达式方式绑定数据原创 2020-06-15 23:29:23 · 953 阅读 · 0 评论 -
（一）Vue - 什么是Vue.js（Vue之初次见面）？
（一）Vue - 什么是Vue.js（Vue之初次见面）？ 一.什么是Vue.js二.为什么要学习Vue三.Vue.js的初次见面之Hello World！四.从MVVM的角度来看Vue一.什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框原创 2020-06-14 22:21:18 · 655 阅读 · 0 评论