本文详细介绍了Vue的模板语法，包括插值语法、v-bind、v-if/v-else-if/v-else、v-show、v-for和v-on事件绑定。此外，还讨论了过滤器的使用以及计算属性和监听属性的概念，强调了计算属性在性能优化中的作用。
Vue模板语法
1.学习目标
1.插值语法
2.vue基本指令与事件
3.过滤器
4.计算属性和监听属性
2.插值语法
在前面我们学习了vue的第一个案例，现在大家都了解到vue是如何进行构建的，接下来我们会学习插值语法
首先，搭好一个通用模板如下，在后面的开发中我们都会在此模板基础上进行
<!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 }}
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'hello Vue'
}
})
</script>
</body>
</html>
其实这个模板已经完成了最基本的插值了，运行截图为：
2.2 接下来进行文本转义
在模板中添加如下代码
<div id="app">
<p v-html="msg">html文本转义</p>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'<span style="color:red;">hello Vue...</span>',
}
})
</script>
很显然，我们可以通过v-html，往一个标签中添加html代码，将想插入的html代码变成动态的
2.3 接下来 v-bind指令
在模板中替换为下面的代码
<div id="app">
<input type="" name="" id="" value="msg" /><br>
<input type="" name="" id="" v-bind:value="msg" /><br>
<input type="" name="" id="" :value="msg" /><br>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'Vue 666 hahaha',
}
})
</script>
运行如下界面，我们可以看到绑定的属性vlaue发生了变化，并且我们不难发现v-bind 和**:是等价的，也就是说v-bind可以简写为语法糖的形式😗*
2.4 Vue中的js支持
替换代码
<div id="app">
<p>Vue中对js的支持</p>
<p>{{ str }}</p>
<p>{{ str.substring(0,5) }}</p>
<p>{{ num+1 }}</p>
<p>{{ flag?"可以":"不行" }}</p>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
str:'Vue 666 hahaha',
num:10,
flag:false
}
})
</script>
我们可以很容易看到vue 的插值语法中不但可以使用js中的函数，也可以用来计算，或者是三元运算的判断都是可以的
3.基本指令
3.1 v-if,v-else-if,v-else 的使用，v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素，他们只能是兄弟元素，
v-else-if上一个兄弟元素必须是v-if，v-else上一个兄弟元素必须是v-if或者是v-else-if
替换代码
<div id="app">
<p v-if="gender === 1">性别：♂ 男</p>
<p v-else>性别：♀ 女</p>
<hr>
<p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
<p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
<p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
<p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>
3.2 v-show 来控制元素的显示与隐藏
在head标签中添加style样式
<style>
.box {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
</style>
body中
<div id="app">
<div v-show="flag" class="box">v-show盒子</div>
<div v-if="flag" class="box">v-if盒子</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
但是如果我们把flag的值改为false，就会出现一个盒子被样式隐藏，但是是存在的，另一个被移除，已经不存在了
重点：（面试题可能会问）
v-show底层原理：切换 css 的 display: none 来控制显示隐藏
v-if 底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
3.3 v-for
v-for类似于java代码中的循环遍历，也就是迭代器
使用方法
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li v-for="(item,index) in booksList">
<span>{{item.name}}</span>
<span>{{item.author}}</span>
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
}
})
</script>
3.4 v-on
用来绑定事件，还可以动态传参
<div id="app">
<button v-on:click="do_spa">点我</button>
<button @click="do_spa">点我</button>
<input v-model="emp" />
<button @[emp]="do_spa">随机功能的按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
emp:'click'
},
methods:{
do_spa(){
alert("叫了一个spa服务")
}
}
})
</script>
4.过滤器
4.1全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
4.2局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
{{ name | capitalize }}
示例
<!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>
<script src="date.js"></script>
</head>
<body>
<div id="app">
<p>基本过滤器</p>
{{ str }}<br>
<p>调用过滤器A</p>
{{ str|filterA }}<br>
<p>过滤器串联</p>
{{ str|filterA|filterB }}<br>
<p>过滤器传参</p>
{{ str|filterC(0,8) }}<br>
{{ str|filterC(0,4) }}<br>
<p>时间格式化外部引入js</p>
{{curtime}}<br>
{{curtime|format}}
</div>
<script>
Vue.filter('format',function(v){
return fmtDate(v,'yyyy-MM-dd hh:mm:ss')
})
const vm = new Vue({
el:'#app',
filters:{
filterA(v){
return v.substring(0,5);
},
filterB(v){
return v.substring(1,2)
},
filterC(v,start,end){
return v.substring(start,end)
}
},
data:{
str:'hello Vue.js',
curtime: new Date()
}
})
</script>
</body>
</html>
5.计算属性和监听属性
watch computed
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}
<!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>
m:<input v-model="m" />
km:<input v-model="km" />
<p>计算属性</p>
<table>
<tr>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td><input v-model="danjia"/></td>
<td><input v-model="num"/></td>
<td>{{ total }}</td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
m:1000,
km:1,
danjia:50,
num:10
},
watch:{
m:function(value){
this.km = parseInt(value)/1000;
},
km:function(value){
this.m=parseInt(value)*1000;
}
},
computed:{
total:function(){
return this.danjia*this.num;
}
}
})
</script>
</body>
</html>
小结：计算属性和监听属性的区别
自己的理解
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：
刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
ps:那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
