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. django+celery+redis环境配置

    celery是python开发的分布式任务调度模块 Celery本身不含消息服务,它使用第三方消息服务来传递任务,目前,celery支持的消息服务有RabbitMQ,redis甚至是数据库,redis ...

  2. python使用tkinter无法给顶层窗体的输入框设定默认值

    这几天某同学遇到了一个棘手的问题,困扰了很久.今天终于解决了,我来记录一下坑. 情景:python 使用tkinter为第二层窗体(顶层窗体)中的一个输入框设定默认值时,总是无法设置,而且对输入框获取 ...

  3. @ConfigurationProperties注解和@Value注解的区别

    都是读取配置文件属性 1.  @ConfigurationProperties(prefix = "person")读取多个属性 @Component @Configuration ...

  4. MySQL Hardware--RAID级别查看

    MegaCli查看RAID级别: ## 查raid卡信息(生产商.电池信息及所支持的raid级别) /usr/local/sbin/MegaCli -AdpAllInfo -aALL |grep -E ...

  5. ScheduledExecutorService周期性的定时任务

    从j2se的api文档上查看ScheduledExecutorService的方法都是推迟一段时间然后相隔一段时间之后再去执行,没有想Timer定时器一样的可以在定点时间执行的api,如果也想像Tim ...

  6. mysql:[Err] 1075 - Incorrect table definition; there can be only one auto column and it must be defined as a key

    删除主键时,出错:[Err] 1075 - Incorrect table definition; there can be only one auto column and it must be d ...

  7. mysqldump 备份与恢复数据库

    备份数据库 mysqldump -u root -plvtao test > /home/bak.sql 数据库还原,常用source 命令登陆 mysql -u root -p mysql&g ...

  8. java读取excel的内容(可保存到数据库中)

    //** poi jar包 // public class ReadExcel { @SuppressWarnings("static-access") private stati ...

  9. mysql安装好需要启动和停止服务

    启动mysql: mysql.server start 停止服务:mysql.server stop

  10. Java精通并发-透过openjdk源码分析wait与notify方法的本地实现

    上一次https://www.cnblogs.com/webor2006/p/11442551.html中通过openjdk从c++的底层来审视了ObjectMonitor的底层实现,这次继续来探究底 ...