Vue简单总结

Vue安装:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev




初始化  beforcreate
created
渲染 beformount
mounted
更新 beforupdata
updataed
销毁 befordestory
destoried

vuex
mapActions  管理所有的事件 
mapGetters 获取数据





new Vue({
               el:'选择器',  
                data:{
数据
                    mas:'welcome vue'
                },methods:{
函数:function(){
语句;
}
}
            });


常见的指令


指令:宽展html标签功能/属性
v-model 一般放在表单元素上(input)  双向数据绑定

循环
v-for="(value,index) in arr"   

<ul>
        <li v-for="(value,index) in arr">
            {{value}}
            {{index}}
        </li>
    </ul>
    <br/>
    <ul>
        <li v-for="(value,key,index) in json">
            {{value}}
            {{key}}
            {{index}}
        </li>
    </ul>
    <br/>
    <ul>
        <li v-for="(v,k,i) in json">
            {{v}}
            {{k}}
            {{i}}
        </li>

事件

v-on:click="函数"   /mouseout/mouseover/...
函数放在
methods:{
函数:function(){
语句;
}
}
显示/隐藏
v-show="true/false(显示/隐藏)"

v-if='true/false'   v-else  
要挨着,中间不能插入别的标签  当if的值是true就显示if里的东西 否则显示else里的内容
v-if='s == a'  v-else-if='s == b'  v-else

vue简易留言板(todolist)

bootstrap css框架  跟jQuerymobile一样
只需要给标签赋予class 角色

事件深入

v-on:click
简写 
@click

事件对象

@click="show($event)"
事件冒泡

阻止冒泡
a). ev.cancelBubble=true;
b). @click.stop="show($event)"  

默认行为(默认事件)

阻止默认成行为
a). ev.preventDefault();
b). @contextmenu.prevent  

键盘事件
ev.keyCode 

@keyup/@keydown

常用的键

回车  1).@keydown.13 
2).@keydown.enter
上,下,左,右
@keydown/keyup.up
@keydown/keyup.down
@keydown/keyup.left
@keydown/keyup.right
------------------------------
属性
綁属性
v-bind:src="url"
简写
:src

data:{
url:"https://www.baidu.com",
w:"100px",
t:"这是一张美丽的图片"
}

<img src="{{url}}" alt=""> 效果可以出来 但是会报一个404的错误
<img v-bind:src="url" alt="">  不会报错
<img :src="url" :alt="t" :width="w">  
------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

data:{
red:"red",
b:'blue'
}

:class="[red]" red是data里的数据
:class="[red,b]" red,b是data里的数据

:class="{red:true,b:true}"  true/false 可以放data中的数据代替
:class="json"  data:{json:{red:"true",blue:"true"}}
------------------------
:style

:style="[c]"
:style="[c,b]"
注意:复合样式的时候 驼峰命名法 

:style="json"  data:{json:{color:"red",backgroundColor:"blue"}}
------------------------------
模板:
{{msg}}   数据更新 模板也变化
{{*msg}}  只绑定一次数据 不会跟着更新

{{{msg}}}  html转义字符 <h2>aaa</h2>  会显示 标题样式的aaa  (vue1.0内容)
------------------------------
过滤器:->过滤模板的数据(vue2.x要自定义过滤器,没有了内置过滤器)
系统提供了一些过滤器
{{msg|filterA|filterB}}
{{'welcome'|uppercase}}
{{'welcome'|lowercase}}
{{'welcome'|capitalize}}
{{'welcome'|lowercase|capitalize}}


{{msg|filterA "参数"}}
------------------------------
交互:
$http  (ajax)

引入vue-resouce.js

