vue生命周期:
  钩子函数:

  created -> 实例已经创建 √
  beforeCompile -> 编译之前
  compiled -> 编译之后
  ready -> 插入到文档中(相当于window.onload,页面初始化写在此处) √

  beforeDestroy -> 销毁之前
  destroyed -> 销毁之后

防止双大括号闪烁

  v-cloak  适用于大段落

  v-text   适用于小段文字

  v-html

计算属性

  angular中使用$scope.$watch进行监听变化

  vue中计算属性的使用:

   computed:{
b:function(){ //默认调用get
return 值(依赖于data中的数据)
}
}
--------------------------
完整用法(get和set方法)
computed:{
b:{
get:function(){},
set:function(){}
}
} * computed里面可以放置一些业务逻辑代码,一定记得return

vue实例简单方法:
  vm.$el -> 就是绑定实例的元素
  vm.$data -> 就是实例的data数据
  vm.$mount -> 手动挂载vue实例到元素上(同el配置项)

  vm.$options -> 获取自定义属性
  vm.$destroy -> 销毁对象

  vm.$log(); -> 查看现在数据的状态

循环重复问题
  v-for="value in data"

  会有重复数据?
  track-by='索引' 提高循环性能

  track-by='$index/uid'

过滤器

  vue提供过滤器:
capitalize uppercase currency.... debounce 配合事件,延迟执行(加上延迟时间参数)
数据(数组)配合使用过滤器:
limitBy 限制几个(后面加参数)
limitBy 参数(取几个)
limitBy 取几个 从哪开始(两个参数) filterBy 过滤数据(后面的参数是包含的过滤条件,类似模糊查询)
filterBy ‘谁’ orderBy 排序(按首字母排序)
orderBy 谁 1/-1 )(两个参数,按谁排,正倒序)
1 -> 正序
-1 -> 倒序 自定义过滤器: model ->过滤 -> view
Vue类上有方法filter
Vue.filter(name,function(input){
//input是要处理的内容,后面也可以有传参数
}); 时间转化器
过滤html标记 双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ // model->view
return input.replace(/<\/?.+?\/?>/g,'');
},
write:function(val){ //view -> model
return val;
}
}); 数据 -> 视图
model -> view view -> model

