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. JavaScript前端图片压缩

    实现思路 获取input的file 使用fileReader() 将图片转为base64 使用canvas读取base64 并降低分辨率 把canvas数据转成blob对象 把blob对象转file对 ...

  2. day27-python之迭代器协议

    1.item系列方法 # class Foo: # def __getitem__(self, item): # print('getitem',item) # return self.__dict_ ...

  3. org.w3c.dom document 和xml 字符串 互转

    转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...

  4. Flask之WTfroms组件

    一.WTfroms简介 WTForms插件是类似于django的form组件的插件,可以帮我们写标签,校验数据等. 二.安装与使用 安装: pip install WTForms 使用: from w ...

  5. Python itchat模块的使用,利用图灵机器人进行微信消息自动回复

    一.下载安装itchat模块 二.小实验:获取微信好友头像信息 这需要用itchat模块中的一个方法 itchat.get_friends()#获取微信所有微信好友信息 现在我们导入itchat,打印 ...

  6. zabbix-web界面显示中文

    转载:https://www.cnblogs.com/miclesvic/p/6145171.html 1.确认zabbix是否开启了中文支持功能(/var/www/html/zabbix/inclu ...

  7. macOS 10.13允许任何来源开启方法

    软件下载网站: http://www.pc6.com/ 软件安装问题: macOS 10.13允许任何来源开启方法: 如果需要恢复允许“任何来源”的选项,即关闭系统的Gatekeeper,我们可以在“ ...

  8. SpringCloud学习心得之Eureka注册中心的基本使用

      SpringCloud学习心得——Eureka注册中心 示范代码链接 定义 SpringCloud Eureka是 SpringCloud Netflix微服务套件的一部分,基于 REST 的服务 ...

  9. dt二次开发之-url伪静态的自定义

    dt内核的方便性在于代码内核完全开源,都可以根据自身需要进行优化整改,个人在这段时间的深入研究,发现这套内核的方便性,今天继续给大家分享下DT的url伪静态如何自定义函数. url自定义文件是在api ...

  10. 修改Windows10 命令终端cmd的编码为UTF-8

    1. 临时修改 进入cmd窗口后,直接执行 chcp 2. 永久修改 在运行中输入regedit,找到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Pro ...