VUE的學習彙總

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:{ }