哈喽各位本次分享的是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的类型：字符串、数组、对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title></title>
<style>
.a{
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<p>html页面转义</p>
{{msg}}
<!-- {{htmlstr}} -->
<div v-html="htmlstr"></div>
<p>v-bind 属性绑定</p>
<input value="值"/>
<input v-bind:value="valuestr"/>
<input :value="valuestr"/>
<p>v-bind可以对变量进行二次处理</p>
{{str.substring(0,4)}}<br>
{{num+4}}
{{ok ? '1':'0'}}
<span :id="'goods_'+id">xx</span>
<span class="a">文本内容</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
msg: 'hello vue',
htmlstr: '<span style="color:red;">文本内容 </span>',
valuestr:'vue值',
str:'hell',
num:6,
ok:false,
id:'goods_'
}
}
})
</script>
</html>
效果如下
二，指令
指的是带有“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一起绑定[多选]复选框和单选框
<!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|v-else|v-else-if</p>
分数：<input v-model="score" />
<div v-if="score<50">不合格</div>
<div v-else-if="score<70">合格</div>
<div v-else-if="score<80">良好</div>
<div v-else-if="score<90">优秀</div>
<div v-else-if="score<=100">优+</div>
<div v-else="">请输入正确的数字</div>
<p>v-show</p>
<div v-show="score>90">v-show-上优秀学员名单</div>
<div v-if="score>90">v-if-上优秀学员名单</div>
<p>v-for</p>
<select v-model="hobbySelected">
<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>
<p>v-on</p>
<button v-on:click="handle">触发事件</button>
<button @click="handle">触发事件222</button>
<!-- <input v-model="hobbySelected" /> -->
</div>
</body>
<!-- 实例vue -->
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 78,
hobby: [{
id: '1',
name: '小無'
},
{
id: '2',
name: '元旦'
},
{
id: '3',
name: '邮箱'
},
{
id: '4',
name: '中秋'
},
{
id: '5',
name: '除夕'
},
],
hobbySelected: 4
};
},
methods: {
handle() {
alert("触发事件");
}
}
})
</script>
</html>
效果如下
三、过滤器
1、全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容});
2、局部过滤器
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">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="bpp">
{{msg|all}}<br />
{{msg|single}}<br />
{{msg|all|single}}<br />
{{msg|param(2,5)}}
</div>
</body>
<script type="text/javascript">
// 全局过滤器
Vue.filter('all', function(value) {
return value.substring(1, 4);
});
// 绑定边界 ES6具体体现
new Vue({
el: '#bpp',
data() {
return {
msg:"asdfg"
};
},
methods: {
handle() {
alert("触发事件");
}
},
filters:{
'single':function(val){
return val.substring(2,3);
},
'param':function(val,start,end){
return val.substring(start,end);
}
}
})
</script>
</html>效果如下
四、计算属性与监听属性
1、计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
2、监听属性
监听属性 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>
<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 type="text/javascript">
// 全局过滤器
Vue.filter('all', function(value) {
return value.substring(1, 4);
});
// 绑定边界 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>效果如下
3、计算属性和监听属性的区别
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，与watch之间的区别：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
好了本次 Vue 的模板语法上小無就讲到这里了我们下次见
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
