vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统
难度系数:ng的指令难度大于vue;至少vue上暂时没发现@&=;require,compile,precompile,postcompile之类的小型地雷。。。
这篇文章只看表象;何为指令?这里借助ng的解释来解释vue,就是当你的项目中,需要一些dom操作,并且自带的事件指令感觉麻烦的时候,可以把一些dom操作封装到一个公共方法,这就是指令,大概用在vue上也可以说个70%;
写法,vue:
Vue.directive('my-directive', {
bind: function () {
// 准备工作
// 这里可以写一些公共方法,比如点击一个块那些东西hide,show
其中this.el就是那个挂载指令的dom点,
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如,删除 bind() 添加的事件监听器
}
})
指令内部可以定义多个属性,可以理解为一个指令具备一个作用域scope,但是这个作用域能否为false;和外部公用一个作用域,不清楚,不过个人理解应该不可以的,因为
vue把ng指令里的tenplate项拆开了变成组件component,当然,这个好坏个人感官不同,不过component貌似也不可以设置scope为false,需要prop进行传参,类似
ng的&@=绑定,当然比之要简单许多;
对于ng这里不多讲,想要了解,自行参看本人github上一个独立完成的未上线的成品ng项目(angular1+ui-router):当时那个坑,一个人独自摸索,头都大了。。。
https://github.com/lyz1991/the-project-of-angular (ps:广告,希望进入了得最好关注下,虽然只是个游荡各个场所的菜鸟)
重点讲vue的指令(纯属个人一天的实验理解)
首先三大方法(其实应该是n个,三个是主流),bind,update,unbind;
字面意思:bind:主要是我为我当前添加指令的那个dom点需要添加哪些事件可以写在这里,比如为一个dom添加一个click事件,为指令第一个执行的方法
update:为值放生变化时候执行的方法,其实应该是指令继bind后第二个执行的方法;unbind:指令离开时候触发的方法(这个暂时具体有什么意义还不清楚);
可能文字不太清楚,两个demo来解释下
第一个,一个简单的长按指令
Vue.directive('longTap', {
params: ['idx'],//这个和下面的timer可以简单理解为jq插件的defaults,区别就是上面的是动态的,放在html上,值是根据data进行赋值的;
timer: null,
bind: function () {
var self = this
var arge = this.expression
this.change = function (x) {
self.vm.$data[arge] = x
}
this.el.addEventListener('touchstart', function () {
self.timer = setTimeout(function () {
self.change(self.params.idx)
}, 1000) }
)
this.el.addEventListener('touchmove', function () {
clearTimeout(self.timer)
})
this.el.addEventListener('touchend', function () {
clearTimeout(self.timer)
})
}
})
第二个就是vue官网的demo;
Vue.directive('demo', {
bind: function () {
console.log('demo bound!')
},
update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '<br>' +
'expression - ' + this.expression + '<br>' +
'argument - ' + this.arg + '<br>' +
'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' +
'value - ' + value//注意这里的value是你属性上的的表达式解析后的值
}
})
var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})
params和arg
首先arg是紧跟着指令后面,而params是和指令之间有个空格;
用处区别。我给的是个动态参数需要data解析的用前者,非动态用后者;其中后者的值可以通过update里的value获取得到,update有两个参数
注意如果是字符串,必须要要写修饰符literal,如果是对象可以不写;params的用处可以动态传参,那么arg的用处何在呢?其实我想了半天也没想到什么好的用处,也就是点击时候对应模块show,hide传参数显示;注意这里如果在update里面直接获取value的节点是获取不到报错;这个value当作为指令本身的值,也就是不存在arg的时候。可以认为具备了动态的作用;对应的引入一个属性:acceptStatement:他的意思是解析一个表达式;
常用的应该是这几个吧,剩下的三个改天再说;
vue之指令篇 ps简单的对比angular的更多相关文章
- Vue 之指令篇
文件指令 <body> <div id="app"> <!-- 1) 插值表达式 --> <p>{ ...
- Vue.js 源码分析(十六) 指令篇 v-on指令详解
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,例如: <!DOCTYPE html> <html lang="en"& ...
- vue学习指南:第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
- Vue.js 源码分析(二十二) 指令篇 v-model指令详解
Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...
- Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解
双大括号会将数据解释为普通文本,而非 HTML 代码.为了输出真正的 HTML,你需要使用 v-html 指令,例如: <!DOCTYPE html> <html lang=&quo ...
- Vue.js 源码分析(十五) 指令篇 v-bind指令详解
指令是Vue.js模板中最常用的一项功能,它带有前缀v-,比如上面说的v-if.v-html.v-pre等.指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,先介绍v-bind指 ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
随机推荐
- css 中的 initial inherit unset 意思
写css时,在对属性进行选值,经常遇到unset , initial,inherit三个值.这几个值的含义. 1.inherit 可继承性 继承的意思. 每一个 CSS 属性都有一个特性就是,这个属性 ...
- Java单例模式几种实现方式
在平时的工作.学员的学习以及面试过程中,单例模式作为一种常用的设计模式,会经常被面试官问到,甚至笔试会要求学员现场默写,下面将会就单例模式的实现思路和几种常见的实现方式进行简单的分享. 单例模式,是一 ...
- 前端应该掌握的ps知识
你说有美图秀秀之后PS要over了,NO PS 依旧很重要,当然除了修人像,比如切图什么的 来吧 开始吧 在开始切图之前,先科普几个小技巧 1. 如果快速从大图中拿出自己想要的小图 : 需求:快速拿出 ...
- 浏览器内多个标签页之间的通信之storage
在一个标签页里面使用 localStorage.setItem(key,value)添加(修改.删除)内容: 在另一个标签页里面监听 storage 事件. 即可得到 localstorge 存储的值 ...
- 大数据学习--day14(String--StringBuffer--StringBuilder 源码分析、性能比较)
String--StringBuffer--StringBuilder 源码分析.性能比较 站在优秀博客的肩上看问题:https://www.cnblogs.com/dolphin0520/p/377 ...
- 希尔伯特曲线——第八届蓝桥杯C语言B组(国赛)第三题
原创 标题:希尔伯特曲线 希尔伯特曲线是以下一系列分形曲线 Hn 的极限.我们可以把 Hn 看作一条覆盖 2^n × 2^n 方格矩阵的曲线,曲线上一共有 2^n × 2^n 个顶点(包括左下角起点和 ...
- MySQL数据库删除数据(有外键约束)
在MySQL中删除一张表或一条数据的时候,出现有外键约束的问题,于是就去查了下方法: SELECT @@FOREIGN_KEY_CHECKS; 查询当前外键约束是否打开 ; 设置为1的时候外键约束是打 ...
- 在vim编辑器中实现python的tab补全
在vim编辑器中实现python的tab补全 在vim编辑器中实现python tab补全插件有Pydiction,Pydiction可以实现下面python代码的自动补全: 1.简单python ...
- Go语言中结构体的使用-第2部分OOP
1 概述 结构体的基本语法请参见:Go语言中结构体的使用-第1部分结构体.结构体除了是一个复合数据之外,还用来做面向对象编程.Go 语言使用结构体和结构体成员来描述真实世界的实体和实体对应的各种属性. ...
- [arc067F]Yakiniku Restaurants[矩阵差分]
Description 传送门 Solution 假如我们确定了烧烤店区间[l,r],则票j必定会选择在B[i][j](l<=i<=r)最大的烧烤店使用. 反过来想,我们想要票j在第i个烧 ...