目录
前言
上次分享了Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
一、插值
? ? ? ? 1.1、文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{{msg}}</h3>
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六'
}
}
})
</script>
</html>
?
?
? ? ? ? 1.2、html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六',
htmlstr: '<span style="color:red;">文本内容</span>'
}
}
})
</script>
</html>
?
?
? ? ? ? 1.3、属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
<p>vue 中的属性值</p>
<input type="text" v-bind:value="val" />
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六',
htmlstr: '<span style="color:red;">文本内容</span>',
val: 'value值'
}
}
})
</script>
</html>
??
? ? ? ? 1.4、class、style绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
<p>vue 中的属性值</p>
<input type="text" v-bind:value="val" />
<p>Class与style绑值</p>
<span :class="f200" v-bind:style="colorred">文本属性</span>
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六',
htmlstr: '<span style="color:red;">文本内容</span>',
val: 'value值',
colorred: 'color: red;',
f200: 'f200'
}
}
})
</script>
</html>
?
?
? ? ? ? 1.5、表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<h3>{{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
<p>vue 中的属性值</p>
<input type="text" v-bind:value="val" />
<p>Class与style绑值</p>
<span :class="f200" v-bind:style="colorred">文本属性</span>
<p>表达式</p>
{{str.substr((0,4))}}<br />
成绩：{{number-6}}<br />
{{ok ? '好' : '不好'}}<br />
<span :id="id+'id'">还好</span>
</div>
</body>
<script>
// 绑定边界
new Vue({
el: '#app',
data() {
return {
msg: '我真的服了你个老六',
htmlstr: '<span style="color:red;">文本内容</span>',
val: 'value值',
str: '那你是真的C',
number: 66,
ok: false,
id: 'book_',
colorred: 'color: red;',
f200: 'f200'
}
}
})
</script>
</html>
?
?
二、指令
核心指令
??(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一起绑定[多选]复选框和单选框 ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
请输入成绩：<input type="text" v-model="degree" />
<div v-if="degree<60">E</div>
<div v-else-if="degree<70">D</div>
<div v-else-if="degree<80">C</div>
<div v-else-if="degree<90">B</div>
<div v-else-if="degree<=100">A</div>
<!-- <div v-else="">输入成绩不合法</div> -->
<p> v-show </p>
<div v-show="ok">show</div>
<div v-if="ok">if</div>
<p>v-for</p>
<select>
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</select>
<div v-for="h in hobby">
<input :value="h.id" type=checkbox />{{h.name}}
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
degree: 78,
ok: false,
hobby: [{
id: "1",
name: "乒乓球"
},
{
id: "2",
name: "滑板"
},
{
id: "3",
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.0/vue.js"></script>
</head>
<body>
<div id="app">
{{msg|all}}<br/>
{{msg|single}}<br/>
{{msg|all|single}}<br/>
{{msg|param(4,5)}}<br/>
</div>
</body>
<script>
Vue.filter('all', function(value) {
return value.substring(1, 4);
});
new Vue({
el: '#app',
data() {
return {
msg: '那你是真的老六'
}
},
methods: {
handle() {
alert("触发事件");
}
},
filters: {
'single': function(val) {
return val.substring(2, 3);
},
'param': function(val, start, end) {
return val.substring(start, end);
}
}
})
</script>
</html>
?
?
四、计算属性、监听器
计算属性
???计算属性可用于快速计算视图（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.0/vue.js"></script>
</head>
<body>
<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>
<p>监听属性</p>
千米：<input v-model="km" />
米：<input v-model="m" />
</div>
</body>
<script>
// 绑定边界 ES6具体体现
new Vue({
el: '#app',
data() {
return {
maoziDanjia: 10,
yifuDanjia: 30,
kuziDanjia: 20,
maozi: 1,
yifu: 1,
kuzi: 1,
km: 2,
m: 2000
};
},
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;
}
},
watch: {
// v指的是m变量
m: function(v) {
this.km = parseInt(v) / 1000;
},
// v指的是km变量
km: function(v) {
this.m = parseInt(v) * 1000;
}
}
})
</script>
</html>
?
总结?
本文简单讲述了Vue的模板语法的使用。如有错误还望指正，感谢。