vue1.0总结笔记一

1、 常用指令：

　　 v-for v-bind v-on v-show v-if v-model

　　v-for {{$index}} => 索引值

　　{{$key}} => key值

　　$event 默认第一个参数就是咱们的事件对象　　

　　键盘事件 @keydown/up

　　　　　　 @keyCode

　　　　　　 @keydown.enter

　　　　　　 @keydown.65.66.68

　　　　　　 @keydown.left...

　　　　　　 类型 v-bind:class="myDiv"

　　　　　　　　data:{myDiv:['red','shadow']}

　　　　　　　　data:{

　　　　　　　　　　myDiv:{

　　　　　　　　　　'red':true,

　　　　　　　　　　'shadow':true,

　　　　　　　　　　'animate':true

　　　　　　　  }}

　　　　　　　 样式 :style='[init,green]'

　　　　　　　　　　data:{

　　　　　　　　　　　　init:{

　　　　　　　　　　　　　　'width':'200px',

　　　　　　　　　　　　　　'height':'200px',

　　　　　　　　　　　　　　'background':'red'

　　　　　　　　　　　　},

　　　　　　　　　　　　green:{

　　　　　　　　　　　　　　"background":'green'

　　　　　　　　　　　　}

　　　　　　　　　　}

2、 只渲染一次 {{*msg}}

3、 阻止冒泡：

　　　   原生： event.stopPropagation(); event.cancelBubble = true;

　　　　vue:    @click.stop

　   阻止默认事件：

　　　   原生： event.preventDefault(); event.returnValue = false;

4、 含有元素的转化 {{{ msg }}}

　　 msg: <span>hello everyOne</span>

5、 选项卡 通过$index 和 index比较显示哪一个，通过点击将index赋值给全局变量进行比较

6、 前端包管理工具 bower npm install bower -g

　　bower 只是npm包管理器中的其中一个包 - 包管理器

　　bower info vue<->版本

　　如果直接下载 默认是 最高的版本

　　bower i 下载库的名字#版本号

7、 vue-resource

　　数据请求： this.$http.get({地址,{参数}})

　　　　　　　　.then(function(){})

　　　　　　　　.catch(function())\

　　　　　　　this.$http.post({地址,{参数},{emulateJSON: true}})

　　　　　　　　.then(function(){})

　　　　　　　　.catch(function())

　 jsonp跨域： this.$http.jsonp({地址},{参数},{jsonp:"cb"})

　　　　　　　　.then(function(){},function(){})

　百度跨域: this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{

　　　　　　　　　　　　wd: this.wd

　　　　　　　　　　　},{

　　　　　　　　　　　　jsonp: "cb"

　　　　　　　　　　　}).then(function(data){

　　　　　　　　　　　　console.log(data);

　　　　　　　　　　　　this.arr = data.data.s;

　　　　　　　　　　　},function(){

　　　　　　　　　　　})

8、 过滤 filterBy toUpperCase toLowercase limitBy

　　自定义过滤器： Vue.filter("名称",fucntion(){

　　　　　　　　　　　　return "返回数据"

　　　　　　　　　})

　　自定义双向过滤器： Vue.filter("名称",{

　　　　　　　　　　　　read: function(){

　　　　　　　　　　　　　　首次渲染读取

　　　　　　　　　　　　},

　　　　　　　　　　　　write: function(){

　　　　　　　　　　　　　　更改数据渲染

　　　　　　　　　　　　　　}

　　　　　　　　　　　　})

　　　　　　　　　　　　{{msg | 过滤器的名称}}

　　过滤器 就是 把原来的数据 加工一下变成 想要的

　　vue内置过滤器

　　capitalize - 首字母变大写

　　uppercase - 所有的英文字母变大小

　　lowercase - 所有的英文字母变小写

　　currency - 帮咱们变成货币形式输出

　　传参

　　　　过滤器名 "参数一" "参数二" "参数三"　　

