目录
4、表达式(Vue提供了完全的JavaScript表达式支持)
?5、class绑定(使用方式：v-bind:class="expression"? ? expression的类型：字符串、数组、对象)
6、style绑定(v-bind:style="expression"? expression的类型：字符串、数组、对象)
一、插值
1、文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>文本</p>
{{msg}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
msg:'666'
}
}
})
</script>
</html>
?2、html(使用v-html指令用于输出html代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>html页面转义</p>
<div v-html="htmlstr"></div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
htmlstr:'<span style="color:red;">文本内容</span>'
}
}
})
</script>
</html>
?3、属性(HTML属性中的值应使用v-bind指令)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>v-bind 属性绑定</p>
<input v-bind:value="valuestr" />
<input :value="valuestr" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
valuestr:'vue值'
}
}
})
</script>
</html>
?注：不止value属性任意属性都适用
4、表达式(Vue提供了完全的JavaScript表达式支持)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>vue中可以对变量进行二次处理</p>
{{str.substring(0,3)}}<br>
{{num+4}}<br>
{{ok?'1':'2'}}<br>
<span :id="idstr+'1'">信息</span>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
str:'azhxsn',
num:6,
ok:false,
idstr:'book_'
}
}
})
</script>
</html>
?5、class绑定(使用方式：v-bind:class="expression"? ? expression的类型：字符串、数组、对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.a{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<p>class绑定</p>
<span :class="classstr">文本</span>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
classstr:'a'
}
}
})
</script>
</html>
6、style绑定(v-bind:style="expression"? expression的类型：字符串、数组、对象)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>style绑定</p>
<span :style="stylestr">文本</span>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
stylestr:'color:red'
}
}
})
</script>
</html>
二、指令?
1、指的是带有“v-”前缀的特殊属性
2、核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
3、v-if|v-else|v-else-if
?v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>v-if</p>
<!-- 输入分数:60以下为不及格，60-70为合格，70-80为良，80-90为优秀，90+为优+ -->
请输入分数:<input v-model="score" />
对应的结果:
<span v-if="score<60">不及格</span>
<span v-else-if="score<70">合格</span>
<span v-else-if="score<80">良</span>
<span v-else-if="score<90">优秀</span>
<span v-else-if="score<=100">优+</span>
<span v-else="">输入不合法</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
score:0
}
}
})
</script>
</html>
?
?
?
?
?
?4、v-show
?v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>v-show</p>
请输入结果:<input v-model="showflag" />
<span v-show="showflag">展示与否</span>
<span v-if="showflag">展示与否</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
showflag:false
}
}
})
</script>
</html>
注：v-show能够形成html串，v-if不行，v-show隐藏了标签，v-if直接就没有了
?5、v-for
v-for：类似JS的遍历，
?遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
?遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>v-for</p>
<select>
<option v-for="l in likes" :value="l.id">{{l.name}}</option>
</select>
<br>
<div v-for="l in likes">
<input type="checkbox" :value="l.id"/>{{l.name}}
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
likes:[
{id:1,name:'打游戏'},
{id:2,name:'打篮球'},
{id:3,name:'弹吉他'},
{id:4,name:'踢足球'}
]
}
}
})
</script>
</html>
?三、过滤器
全局过滤器
Vue.filter('filterName', function (value) {
?// value 表示要过滤的内容
});
局部过滤器
new Vue({
?filters:{'filterName':function(value){}}
});
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
<!-- 在两个大括号中 -->
{{ name | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联 ????
{{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
注4：js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
{{msg|strSplit}}
</div>
</body>
<script type="text/javascript">
Vue.filter('strSplit',function(value){
console.log(value);
return value;
})
new Vue({
el:"#app",
data(){
return {
msg:'hello 666'
}
}
})
</script>
</html>
?
过滤器串联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
{{msg|strSplit|strSplit2}}
</div>
</body>
<script type="text/javascript">
Vue.filter('strSplit',function(value){
console.log(value);
return value.substring(0,5);
})
Vue.filter('strSplit2',function(value){
console.log(value);
return value.substring(0,2);
})
new Vue({
el:"#app",
data(){
return {
msg:'hello 666'
}
}
})
</script>
</html>
?过滤器传参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
{{msg|strSplit3(4,6)}}
</div>
</body>
<script type="text/javascript">
Vue.filter('strSplit3',function(value,a,b){
console.log(value);
return value.substring(a,b);
})
new Vue({
el:"#app",
data(){
return {
msg:'hello 666'
}
}
})
</script>
</html>
?四、计算属性&监听属性
1、计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>计算属性</p>
请输入第一个数:<input v-model="x" /><br >
请输入第二个数:<input v-model="y" /><br >
结果为:{{addFlag}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
x:0,
y:0
}
},computed:{
//计算属性
addFlag:function(){
return parseInt(this.x)+parseInt(this.y);
}
}
})
</script>
</html>
?2、监听属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>监听属性</p>
请输入千米:<input v-model="km" /><br >
请输入米:<input v-model="m" /><br >
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
km:0,
m:0
}
},watch:{
km:function(v){
//:之前对应的是被监听的属性，v指定是被监听的值
//当v对应的值发生变化的是，会执行这个方法
this.m = parseInt(v)*1000;
},
m:function(v){
this.ks = parseInt(v)/1000;
}
}
})
</script>
</html>
?五、购物车案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>购物车</p>
<table>
<tr>
<td>物品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>帽子</td>
<td>
{{mzdj}}
</td>
<td>
<input v-model="mzsl" />
</td>
<td>
{{mzxj}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>
{{yfdj}}
</td>
<td>
<input v-model="yfsl" />
</td>
<td>
{{yfxj}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>
{{kzdj}}
</td>
<td>
<input v-model="kzsl" />
</td>
<td>
{{kzxj}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{{zj}}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return {
mzdj:10,
yfdj:100,
kzdj:60,
mzsl:1,
yfsl:1,
kzsl:1
}
},computed:{
//计算属性
// addFlag:function(){
// return parseInt(this.x)+parseInt(this.y);
// },
mzxj:function(){
return parseInt(this.mzdj)*parseInt(this.mzsl);
},
yfxj:function(){
return parseInt(this.yfdj)*parseInt(this.yfsl);
},
kzxj:function(){
return parseInt(this.kzdj)*parseInt(this.kzsl);
},
zj:function(){
return parseInt(this.mzxj)+parseInt(this.yfxj)+parseInt(this.kzxj);
}
}
})
</script>
</html>
?