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);
})
# 全局安装 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)=>{ })