　　　　第一个参数 就是货币符号 默认 $

　　　　第二个参数 就是 小数位 默认 2

　　pluralize

　　　　英文有复数 复数 + s

　　debounce

　　　　做等待处理 默认是300毫秒

　　　　也可以自己去 处理时间 传参

　　limitBy

　　截取

　　第一个参数 截取几个 

　　第二个参数 从第几个开始

　　filterBy

　　　　过滤 -》 给出关键字 帮咱们 过滤掉 没有关键字的

　　orderBy  排序   生序降序

9、 自定义指令： 名称=val赋值

　　　　Vue.directive("名称",function(val){})

　　　　　　双向赋值： Vue.directive("名称",{

　　　　　　　　　　　　bind(){

　　　　　　　　　　　　　　初始化

　　　　　　　　　　　　},

　　　　　　　　　　　　update(val){

　　　　　　　　　　　　　　数据更改

　　　　　　　　　　　　　　}

　　　　　　　　　　　　})

10、v-cloak 解决闪烁的问题，自定义属性加在标签上，<div v-cloak></div>，当vue加载完成的时候会删除v-cloak属性，所以只需要再vue加载前将其模块隐藏即可，

　　c-cloak：{display：none;}

11、元素指令 <ele></ele

　　Vue.elementDirective("ele",{

　　　　bind(){

　　　　　　初始化　　

　　　　　　},

　　　　update(){

　　　　会报错提示使用组件

　　　　　　}

　　　　})

12、track for循环添加一样的数据会报错，添加track-by="$index"

13、侦听属性

　　var a = new Vue({

　　　　el:'body',

　　　　data:{

　　　　　　a:'',

　　　　　　b:'',

　　　　　　c:''

　　　　　}

　　　　});

　　a.$watch('a',function(){

　　　　this.c = Number(this.a) + Number(this.b);

　　})

14、实例属性

　　$mount('') 这个级别没有el高

　　$data 就是data

　　$el 可以帮咱们获取原生的dom对象

　　$options 获取自定义属性/正常属性

　　$log 可以快速帮咱们看到data的内容

　　$destroy 销毁对象

15、this在声明周期上的指向es6

　　new Vue({

　　　　el:"body",

　　　　data:{

　　　　　　msg:"hello vue",

　　　　　　arr:["Mary","Hery","Jack","Lucy"],

　　　　　　arrObj: [{

　　　　　　　　info: "my name is Mary,age is 18"

　　　　　　},{

　　　　　　　　info: "my name is Hery,age is 16"

　　　　　　},{

　　　　　　　　info: "my name is Jack,age is 20"

　　　　　　},{

　　　　　　　　info: "my name is Lucy,age is 25"

　　　　　　}],

　　　　　　index: 0

　　　　　　},

　　　　　　ready(){

　　　　　　　　console.log(this);

　　　　　　　　var that = this;

　　　　　　　　setInterval(()=>{

　　　　　　　　　　console.log(this);// 指向这个vue对象

　　　　　　　　　　that.index++;

　　　　　　　　　　that.index == that.arr.length && (that.index = 0);

　　　　　　　　},1000)

　　　　　　　　setInterval(function(){

　　　　　　　　　　console.log(this);// 指向window

　　　　　　　　　　that.index++;

　　　　　　　　　　that.index == that.arr.length && (that.index = 0);

　　　　　　　　},1000)

　　　　　　　　setInterval(function(){

　　　　　　　　　　console.log(this);// 指向vue对象

　　　　　　　　　　that.index++;

　　　　　　　　　　that.index == that.arr.length && (that.index = 0);

　　　　　　　　　　}.bind(this),1000)

　　　　　　　　　}

　　　　　　　　})

// setInterval，setTimeout里面的this在普通函数里面this指针发生改变指向window，

而在箭头函数上this指针不会发生改变还是指向vue对象

转载于:https://www.cnblogs.com/chuanzhou/p/9465322.html