P3：Vue的动态绑定
.red{
color:red;
}
.hd{
color:green;
}
</style>
<div id="hdcms">
<h1 :class="'hd'" :id="'houdunwang'">hdphp.com</h1> // v-bind:class="'hd'"
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
hd: 'red'
}
});
</script>
P4 双向绑定
<body>
<div id="hdcms">
<h1>{{hd}}</h1>
<h3 v-once>{{hd}}</h3>
<input type="text" v-model="hd">
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
hd: '后盾人'
}
});
</script>
</body>
P5 v-text v-html
<body>
<div id="hdcms">
{{hd}}
<h1 v-text="hd"></h1>
<h3 v-html="hd"></h3>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
hd: '<h1 style="color:red">houdunren.com</h1>'
}
});
</script>
</body>
P6
<body>
<style>
.hd1{color:red;}
.hd2{color:green;}
</style>
<div id="hdcms">
<h1 v-once="">{{n}}</h1>
{{n+3}}
<h1 :class="'hd'+n">你好后盾人</h1>
<input type="text" v-model="n">
<br>
<input type="radio" v-model="n" value="1"> 红
<input type="radio" v-model="n" value="2"> 绿
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
n:1
}
});
</script>
</body>
P7 computed
<div id="hdcms">
<input type="text" v-model="n1"> +
<input type="text" v-model="n2"> =
<input type="text" v-model="sum">
</div>
<script>
var app = new Vue({
el: '#hdcms',
computed: {
sum() {
return this.n1*1+this.n2*1;
} //ES6语法 或写成 sum：fuction(){}
},
data: {
n1: 0,
n2: 0
}
});
</script>
</body>
P10 watch和lodash库
npm install lodash（减少异步请求的次数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
</head>
<body>
<div id="hdcms">
<input type="text" v-model="word">
<h1>
结果: {{result}}
</h1>
</div>
<script>
var app = new Vue({
el: '#hdcms',
watch: {
word: _.debounce(
function (newV, oldV) {
console.log(newV);
axios.get('9.php?word=' + newV).then(function (response) {
app.result = response.data;
})
}, 500 //每次请求相隔时间
)
},
data: {
word: '',
result: ''
}
});
</script>
</body>
</html>
P11 用对象和数组控制class
<body>
<style>
.green{color:green;}
.color{color:red;}
.font{font-size:200px;}
</style>
<div id="hdcms">
<h1 class="green" :class="hd">后盾人</h1>
<hr>
<h2 :class="[success,font]">houdunren.com</h2>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
hd:{color:true,font:true},
success:'color',
font:'font'
}
});
</script>
</body>
P12 Class中的表达式
<span :class="v.status?'success':'error'">{{v.title}}</span>
P13 vue控制style样式属性
<body>
<div id="hdcms">
<h1 :style="{color:'red',fontSize:size+'px'}">后盾人</h1>
<h2 :style="style">后盾人</h2> //对象
<h3 :style="[hdcms]">houdunren.com</h3> //array
<input type="number" v-model="size"> //input双向绑定控制字体
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
red: 'green',
size: 16,
style: {
color: 'blue'
},
hdcms:{
color:'yellow',
backgroundColor:'blue'
}
}
});
</script>
</body>
P14 v-if
<body>
<div id="hdcms">
<input type="text" v-model="age">
<span v-if="age<20">小孩</span>
<span v-else-if="age<30">青年</span>
<span v-else-if="age<50">壮年</span>
<span v-else>老年</span>
<hr>
<input type="checkbox" v-model="copyright"> 接收协议<br/>
<span v-if="copyright==false">请先接受协议</span>
<button v-else>注册</button>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
copyright:false,
age:0
}
});
</script>
</body>
P15 使用key唯一令牌解决表单值混乱问题
<body>
<div id="hdcms">
<template v-if="regType=='mail'">
邮箱: <input type="text" name="username" key="mail-register">
</template>
<template v-else>
手机: <input type="text" name="username" key="phone-register">
</template>
<br>
<input type="radio" value="mail" v-model="regType"> 邮箱注册
<input type="radio" value="phone" v-model="regType"> 手机注册
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
regType: 'mail'
}
});
</script>
</body>
P16 v-show
v-if删除dom节点，v-show改为display：none。
v-show性能较好
<body>
<div id="hdcms">
<h1 v-if="status">后盾人</h1>
<h2 v-show="status">houdunren.com</h2>
<input type="checkbox" v-model="status">
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
status: true
}
});
</script>
</body>
P17 v-for
<body>
<div id="hdcms">
<table border="1">
<tr>
<th>序号</th>
<th>编号</th>
<th>标题</th>
<th>老师</th>
</tr>
<tbody>
<tr v-for="(field,key) of news">
<td>{{key+1}}</td>
<td>{{field.id}}</td>
<td>{{field.title}}</td>
<td>{{name}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
name:'向军老师',
news:[
{id:22,title:'houdunren.com'},
{id:77,title:'后盾人'}
]
}
});
</script>
</body>
P18 v-for操作对象与数值
<body>
<div id="hdcms">
<li v-for="(item,key,index) in user">
{{index}} - {{key}} - {{item}}
</li>
<table border="1" width="100%">
<tr v-for="v in 20">
<td>{{v}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
user: {
name: '向军',
age: '22',
sex: 'boy'
}
}
});
</script>
</body>
P19 computed与v-for结合
<body>
<div id="hdcms">
<li v-for="v in stus">
{{v.name}} - {{v.sex}}
</li>
{{type}}
<input type="radio" v-model="type" value="girl"> 女孩
<input type="radio" v-model="type" value="boy"> 男孩
</div>
<script>
var app = new Vue({
el: '#hdcms',
computed:{
stus(){
if(this.type=='all'){
return this.user;
}else{
return this.user.filter((v)=>{
return v.sex ==this.type;
}); //或者写成 var Type=this.type; function(v){return v.sex=Type;}
}
}
},
data: {
type:'all',
user:[
{name:'小明',sex:'boy'},
{name:'小强',sex:'boy'},
{name:'小丽',sex:'girl'},
{name:'小梅',sex:'girl'}
]
}
});
</script>
</body>