自定义属性指令

  指令: 扩展html的功能语法 (可以做dom操作,拖拽也只能在指令里面实现)v-text , v-for, v-html

  定义方法:

    Vue.directive(指令名称,function(参数){
      this.el -> 原生DOM元素,vue实例的el
    });

  使用(可传参数):

    <div v-red="参数"></div>

    指令名称: v-red -> red(v-去掉,使用的时候必须以v-开头)

    * 注意: 必须以 v-开头

    拖拽实现代码:    

        Vue.directive('drag',function(){
       var oDiv=this.el;
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
     //使用
     <div v-drag></div>

  自定义元素指令:(用处不大) 后面有组件代替
    Vue.elementDirective('zns-red',{
      bind:function(){
        this.el.style.background='red';
      }
    });

    使用:

    <zns-red></zns-red>

自定义键盘信息    

  vue提供的:

    @keydown.up
    @keydown.enter

  自定义例如@keydown.a/b/c....    用on绑定

    Vue.directive('on').keyCodes.ctrl=17;
    Vue.directive('on').keyCodes.myenter=13;

监听数据变化

  vm.$el/$mount/$options/....

  vm.$watch(name,fnCb); //浅度 name是数据的名字,fnCb是回调函数
  vm.$watch(name,fnCb,{deep:true}); //深度监视 引用类型的数据

2、vueJs基础知识02的更多相关文章

  1. MongoDB基础知识 02

    MongoDB基础知识 02 6 数据类型 6.1 null : 表示空值或者不存在的字段 {"x":null} 6.2 布尔型 : 布尔类型只有两个值true和false {&q ...

  2. day03-MySQL基础知识02

    MySQL基础知识02 4.CRUD 数据库CRUD语句:增(create).删(delete).改(update).查(Retrieve) Insert 语句 (添加数据) Update 语句(更新 ...

  3. vue面试题整理vuejs基础知识整理

    初级参考 1.v-show 与 v-if 区别 v-show 是css隐藏,v-if是直接销毁和创建,所以频繁切换的适合用v-show 2.计算属性和 watch 的区别 计算属性是自动监听依赖值的变 ...

  4. AI-图像基础知识-02

    目录 图像坐标系 图像数字化 图像坐标系     在前面的数据标注文章中讲述如何进行标注,而标注后会保留4个坐标点,那么这些坐标点如何表示在图片中的位置?要表示一个点或图形的位置,就需要涉及到坐标系的 ...

  5. .NET基础知识(02)-拆箱与装箱

    装箱和拆箱几乎是所有面试题中必考之一,看上去简单,就往往容易被忽视.其实它一点都不简单的,一个简单的问题也可以从多个层次来解读. 常见面试题目: 1.什么是拆箱和装箱? 2.什么是箱子? 3.箱子放在 ...

  6. 6、vueJs基础知识06

    vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...

  7. 1、vueJs基础知识01

    vue是框架,vue.js是vue框架的核心js库 库:是一个封装好的特定的方法的集合,提供给开发者使用,库没有控制权,控制权在使用者手中.代表:jQuery.underscore.util 框架:框 ...

  8. 3-15 JS基础知识02

    一.For循环: For (var i = 0;  i <= 10;  i++){ 循环体: } 注意:For循环中的表达式是可以省略的,省略以后是个死循环. odd:奇数   even : 偶 ...

  9. Android基础知识02—安卓日志工具LogCat的五种方法

    --------Android 02-------- >>> Android的日志工具LogCat    五个方法,记录信息的级别不一样,从低到高为:    1.Log.v()-日志 ...

随机推荐

  1. 苹果手机浏览器的$(document).on(“click”,function(){}) 绑定的事件点击无效

    需要给对应的元素加上 cursor: pointer  的css样式才可以生效点击事件:

  2. SIM800A 建立网络

    SIM800A是一款两频GSM/GPRS模块,为SMT封装.其性能稳定,外观小巧,性价比高 可以低功耗实现语音.SMS和数据信息的传输 数据传输 GPRS class 12:最大85.6 kbps(下 ...

  3. maven cmd 命令

    1. mvn clean install :重新清理打包 2.详见:https://www.cnblogs.com/lukelook/p/11298168.html mvn  versions:upd ...

  4. layui 多个文件上传控件 整合缩减代码

    // 图片上传 upload.render({ elem: '.upload-img' // 点击上传的按钮统一使用该类 ,url: "{:url('image/upload')}" ...

  5. 45 个常用Linux 命令,让你轻松玩转Linux!

    Linux 的命令确实非常多,然而熟悉 Linux 的人从来不会因为 Linux 的命令太多而烦恼.因为我们仅仅只需要掌握常用命令,就完全可以驾驭 Linux. 接下来,让我们一起来看看都有那些常用的 ...

  6. WebLogic反序列化漏洞(CVE-2019-2725补丁绕过)

    影响产品: Oracle WebLogic Server10.3.6.0.0 Oracle WebLogic Server12.1.3.0.0 影响组件: wls9_async_response.wa ...

  7. Kotlin扩展作用域分析与扩展的根本作用解析

    在上一次https://www.cnblogs.com/webor2006/p/11219358.html学习了Kotlin的扩展,继续这个话题继续拓展,首先提出这么一个问题:假如我们扩展的方法跟类中 ...

  8. python中的exec和eval

    exec 描述 exec 执行储存在字符串或文件中的 Python 语句,相比于 eval,exec可以执行更复杂的 Python 代码. 返回值 exec 返回值永远为 None. 需要说明的是在 ...

  9. Spring -08 -自动注入 -byName/byType/constructor -全局使用default-autowire=” byName"

    1.在Spring 配置文件中对象名和ref=”id”id 名相同使用自动注入,可以不配置<property/>2.两种配置办法 2.1在<bean>中通过 autowire= ...

  10. 简单理解和使用 C# 委托与事件

    委托和事件 委托:委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法,可以避免在程序中大量使用If-Else(Switch)语句,同时使得程 ...