目录:

1:全局过滤器的使用

2:局部过滤器

3:自定义键盘码

4:自定义指令

5:自定义私有指令

6:Vue生命周期。

7:网络请求

1:全局过滤器的使用

Vue.filter("msgFormat", function(msg, arg){
           return msg.replace(/单纯/g, arg);
        });
 
 Vue.filter("test", function (msg) { 
            return msg + "======";
         });
 
html中:

<p>{{ msg | msgFormat("疯狂") | test}}</p>

2:局部过滤器

var vm = new Vue({
  el: "#app",
  data:{
  },
  methods:{
  },
  // 这是私有过滤器
  filters:{
      },
});

3:按键修饰符号

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

自定义全局键盘码:

Vue.config.keycodes.f2 = 113;
 

4:自定义全局指令

// 使用  Vue.directive() 定义全局的指令  v-focus
// 其中:参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀, 
// 但是: 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用
//  参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
    Vue.directive('focus', {
  // 一般进行一些样式的操作
      bind: function (el) { // 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
        // 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象
        // 在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用
        //  因为,一个元素,只有插入DOM之后,才能获取焦点
        // el.focus()
      },
  // 一般进行一些js操作。
      inserted: function (el) {  // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】
        el.focus()
        // 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效
      },
      updated: function (el) {  // 当VNode更新的时候,会执行 updated, 可能会触发多次
      }
    })
 

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind:只调用一次,指令与元素解绑时调用。

 

5:自定义私有的指令

var vm = new Vue({
            el : "#app",
            data : {
            },
            methods : {
            },
            //  自定义私有的过滤器
            filter : {
            },
            //  自定义私有的指令
            directives : {
                "fontweight" : { 
                    bind : function (el , binding) {  
                        el.style.color = binding.value;
                    }
                 },
            },
        });
 
 

6:Vue的生命周期

beforeCreate() { // 这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
        // console.log(this.msg)
        // this.show()
        // 注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中,data 和 methods 都已经被初始化好了!
        // 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
   // 如果通过插件来操作DOM元素,最早在mounted中操作,
  // 此时已经脱离了创建阶段,到了运行阶段。
      },
      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候,表示 我们的界面还没有被更新【数据被更新了吗?  数据肯定被更新了】
        /* console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是:' + this.msg) */
        // 得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是:' + this.msg)
        // updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
      }
当执行beforeDestory钩子函数的时候,Vue实例从运行阶段进入到销毁阶段
当执行beforeDestory钩子函数的时候,Vue实例身上所有的data和methods和过滤器和指令都处于可以利用的状态。此时还没有真正的销毁。
 
当执行Destoryed钩子函数的时候,Vue实例身上所有的data和methods和过滤器和指令都处于不利用的状态。

7:vue-resource

