昨天与大家分享了Vue入门，今天继续与大家分享关于部分Vue模板语法
目录
一、Vue插值
Vue插值中主要包括以下几个方法的应用
???1.1.1 文本
??????????{{msg}}
????1.1.2 html
??????????使用v-html指令用于输出html代码 ?????????
????1.1.3 属性
??????????HTML属性中的值应使用v-bind指令
????1.1.4 表达式
??????????Vue提供了完全的JavaScript表达式支持
??????????{{str.substr(0,6).toUpperCase()}}
??????????{{ number + 1 }}
??????????{{ ok ? 'YES' : 'NO' }}
??????????<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
1.1.5 class绑定
??使用方式：v-bind:class="expression"
??expression的类型：字符串、数组、对象
??
1.1.6 style绑定
??v-bind:style="expression"
??expression的类型：字符串、数组、对象
html代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
<style>
.a{
color :yellow;
}
</style>
</head>
<body>
<div id="app">
<p>文本</p>
{{msg}}
<p>htmlstr串</p>
<div v-html="htmlstr"></div>
<p>v-bind 属性绑定</p>
<input v-bind:value="valuestr"/>
<input :value="valuestr">
<p>表达式</p>
{{str.substring(0,4).toUpperCase()}}
小朱:{{number+1}}
{{ok?'1':'0'}}
<span :id="idstr+'id'"></span>
<p>class绑定</p>
<span class="classStr">文本内容</span>
<p>style绑定</p>
<span style="classStr">文本内容</span>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:"hello vue!!!",
htmlstr:'<h3 style="color:red;">小猪</h3>',
valuestr:'小猪小猪胖乎乎',
str:'吃完睡觉呼噜噜',
number:66,
ok:false,
idstr:'list_',
classStr:'a',
}
}
})
</script>
</body>
</html>运行效果：
?
二、Vue指令?
??指的是带有“v-”前缀的特殊属性
核心指令
??(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
??v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
??v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
??v-for：类似JS的遍历，
?遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
?遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
??v-bind
??v-on
??v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值 ??
v-for/v-model一起绑定[多选]复选框和单选框 ?
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>v-if的使用</p>
请输入分数:<input v-model="score" />
<span v-if="score<60">不及格</span>
<div v-else-if="score<70">合格</div>
<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>
<p>v-show</p>
请输入结果：<input v-model="showflag">
<span v-show="showflag">show：展示与否</span>
<span v-if="showflag">if：展示与否</span>
<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="checkboox" :value="l.id" /> {{l.name}}
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 20,
showflag: false,
likes[{
id = 1,
name = "跳舞"
}, {
id = 2,
name = "sing"
}, {
id = 3,
name = "baskestball"
}, {
id = 4,
name = "football"
}, ]
}
}
})
</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) }}
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|all}},{{msg|all1}},{{msg|all|all1}},{{msg|all2(4,5)}}
</div>
<script type="text/javascript">
Vue.filter('all', function(value) {
return value.substring(1, 4);
});
new Vue({
el: '#app',
data() {
return {
msg:'小朱天天开心发大财'
}
}
filters:{
'all1':function(val){
return val.substring(2,3);
},
'all2':function(val,start,end){
return val.substring(start,end);
}
}
})
</script>
</body>
</html>?四、计算器&&监听器
1、运用计算器原理实现购物车
?计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
???computed:{}
<div id="app">
<p>计算属性</p>
<table border="1" style="width: 600px;height: 300px;">
<tr>
<td>物品</td>
<td>单价</td>
<td>
数量
</td>
<td>
小计
</td>
</tr>
<tr>
<td>帽子</td>
<td>{{maoziDanjia}}</td>
<td>
<input v-model="maozi" />
</td>
<td>
{{maoziTotal}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>{{yifuDanjia}}</td>
<td>
<input v-model="yifu" />
</td>
<td>
{{yifuTotal}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>{{kuziDanjia}}</td>
<td>
<input v-model="kuzi" />
</td>
<td>
{{kuziTotal}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{{total}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
maoziDanjia:10,
yifuDanjia:30,
kuziDanjia:20,
maozi:1,
yifu:1,
kuzi:1,
};
},
computed:{
maoziTotal(){
return this.maoziDanjia*this.maozi;
},
yifuTotal(){
return this.yifuDanjia*this.yifu;
},
kuziTotal(){
return this.kuziDanjia*this.kuzi;
},
total(){
return this.maoziTotal+this.yifuTotal+this.kuziTotal;
}
},
）}?效果演示：
?2、运用监听器实现米和千米单位换算
???监听属性 watch，我们可以通过 watch 来响应数据的变化
???watch:{}
<div id="app">
<p>监听属性</p>
千米：<input v-model="km" />
米：<input v-model="m" />
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
maoziDanjia:10,
km:2,
m:2000
};
},
watch:{
// v指的是m变量
m: function(v){
this.km = parseInt(v)/1000;
},
// v指的是km变量
km: function(v){
this.m = parseInt(v)*1000;
}
}
})运行效果：
?