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