條件渲染指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- flag=false,不渲染 -->
<p v-if="flag">this is some text</p>
<!-- flag=false,display:none -->
<p v-show="flag">this is some text</p>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
flag:true
}
});
</script>
</body>
</html>
循環(huán)指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- flag=false,不渲染 -->
<p v-if="flag">this is some text</p>
<!-- flag=false,display:none -->
<p v-show="flag">this is some text</p>
<ul>
<li v-for="(item,index) in items">
{{index}} | {{item}}
</li>
</ul>
<ul>
<li v-for="item in items2">
{{item.message}}
</li>
</ul>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
flag:true,
items:['apple','tomato','banana','watermelon'],
items2:[{message:'FOO'},{message:'BAR'}]
}
});
</script>
</body>
</html>
計算屬性 與data平級（computed）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>{{reverseMessage}}</p>
<p>商品的數(shù)量{{package.count}}</p>
<p>商品的單價{{package.price}}</p>
<p>商品的總價{{totalprice}}</p>
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
message:"abcd",
package:{
count:5,
price:5
}
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
},
totalprice:function(){
return this.package.count*this.package.price;
}
}
});
</script>
</body>
</html>
偵聽器watch
表單綁定
v-model.trim能取出首尾空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="message"/> {{message}} <br><!-- 失去焦點才同步 -->
<input type="text" v-model.trim="str"/>{{str}}<br>
男 <input type="radio" v-model="sex" value="男" />
女 <input type="radio" v-model="sex" value="女" />{{sex}}<br>
愛好：
<input type="checkbox" v-model="hobby" value="編程" />
<input type="checkbox" v-model="hobby" value="運動" />
<input type="checkbox" v-model="hobby" value="唱歌" />
<input type="checkbox" v-model="hobby" value="跳舞" />
{{hobby}}
<input type="number" v-model.number="num" />{{stype}}
</div>
<div id="app2">
<input type="text" v-model.number="num1" />
<select v-model="op">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="num2" />
{{sum}}
</div>
<script type="text/javascript">
let vm2=new Vue({
el:"#app2",
data:{
num1:0,
num2:0,
op:"-"
},
computed:{
sum:function(){
//eval把參數(shù)當表達式計算
return eval(this.num1+this.op+this.num2);
}
}
});
let vm=new Vue({
el:"#app",
data:{
message:'',
num:2,
str:'',
sex:"男",
hobby:['編程']
},
computed:{
stype:function(){
return typeof(this.num);
}
}
});
</script>
</body>
</html>
全局過濾器 局部過濾器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message | capitalize | reverse}}<br/>
{{message | toadd}}
<ul>
<li v-for="item in sdate">
{{item.stime | formateDate}}
</li>
</ul>
</div>
<div id="app2">
{{message | reverse}}
</div>
<script type="text/javascript">
//注冊全局過濾器(所有vue實例都可以用)
Vue.filter("reverse",function(value){
return value.split('').reverse().join('');
})
Vue.filter("capitalize",function(value){
return value.toUpperCase();
})
let vm=new Vue({
el:"#app",
data:{
message:"helloworld",
sdate:[{stime:1000},{stime:2000},{stime:3000}]
},
filters:{
//局部過濾器
toadd:function(value){
return "vue-"+value;
},
formateDate:function(value){
var d=new Date(value);
var year=d.getFullYear();
var month=d.getMonth()+1;
var date=d.getDate();
var hour=d.getHours();
var minutes=d.getMinutes();
var seconds=d.getSeconds();
// var str=year+"-"+month+"-"+date+" "+hour+":"+minutes+":"+seconds;
var str=`${year}-${month}-${date} ${hour}:${minutes}:${seconds}`;
return str;
}
}
});
let vm2=new Vue({
el:"#app2",
data:{
message:"test"
}
});
</script>
</body>
</html>
自定義指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-red>this is some text</p>
</div>
<script type="text/javascript">
//自定義指令
Vue.directive('red',function(el){
el.style.backgroundColor='red';
})
let vm=new Vue({
el:"#app",
data:{
}
});
</script>
</body>
</html>
傳參數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-color="'blue'">this is some text</p>
</div>
<script type="text/javascript">
//自定義指令
Vue.directive('color',function(el,c){
el.style.backgroundColor=c.value;
})
let vm=new Vue({
el:"#app",
data:{
}
});
</script>
</body>
</html>
定義拖拽指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
#div1{
width:100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
}
#div2{
width:100px;
height: 100px;
background-color: blue;
position: absolute;
right: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="app">
<!-- <p v-color="'blue'">this is some text</p> -->
<div v-drag id="div1"></div>
<div v-drag id="div2"></div>
</div>
<script type="text/javascript">
//自定義指令
Vue.directive('color',function(el,c){
el.style.backgroundColor=c.value;
})
//定義拖拽指令
Vue.directive('drag',function(el){
var offsetX;
var offsetY;
el.onmousedown=function(ev){
offsetX=ev.offsetX;
offsetY=ev.offsetY;
document.onmousemove=function(ev2){
var left=ev2.clientX-offsetX;
var top=ev2.clientY-offsetY;
el.style.left=left+"px";
el.style.top=top+"px";
};
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
}
}
})
let vm=new Vue({
el:"#app",
data:{
}
});
</script>
</body>
</html>