[vue-resource 实现 get, post, jsonp请求](https://github.com/pagekit/vue-resource)
除了 vue-resource 之外,还可以使用 `axios` 的第三方包实现实现数据的请求
1. 之前的学习中,如何发起数据请求?
2. 常见的数据请求类型?  get  post jsonp
3. 测试的URL请求资源地址:
 + get请求地址: http://vue.studyit.io/api/getlunbo
 + post请求地址:http://vue.studyit.io/api/post
 + jsonp请求地址:http://vue.studyit.io/api/jsonp
 
 

小技巧:

1:在Vue中尽量不要使用jQuery。

2:在Vue中,使用时间绑定机制,为元素指定处理函数的时候,如果添加了小括号,就可以传递参数了。

3:循环遍历:foreach  some  filter  indexOf.

4:数组添加是push,删除元素是splic。

注意:

1:在Vue中,已经实现了数据的双向绑定,每当我们修改了data的数据,Vue会默认监听到数据的变动,自动把最新的数据,应用到页面上。

02 (H5*) Vue第二天的更多相关文章

  1. 总结Vue第二天:自定义子组件、父子组件通信、插槽

    总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...

  2. H5学习第二周

    怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有 ...

  3. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  4. 【02】 Vue 之 数据绑定

    2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定. 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的.通俗点说就是,Vue对象的改变会直接影响到HTML的标 ...

  5. 03 (H5*) Vue第三天

    目录: 1:Vue-resource中的全局配置. 2:Vue动画2部曲 3:animate动画 4:钩子函数动画 5:组件三部曲,推荐使用template标签来创建组件模板 1:Vue-resour ...

  6. [Markdown] 02 简单应用 第二弹

    目录 4. 插入链接 4.1 Markdown 的方式 用法 1 用法 2 4.2 HTML5 的方法 用法 1 用法 2 5. 插入图片 5.1 使用网络地址 5.2 使用本地地址 5.2.1 小括 ...

  7. 学习Vue第二节,v-cloak,v-text,v-html,v-bind,v-on使用

    v-cloak,v-text,v-html,v-bind,v-on使用 <!DOCTYPE html> <html> <head> <meta charset ...

  8. vue第二十单元(vux的配置中模块modules的用法)

    第二十单元(vux的配置中模块modules的用法) #课程目标 1.什么是module? 2.怎么用module? 3.样板代码目录结构 #知识点 #1.modules 在Vue中State使用是单 ...

  9. 19课 Vue第二节

    事件修饰符 stop 禁止冒泡once 单次事件prevent 阻止默认事件native 原生事件(组件)keycode|name 筛选按键   组合键 : @keydown.ctrl.enter s ...

随机推荐

  1. Sqlserver 存储过程中使用事务

    ALTER PROCEDURE [dbo].[Purchase_Create]@Docid varchar(100),    ----  搜索唯一编号@Title varchar(100),    - ...

  2. 良许Linux | Linux学习方法及学习资料汇总

    很多人想学习Linux,却不知道怎么着手,甚至不知道Linux有哪些方向,非常迷茫.基于此,我特地写了篇文章介绍Linux方向性问题,没想到一不小心成了爆款: 到什么程度才叫精通 Linux?​ 看完 ...

  3. 从无到有构建vue实战项目(七)

    十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...

  4. maven替换中央仓库,阿里云镜像下载及自定义本地仓库位置

    maven替换中央仓库- 阿里云 在国内访问Maven仓库,下载速度太慢.下面是将中央仓库替换成阿里云的中央仓库的方法.国内还有其他的公共仓库,自己选择.  在你下载的maven版本-conf-set ...

  5. unity_UGUI养成之路01

    1.UGUI_UI之音量设计  2.控制音量音效的开关 实现开和关的互斥点击 实现开与关画面的显示 注意,上图并未选择分组.具体原因博主尚不清楚如果有知道的可以告知一二,谢谢各位!!! 代码: usi ...

  6. HDU 6044

    题意略. 思路: I.对于整个区间a1,....,an,必然有一个区间[1,n]与之对应,因为a1,...,an是1,...,n的一个排列,所以在[1,n]中定然有一个最小的数字1, 如果最大的区间[ ...

  7. ‎CocosBuilder 学习笔记(2) .ccbi 文件结构分析

    ccbi总体结构 CCBReader按字节读取.ccbi内容,每个字节8位二进制. .ccbi总体结构分为4个部分: Header 第0-3字节:ibcc .ccbi文件的标志.readHeader方 ...

  8. Python Web Flask源码解读(四)——全局变量

    关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...

  9. Java连载26-方法(语法结构)

    一.方法 1.返回值类型如果不是void,表示这个方法执行结束之后必须返回一个具体的数值,当方法执行结束的时候没有返回任何数值,编译器会报错,怎么返回值呢?并且要求“值”的数据类型必须和“方法的返回值 ...

  10. 【selenium】- webdriver常见api

    本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.常见API 2.打开网址 3.操作浏览器 quit()没有完全关闭进程,依旧占用资源. 4.输入框操作 5.选择框操作 6.特殊窗口操作 ...