这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统

难度系数:ng的指令难度大于vue;至少vue上暂时没发现@&=;require,compile,precompile,postcompile之类的小型地雷。。。

这篇文章只看表象;何为指令?这里借助ng的解释来解释vue,就是当你的项目中,需要一些dom操作,并且自带的事件指令感觉麻烦的时候,可以把一些dom操作封装到一个公共方法,这就是指令,大概用在vue上也可以说个70%;

写法,vue:

  1. Vue.directive('my-directive', {
  2. bind: function () {
  3. // 准备工作
  4. // 这里可以写一些公共方法,比如点击一个块那些东西hide,show
    其中this.el就是那个挂载指令的dom点,
  5. },
  6. update: function (newValue, oldValue) {
  7. // 值更新时的工作
  8. // 也会以初始值为参数调用一次
  9. },
  10. unbind: function () {
  11. // 清理工作
  12. // 例如,删除 bind() 添加的事件监听器
  13. }
  14. })

指令内部可以定义多个属性,可以理解为一个指令具备一个作用域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来解释下

第一个,一个简单的长按指令

  1. Vue.directive('longTap', {
  2. params: ['idx'],//这个和下面的timer可以简单理解为jq插件的defaults,区别就是上面的是动态的,放在html上,值是根据data进行赋值的;
  3. timer: null,
  4. bind: function () {
  5. var self = this
  6. var arge = this.expression
  7. this.change = function (x) {
  8. self.vm.$data[arge] = x
  9. }
  10. this.el.addEventListener('touchstart', function () {
  11. self.timer = setTimeout(function () {
  12. self.change(self.params.idx)
  13. }, 1000) }
  14. )
  15. this.el.addEventListener('touchmove', function () {
  16. clearTimeout(self.timer)
  17. })
  18. this.el.addEventListener('touchend', function () {
  19. clearTimeout(self.timer)
  20. })
  21. }
  22. })

第二个就是vue官网的demo;

  1. Vue.directive('demo', {
  2. bind: function () {
  3. console.log('demo bound!')
  4. },
  5. update: function (value) {
  6. this.el.innerHTML =
  7. 'name - ' + this.name + '<br>' +
  8. 'expression - ' + this.expression + '<br>' +
  9. 'argument - ' + this.arg + '<br>' +
  10. 'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' +
  11. 'value - ' + value//注意这里的value是你属性上的的表达式解析后的值
  12. }
  13. })
  14. var demo = new Vue({
  15. el: '#demo',
  16. data: {
  17. msg: 'hello!'
  18. }
  19. })

params和arg

首先arg是紧跟着指令后面,而params是和指令之间有个空格;

用处区别。我给的是个动态参数需要data解析的用前者,非动态用后者;其中后者的值可以通过update里的value获取得到,update有两个参数

注意如果是字符串,必须要要写修饰符literal,如果是对象可以不写;params的用处可以动态传参,那么arg的用处何在呢?其实我想了半天也没想到什么好的用处,也就是点击时候对应模块show,hide传参数显示;注意这里如果在update里面直接获取value的节点是获取不到报错;这个value当作为指令本身的值,也就是不存在arg的时候。可以认为具备了动态的作用;对应的引入一个属性:acceptStatement:他的意思是解析一个表达式;

常用的应该是这几个吧,剩下的三个改天再说;

  

vue之指令篇 ps简单的对比angular的更多相关文章

  1. Vue 之指令篇

    文件指令 <body>    <div id="app">        <!-- 1) 插值表达式 -->        <p>{ ...

  2. Vue.js 源码分析(十六) 指令篇 v-on指令详解

    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,例如: <!DOCTYPE html> <html lang="en"& ...

  3. vue学习指南:第二篇(详细Vue基础) - Vue的指令

    一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...

  4. Vue.js 源码分析(二十三) 指令篇 v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...

  5. Vue.js 源码分析(二十二) 指令篇 v-model指令详解

    Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...

  6. Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解

    双大括号会将数据解释为普通文本,而非 HTML 代码.为了输出真正的 HTML,你需要使用 v-html 指令,例如: <!DOCTYPE html> <html lang=&quo ...

  7. Vue.js 源码分析(十五) 指令篇 v-bind指令详解

    指令是Vue.js模板中最常用的一项功能,它带有前缀v-,比如上面说的v-if.v-html.v-pre等.指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,先介绍v-bind指 ...

  8. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

  9. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

随机推荐

  1. MySQL高级函数case的使用技巧----与sum结合实现分段统计

    case 函数 CASE WHEN condition1 THEN result1 WHEN condition2 THEN result2 ... WHEN conditionN THEN resu ...

  2. Mysql浅析-基础命令(一)

    主要从以上篇幅来介绍mysql的一些知识点 一.Mysql简介 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数 ...

  3. ionic2添加支付宝插件出现问题

    安装本地路径插件正常  编译正常  在打开支付页面时候 就报这个错 在手机app点击无效 错误信息: ERROR Error: Uncaught (in promise): Error: No pro ...

  4. 【visual studio code 的python开发环境搭建 】

    打开vs code,按按F1或者Ctrl+Shift+P打开命令行,然后输入ext install 输入Python,选第一个,这个用的最多,支持自动补全代码等功能,点击安装按钮,即可安装 下面试着编 ...

  5. Nginx 解决504 Error 最简单的方法

    <?php // Where am I ? set_time_limit(0); 就这个多,当然了,服务器还是务求稳妥,应当结合服务器和业务需求从配置上优化,才是正理.

  6. 2017 ACM-ICPC 亚洲区(西安赛区)网络赛

    A There is a tree with nn nodes, at which attach a binary 64*6464∗64 matrix M_i (1 \le i \le n)M ​i ...

  7. 20155338 2016-2017-2 《Java程序设计》第3周学习总结

    20155338 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 本周学习量比较多,但是知识点并不是特别难,学习了书本的第四五章,其中个人重点学习了数组对象. ...

  8. XAMPP设置tomcat自启动时,报无效的Win32程序

    最近给一个客户开发了一套系统,需要在内网中部署.系统是Java + Tomcat7 + mysql开发的. 考虑到客户内网不能上网的情况下,想使用XAMPP的便捷性,给客户进行部署.因为只需要Tomc ...

  9. (转) 前端面试之js相关问题(一)

    原帖地址:http://stephenzhao.github.io/2016/08/19/Front-end-Job-Interview-Questions/ 最近我也是经历过面试别人和去面试的人了, ...

  10. Drupal8 使用模块的配置文件

    D8中移除了variable表及相关方法 (variable_get(),variable_set()等) .用config表取代了. 新的方法该如何使用? 以D8的Youtube模块为例 配置文件要 ...