get:
获取一个普通的文本数据
创建一个txt文本数据  a.txt{"welcome vue"}
php文件  
get.php{<?php
$a=$_GET["a"];
$b=$_GET["b"];
echo $a+$b;
?>}
post.php{<?php
$a=$_POST["a"];
$b=$_POST["b"];
echo $a-$b;
?>}
new Vue({
el:'',
data:{
},
methods:{
get:function(){
this.$http.get("a.txt",{//传入服务器的数据
this.$http.get("get.php",{//传入服务器的数据
a:1,
b:2
}).then({
function(){  //成功时的数据
alert(res.data); 要放在服务器环境 结果是3
},function(res){ //报错时
aler(res.status);
}
});
}
}
});

post:
new Vue({
el:'',
data:{
},
methods:{
get:function(){
this.$http.post("post.php",{//传入服务器的数据
a:1,
b:2
},{
emulateJSON:true  //模拟一个JSON数据 才能把post数据发送  不加这句会显示结果 0,
}).then({
function(){  //成功时的数据
alert(res.data); //结果是-1
},function(res){ //报错时
aler(res.status);
}
});
}
}
});

jsonp:
new Vue({
el:'',
data:{
},
methods:{
get:function(){
this.$http.jsonp("https://sug.so.360.cn/suggest",{//传入服务器的数据 360的
this.$http.jsonp("https://sp0.baidu.com/sa1Fazu8AA54nxFko9WTAnF6hhy/su",{//传入服务器的数据  baidu的  
百度的cbname是cb所以要加{jsonp:"cb"} callback的名字
word:"a"  //360的
}
wd:"a"  //baidu的
},{jsonp:"cb"}
).then({
function(){  //成功时的数据
alert(res.data); //结果是-1
},function(res){ //报错时
aler(res.status);
}
});
}
}
});
-----------------------------
默认get
this.$http({
   url:URL,
data:{//给后台发送的数据
acr:'add',
content:this.t1
}
}).then(function(res){
console.log(res.data);
});
---------------------------------
vue生存周期:
钩子函数

(1.0版本的)

created  -->实例已经创建的时候
created:function(){alert("已经创建完毕")}  会弹框
beforeCompile   -->编译之前
beforeCompile:function(){alert('编译之前)}
compiled  -->编译之后
compiled:function(){alert('编译之后')}
ready    -->插入到文档中了
ready:function(){alert('插入到文档中了')}


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

vue new完之后会生成一个实例对象
var vm=new Vue
document.οnclick=function(){
vm.$destroy();  //销毁对象
}点击页面之后就会出现销毁的两条提示
---------------------------------
请求慢的时候
用户会看到花括号标记
v-cloak 防止闪烁     一般用在比较大的段落
在标签添加 v-cloak 属性
在style里用属性选择器
[v-cloak]{display:none}
---------------------------------
<span>{{msg}}</span>         --> v-text
<span v-text='msg'></span>


<span>{{{msg}}}</span>    --> v-html
<span v-html='msg'></span>
---------------------------------
计算属性的使用
data:{a:1}
computed:{
b:function(){//业务逻辑代码 看似函数,其实不是 return this.a+1}//b的值就是return的值   //默认调用的是get
}
document.οnclick=function(){vm.a=101}

computed:{
b:{
get:function(){return this.a+2}
set:function(val){this.a=val;}
}
}
---------------------------------
vue的实例
var vm=new Vue({
el:"#box",
data:{a:1}
aa:11;//自定义的属性
show:function(){alert(1);}
});
console.log(vm.$el);   // <div></div>
console.log(vm.$data);  //object......a:1
console.log(vm.$data.a);  //1

vm.$mount("#box");//手动挂载

var vm=new Vue({data:{a:1}).$mount("#box");
vm.$options.aa    //调用自定义的属性
console.log(vm.$options.aa);
vm.$options.show(); //1

vm.$destroy();  //销毁对象

vm.$log();  //查看现在数据的一个状态


---------------------------------
会有重复数据
treak-by='索引(index/uid[数据库ID])'  提高循环的性能
---------------------------------
过滤器
debounce   延迟执行  配合事件
@keyup | debounce:2000


limitBy  限制数据
参数 取几个
limitBy 2
参数 取几个 从哪开始
limitBy 2 arr.length-2


filterBy "o"   只获取含有o的

orderBy  排序
orderBy 1  正序
orderBy -1  负序
2 倒序


自定义过滤器
vue.filter(naem,function(input){return input<10?"0"+input:input;})
时间转化器
data:{
a:Date.now()
}

<div>
{{a | data}}
</div>
vue.filter("date",function(input){var oDate=new Date(input*1000);return oDate.getFullYear()+"-"+(oDate.getMonth()+1)+"-"+oDate.getDate()+"-"+oDate.getHours()+"-"+oDate.getMinutes()+"-"+oDate.getSeconds();});

过滤HTML的标记
filterHtml

双向过滤器
数据->视图
model->view
vue.filter("filterHtml",function(input){return input.replace(/<[^<+]>/g)})
vue.filter("filterHtml",{read:function(input){return input.replace(/<[^<+]>/g)}//model->view,write:function(val){return val;//view->model}})

------------------------------------------
指令 
自定义指令
vue.directive('name',function(){this.el.style.background="red"});
指令的名称如果 v-xxx的时候报错  要把v- 去掉  v-red -> red
*必须以v-开头
name = red
<div v-red></div>
<div v-red="参数"></div>

vue.directive("drag",function(){
var oDiv=this.el;
oDiv.οnmοusedοwn=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;  //获取盒子的left , 页面中鼠标的X坐标 用X坐标 - left 
  var disY=ev.clientY-oDiV.offsetTop;   //获取盒子的top  , 页面中鼠标的Y坐标 用Y坐标 - top

document.οnmοusemοve=function(ev){
var l=ev.clientX-disX; // left - 现在鼠标位置 - 之前鼠标位置
var t=ev.clientY-disY;
oDiv.style.left=l+"px";
oDiv.style.top=t+"px";
};

document.οnmοuseup=function(ev){
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
}
})
------------------------------------------
自定义元素指令
vue.elementDirective("name",{bind:function(){}})
其实directive默认用了bind:function
------------------------------------------
自定义键盘信息
vue.directive("on").keyCode.ctrl=17;  

@keydown.ctrl="show()"
------------------------------------------
数据监听
vm.$watch(name,function(){}//回调函数);  //浅度
vm.$watch(name,fnCb,{deep:true});  //深度   监视json 数据的时候

var vm=new Vue(){
el:"#box",
data:{
a:111,
b:2
}
};
vm.$watch("a",function(){
alert("发生变化了");
this.b=this.a+100;
})
document.οnclick=function(){
vm.a=1;
};
------------------------------------------
vue组件
slot
vue-loder
vue-router








组件嵌套 防止样式混乱 在组件style里添加 scoped 属性






scrollBehavior:()=>({y:0})    切换页面时候滚动条归0






axios配置


axios.defaults.baseURL = 'http://localhost:8080/';    //根路径


axios.interceptors.request.use(function(config){
//配置发送请求的信息
store.dispatch('showloading');
return config;
},function(error){
return Promise.reject(error);
})
axios.interceptors.response.use(function(response){
//配置请求回来的信息
store.dispatch('hideloading');
return response;
},function(error){
return Promise.reject(error);
})

axios.defaults.headers.post['content-Type'] = 'application/x-www-form-urlencded';    //请求头部

router有哪几种导航钩子
1).全局---router.beforEach((to,from,next)=>{  })
router.afterEach(route=>{  })


2).在路由中配置---beforEnter:(to,from,next)=>{  }
beforEnter((route)=>{  })


3).路由组件上配置---beforRouteEnter((to,from,next)=>{  })
beforRouteUppdata((to,from,next)=>{  })
beforRouteLeave((to,from,next)=>{  })