VUE的学习汇总
VUE 的特点：
不用操作DOM
单页面应用WEB（asp)
数据驱动视图，只关注数据；
MVVM双向数据绑定；
组件化，复用代码；
VUE的安装：
1.直接通过路径引入，地址：https://vuejs.org/js/vue.min.js;
2.直接下载在本地引入
3.采用npm安装的方式，命名：npm install vue
vue.js不支持IE8及其以下版本；
VUE的使用：
once ,prevent,stop
<div id="app">
{{string}}
<button v-on:click="clicme">once</button>
<button @click="clicme">once</button>
<button @click.once="clicmeonce">once</button> //只触发一次
<a href="http://www.baidu.com" @click.prevent="stopjum">//阻止默认事件触发
<div @click="alert(1)">
<div @click.stop="alert(2)"></div> //阻止冒泡事件，只重复2，不触发1
</div>
<input type="text" v-bind:value="string" @input="inputChange($event)">
<li v-for="(item,index) in objarr">{{item.id}}--{{item.name}}--{{index}}</li>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
string:'',
count:100,
objarr:[
{id:1,name:"zhangsan"},
{id:2,name:"lisi"}
]
},
methods:{
clickme:function(param){
this.string=param;
},
clicmeonce(){
alert("click once");
},
stopjum(){
alert(1);
},
inputChange(e){
this.string = e.target.value;
}
}
});
</script>
v-bind,v-for,v-on,v-cloak:
<style>
.class1{
color:blue;
}
.class2{
color:red;
}
</style>
<div id="app">
<p v-bind:id="idName"></p>
<p :id="idName2"></p>
<p :class="showstyle? 'class1':'class2'></p>
<p :class="{'class1':'showstyle'></p>
<p :style="{color:redval}">pppp</p>
<input type="text" v-model="range">
<input type="range" v-model="range">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
idName:'',
idName2:''
showstyle:false,
redval:"red",
range:100,
timeouter:null
},
methods:{
deleteUser(index){
if(confirm(“是否确认删除？”)){
this.arlist.splice(index,1);
}
},
//输入文本搜素
search(e){
this.arrlist.forEach(m=>m.isShow=true);
var searchtext=e.target.value.toUpperCase();
var filterList=this.arrlist.filter(m=> !m.name.toUpperCase().includes(searchtext);
filterList.forEach(element=>{
element.isShow =false;
});
}
//输入文本500毫秒后自动搜素
search(e){
clearTimout(this.timeouter);
this.timeouter = setTimeout(() =>
{
this.arrlist.forEach(m=>m.isShow=true);
var searchtext=e.target.value.toUpperCase();
var filterList=this.arrlist.filter(m=> !m.name.toUpperCase().includes(searchtext);
filterList.forEach(element=>{
element.isShow =false;
});
},500)
}
});
</script>
v-for,v-if 不能在同一个元素里同时使用，可以使用template 错开使用:
<template v-for="(item,index) in list">
<tr v-if="item.isShow">
<td><lable><input type="checkbox"></lable></td> //全选
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</template>
<tr v-if="list.lenght==0">
<td colspan="6">未获取到数据</td>
</tr>
checkAll(){
this.arrlist.forEach(m=>m.isChecked=this.allChecked);
}
changeCheck(){
var listLength=this.arrlist.lenght;
var checkedLeng=this.arrlist.filter(m=>m.isChecked).length;
if(checkedLeng == listLength){
this.allChecked =true;
}else{
this.allChecked =false;
}
//方法2
if(this.arrlist.some(m=>!m.isChecked))
this.allChecked =false;
else
this.allChecked =true;
//方法三
if(this.list.every(m=>m.isChecked))
this.allChecked =true;
else
this.allChecked =false;
}
filter 过滤器：
在data数据格式，货币，时间，大小写格式
<div id="app">
{{money|price|addText("$")}}
<br>
{{msg|upper}}
{{msg|upper("aaa")}}
{{item.date|timeHelper("yyyy年MM月dd日 HH时mm分ss秒}}
</div>
<script>
Vue.filter("price",function(value){
return value.toFixed(2);//保留2位小数
}
Vue.filter("addText",function(value,text){
return text+value//金额前加人民币符合
}
//日期格式转换
Vue.filter("timeHelper",function(value,format){
// var date=new Date(value);
var res = format.replace("yyyy",date.getFullYear())
.replace("MM",date.getMonth()+1 < 10 ? "0"+(date.getMonth()+1)：date.getMonth()+1) //从0开始，输出04 两位数月
.replace("dd",date.getDate() < 10 ? "0" + date.getDate() ? date.getDate())
.replace("HH",date.getHours() < 10 ? "0" + date.getHours() ? date.getHours())
.replace("mm",date.getMinutes() < 10 ? "0" + date.getMinutes() ? date.getMinutes())
.replace("ss",date.getSeconds() < 10 ? "0" + date.getSeconds() ? date.getSeconds());
return res;
}
var vm=new Vue(){
el:"app",
data:{
money:100,
msg:"hello"
},
filters:{
upper:function(value,text){
return value.toUpperCase()+text;
}
}
}
</script>
日期格式转换timeTranslate.js：
function timeHelper(date,format){
if(date instanceof Date == false)
throw new Error('type error,the type is not Date');
this._date =new Date(date);
}
function toString(date,format)
{
var res = format.replace("yyyy",date.getFullYear())
.replace("MM",date.getMonth()+1 < 10 ? "0"+(date.getMonth()+1)：date.getMonth()+1) //从0开始，输出04 两位数月
.replace("dd",date.getDate() < 10 ? "0" + date.getDate() ? date.getDate())
.replace("HH",date.getHours() < 10 ? "0" + date.getHours() ? date.getHours())
.replace("mm",date.getMinutes() < 10 ? "0" + date.getMinutes() ? date.getMinutes())
.replace("ss",date.getSeconds() < 10 ? "0" + date.getSeconds() ? date.getSeconds());
return res;
}
TimeHelper.prototype.toString = toString;
全局属性：
Vue.prototype.$http =axios;
this.$http
mounted() //页面加载后触发
create() //页面加载前触发
this.$forceUpdate();刷新页面数据；
计算属性：
//对data中的数据进行处理
computed:{
}