这篇博客详细介绍了Vue的模板语法，包括文本插值、HTML插值、属性绑定、表达式，以及核心指令如v-if、v-else、v-for、v-on的使用。还涉及了动态参数、过滤器、计算属性和监听属性的用法，提供了丰富的代码示例来帮助理解。
一、插值
1 、文本 {{msg}}
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>文本</p>//红色html 使用v-html指令用于输出html代码，黑色 文本 {{msg}}
<h3>{{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
</div>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
msg:'vue Hello!!!',
htmlstr:'<h3 style="color:red;">这是一个html片段</h3>'
};
}
})
</script>
</body>
</html>
3 、属性 HTML属性中的值应使用v-bind指令
跳转百度界面案例
所有原生态的属性，要利用vue的变量，都需要在对应的属性钱加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>文本</p>
<h3>{{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
<p>Vue中的属性</p>
<!-- 所有原生态的属性，要利用vue的变量，都需要在对应的属性钱加v-bind -->
<a v-bind:href="hrefstr">百度</a>//缩写方式
<input :value="valuestr" />
</div>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
msg:'vue Hello!!!',
htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
hrefstr:'http://www.baidu.com',
valuestr:'2223'
};
}
})
</script>
</body>
</html>
4 、表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
定义边界
<p>表达式</p>
{{str.substr(0,4).toUpperCase()}}
张三:{{number+1}}
{{ok ? 'yes' : no''}}绑定边界
valuestr:'2223',
str:'Java是最牛的语言',
number:59,
ok:true
结果
二、指令
指的是带有“v-”前缀的特殊属性
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一起绑定[多选]复选框和单选框
1、核心指令
1.1、v-if|v-else|v-else-if
实例：分数判断（大于90为优秀，大于60为良好，小于60为还需努力）
<!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">
<h3>指令v-if|v-else|v-else-if</h3>
分数:<input v-model="score" />
<div v-if="score>80">优秀</div>
<div v-else-if="score>60">良好</div>
<div v-else="score<60">还需努力！！！</div>
</div>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
score:78,
};
}
})
</script>
</body>
</html>
结果
1.2、v-show
<div v-show="score>90">v-show优秀学员</div>
v-show与v-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">
<h3>指令v-if|v-else|v-else-if</h3>
分数:<input v-model="score" />
<div v-if="score>80">优秀</div>
<div v-else-if="score>60">良好</div>
<div v-else="score<60">还需努力！！！</div>
<p>v-show</p>
<div v-show="score>90">v-show优秀学员</div>
<div v-if="score>90">v-if优秀学员</div>
</div>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
score:78,
};
}
})
</script>
</body>
</html>
当v-show与v-if符合判断条件则都出现，若不符合判断条件，v-show被display隐藏，而v-if消失
1.3、 v-for
<select v-model="hobbySelected">
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</select>
<input v-model="hobbySelected" /><!-- 绑定边界 -->
hobby:[
{id:"1",name:"洗头"},
{id:"2",name:"按摩"},
{id:"3",name:"洗浴"}
],
hobbySelected:3
};
结果
checkbox
<div v-for="h in hobby">
<input :value="h.id" type="checkbox" />{{h.name}}
</div>
1.4、v-on
<p>----------v-on-----------</p>
<button v-on:click="handle">触发事件</button>
<button @click="handle">缩写 触发事件</button>methods:{
handle(){
alert("触发事件");
}
结果
2、动态参数
<!-- 定义边界 -->
<div id="app">
<p>---------------动态参数-------------</p>
<button v-on:[evname]="handle">动态参数</button>
</div><!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
/* evname:'dbclick',点击两次触发 */
evname:'click',
三、过滤器
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({ filters:{
'filterName':function(value){
}} });
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
<!-- 在两个大括号中 --> {{ name | capitalize }}
<!-- 在 v-bind 指令中 -->
注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联 {{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数： {{ message | filterA('arg1', arg2) }}
注4：js定义一个类 function Stu(){}; Stu.prototype.add(a,b){};
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|all}}
</div>
<script type="text/javascript">
/* 全局过滤器 */
Vue.filter('all', function (value) {
// value 表示要过滤的内容
return value.substring(0,2);
});
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
msg:"Java最牛"
};
}
})
</script>
</body>
</html>
2、局部过滤器
//绑定边界
filters:{
'single':function(val){
return val.substring(2,3);
}
}<!-- 定义边界 -->
<div id="app">
<p>---------------过滤器-------------</p>
{{msg|all}},{{msg|single}},{{msg|all|single}}
</div>
结果
3、带参数
'param':function(val,star,end){
return val.substring(star,end);
}{{msg|param(4,5)}}
四、计算属性和监听属性
1、计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新 computed:{}
实例：简单的价格计算
<!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 border="1" style="width: 600px;height: 300px;">
<tr>
<td>帽子</td>
<td>55</td>
<td>
<input v-model="maozi" />
</td>
<td>
{{maoziTotal}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>450</td>
<td>
<input v-model="yifu" />
</td>
<td>
{{yifuTotal}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>99</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 {
maozi:1,
yifu:1,
kuzi:1
};
},
methods:{
handle(){
alert("触发事件");
}
},
computed:{
maoziTotal(){
return this.maozi*55;
},
yifuTotal(){
return this.yifu*450;
},
kuziTotal(){
return this.kuzi*99;
},
total(){
return this.yifuTotal+this.kuziTotal+this.maoziTotal;
}
}
})
</script>
</body>
</html>
2、监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化 watch:{}
<p>---------监听属性----------------</p>
千米：<input v-model="km" />
米：<input c-model="m" />
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
maozi:1,
yifu:1,
kuzi:1,
km:2,
m:2000,
};
},watch:{
km:function(v){
this.m=parseInt(v)*1000
},
m:function(v){
this.km=parseInt(v)/1000
}
}
计算属性和监听属性的区别
自己的理解 computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化， 举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：
刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解： watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象 那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
扫一扫
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
