Vue 基础 day02
Vue Devtools 安装
https://chrome.google.com/webstore/search/vue%20devtools?hl=zh-CN 需要翻墙
过滤器
概念: Vue.js 允许你自定义过滤器, 可被用作一些常见的文本格式化, 过滤器可以用在两个地方: mustache插值和 v-bind表达式. 过滤器应该被添加在JavaScript表达式的尾部, 用"管道"符提示;
私有
<!-- 可以增加多个, 从左往右依次执行 -->
<td>{{ item.ctime | dataFormat('yyyy-mm-dd') | strRepace() }}</td>
// 全局过滤器, 所有的vm实例都能调用;
Vue.filter('dateFormat', function (dataStr, pattern) {
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
私有
// 就近原则, 如果有两个过滤器, 优先调用私有过滤器
var app2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { // 定义私有过滤器 过滤器名称, 处理函数
dateFormat: function (dateStr, pattern) {
var dt = new Date(dateStr);
var y = dt.getFullYear();
// ES6字符串方法 String.prototype.padStart(MaxLength, fillString='');
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~`;
}
}
}
});
按键修饰符
Vue.js 内部提供了一些按键修饰符
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
<input type="text" v-on:keyup.enter="">
自定义按键修饰符
Vue.config.keyCodes.f1 = 112;
自定义指令
全局
<input type="text" v-focus>
// 参数1: 指令的名称, 注意调用时, 前面要加 v-
// 参数2: 对象, 这个对象身上有一些指令相关的函数, 这些函数在特定的阶段, 执行相关操作
Vue.directive('focus', {
// 注意: 在每个函数中, 第一个参数, 永远是el 表示被绑定了指定的那个元素, 这个el是一个原生的JS对象
bind: function () { // 每当指令绑定到元素上的时候, 会立即执行 bind 这个函数, 只执行一次
},
inserted: function (el) { // 表示元素插入到DOM的时候, 只执行一次
el.focus();
},
updated: function () { // 每当VNode更新的时候, 会执行 可能多次
}
});
// 简写
Vue.directive('focus', function(el) {
el.focus();
});
私有
<p v-color="'red'" v-font-weight="900" v-fontsize="30">{{ dt | dateFormat("") }}</p>
directives: {
'color': {
bind: function (el, binding) {
el.style.color = binding.value;
}
},
'font-weight': {
bind: function (el, binding) {
el.style.fontWeight = binding.value;
}
}
}
// 简写
directives: {
'fontzise': function (el, binding) {
el.style.fontSize = binding.value;
}
}
Vue中的动画
动画能够提高用户体验;帮助用户更好理解页面中的功能;
使用过渡类名
/* v-enter 进入之前 元素的起始状态 此时还没有开始进入 */
/* v-leave-to 动画离开之后 离开的终止状态, 此时元素动画已经结束 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(80px);
}
/* v-enter-active 入场动画的时间段 */
/* v-leave-active 出场动画时间段 */
.v-enter-active,
.v-leave-active {
transition: all 0.4s ease-in;
}
d="app">
<input type="button" value="button" @click="msg = !msg">
<!-- 使用1. transition 元素 把需要控制的动画包裹起来 Vue 官方提供的
v- 并不是必须的, 如果需要更改为其他可以 transition 的 name 属性中指定 例如: my 那么调用时就是 my-enter -->
<transition name="" mode="">
<h3 v-if="msg">H3</h3>
</transition>
</div>
使用动画钩子函数
<div id="app">
<input type="button" value="button" v-on:click="flag = !flag">
<transition name="" mode="" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
methods: {
// 注意: 动画钩子函数的第一个参数 el 表示, 要执行动画的那个 DOM元素 是个原生的JS对象
beforeEnter(el) { // 表示动画入场之前, 此时动画尚未开始, 可以在 before-enter 中设置 元素开始动画之前的起始样式
el.style.transform = 'translate(0, 0)';
},
enter(el, done) { // enter 表示动画 开始之后的样式 这里设置 元素完成动画之后的结束状态
el.offsetWidth; // 这句话没有实际作用, 但是如果不写, 出不来动画效果 可以认为 el.offsetWidth 强制刷新动画
el.style.transform = 'translate(150px, 450px)';
el.style.transition = 'all 1s ease';
// 这里的 done() 其实就是 afterEnter 这个函数, 也就是说 done 是 afterEnter 函数的引用
done();
},
afterEnter(el) { // 动画完成之后 调用 after-enter
console.log('ok');
this.flag = !this.flag
}
}
v-for 列表动画过渡
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(40px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
<!-- 在实现列表过渡的时候, 如果需要过渡的元素的是通过v-for循环渲染出来的, 不能使用 transition 标签 需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环渲染出来的元素设置动画, 必须为每一个 元素设置 :key 属性 -->
<!-- appear 给 transition-group 实现页面入场效果 -->
<!-- 通过 transition-group 设置 tag属性 执行 transition-group 设置为指定的属性 如果不指定渲染为 span 标签 -->
<transition-group appear tag="ul">
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{ item.id }} -- {{ item. name }}</li>
</transition-group>
var app = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{id: 1, name: 'mz'},
{id: 2, name: 'we'},
{id: 3, name: 'ls'},
{id: 4, name: 'zs'},
]
},
methods: {
add() {
this.list.push({id: this.id, name: this.name});
this.id = this.name = '';
}
}
});
/* 离场动画 固定写发 */
.v-move {
transition: all 0.5s ease;
}
.v-leave-actice {
/* width: 100%; */
position: absolute;
}
相关文章
Vue 基础 day02的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
随机推荐
- PAT Basic 1031 查验身份证 (15 分)
一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...
- VB.net删除节点,数据库,文件
Private Sub mnuDel_Click()'删除节点Dim sKey As String'Dim sFile As StringDim oFS As FileSystemObjectDim ...
- 6号板编译失败找不到arm-none-linux-gnueabi-gcc
明明已经添加到/etc/environment 安装sudo apt-get install lib32z1 lib32ncurses5
- HTML加载过程
在地址栏输入url,返回html后,浏览器开始顺序加载并渲染DOM Body标签 当浏览器遇到body标签才算真正开始加载并渲染DOM,此时会有以下几种情况: DOM元素 浏览器遇到dom元素时,正常 ...
- HTML与CSS中的颜色与单位个人分享
颜色与单位 Web安全色有216中其中色彩有210中,非色彩6中 前景色与背景色 前景色就是设置字体的颜色 背景色就是为指定元素设置背景色 - 浏览器默认背景色的颜色为透明色 颜色的命名 1.使用单词 ...
- MySQL--缓存的使用注意
几个参数 query_cache_type:为ON时开启,为OFF关闭,为DEMAND时则只有查询语句中有sql cache时才使用缓存 query_cache_size: 缓存的内存空间 query ...
- SQL server 字段合并CAST(org_no AS VARCHAR(20))+CAST(page_no AS VARCHAR(20))+CAST(djlb_no AS VARCHAR(20)))
sql server 字段合并(CAST) ---------------------- select (CAST(org_no AS VARCHAR(20))+CAST(page_no AS VAR ...
- linux入门 一些常见命令
chvt 切换终端 用法 1是终端 7是图形界面 sudo chvt 1 or 7 cp 复制文件/目录 -a : 通常在复制目录时使用,保存链接,文件属性并递归复制目录 -f:若文件在目标路径中则强 ...
- 立神gvim
set cursorlineset history=1700set nocompatible "去掉讨厌的有关vi一致性模式,避免以前版本的一些bug和局限 set nufiletype ...
- php curl文件上传
<?php /** * 这是一个自动化部署的类, 非常简单,思想就是压缩,上传,然后解压覆盖,所以请小心使用. * @author liuchao <249757247@qq.com> ...