目标：
1.插值
2.指令
3.过滤器
4.计算属性&监听属性
一、插值
值的几种形式
1.1 文本
{{msg}}
1.2 html
使用v-html指令用于输出html代码
1.3 属性
HTML属性中的值应使用v-bind指令
1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}} 截取、全大写
{{ number + 1 }} 加法
{{ ok ? 'YES' : 'NO' }} 三元运算符
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
实例：
页面代码
<!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="dd">
<p>文本</p>
<p>{{a}}</p>
<p v-text="a"></p>
<p>html语句</p>
<p>{{htmlstr}}</p>
<p v-html="htmlstr"></p>
<p>属性</p>
<input type="text" value="a" />
<input type="text" v-bind:value="a" />
<p>表达式</p>
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</div>
<script type="text/javascript">
new Vue({
el: '#dd',
data() {
return {
a: 'aaaaaabbc',
htmlstr: '<h3 styyle="color:red">java牛逼</h3>',
str:'java666',
number: '2',
ok:'oh!ye',
id:'66'
};
}
})
</script>
</body>
</html>效果
查看最后一个标签的id:
拼接成功了。
这是vue内的一些语法规则，如果不按照规则编码，可能会直接报错，如果你发现页面没东西，注意看控制台。
二、指令
指的是带有“v-”前缀的特殊属性
1.核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
1.1:v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
1.2:v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
1.3:v-for：类似JS的遍历，
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
1.4:v-bind 属性调用
1.5:v-on 事件调用
1.6:v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
1.7: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>80">优秀</div>
<div v-else-if="score>60">良好</div>
<div v-else="score<60">下次努力</div>
<p>v-show</p>
<div v-show="score>80">show 上优秀学员名单</div>
<div v-if="score>80">if 上优秀学员名单</div>
<p>v-for</p>
<select v-model="hobbyselect">
<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="hobbyselect" /> -->
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
score:78,
hobby:[
{id:"1",name:"洗头"},
{id:"2",name:"按摩"},
{id:"3",name:"洗脚"}
],
hobbyselect:3
};
},
methods:{
handle(){
alert("触发事件");
}
}
})
</script>
</html>
需要注意：v-if与v-show的区别，如果后面的判断条件成立，则显示上没什么区别，如果条件不成立，则v-if会直接没有标签，而v-show则是会调用标签的隐藏属性将其隐藏
三、动态参数
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">
<p>动态参数</p>
<button v-on:[evname]="handle">动态参数</button>
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
evname:'click'
};
},
methods:{
handle(){
alert("触发事件");
}
}
})
</script>
</html>
在实际中，可以改变evname的值，来控制它的触发方式。
四、过滤器
过滤器分为两种，全局过滤器，局部过滤器。
全局过滤器：
可以在此页面及以外的页面使用，具体本页面之外的用法，之后会写。
定义方式：
Vue.filter('all',function(value){
return value.substring(1,5);
})写在定义vue外面，文中表示对value做截取。
all：过滤器名称。在外部通过‘|’加过滤器名称调用，'|'，前面的变量就是传进来的参数value,具体操作写在方法中。
局部过滤器：
只能在本页面使用，定义在vue里面。
new Vue({
el:'#app',
data(){
return {
msg:"Java6969"
};
},
//局部过滤器
filters:{
'single':function(val){
return val.substring(2,6 );
},
'param':function(val,start,end){
return val.substring(start,end);
}
}
})可以混合使用两种过滤器，会依次执行。
<div id="app">
{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
</div>效果：
五、计算属性、监听属性
计算属性：
可以随着其他属性变化而实时变化，不需要定义在data中，只能显示和运算，不能直接对计算属性进行修改。如果在输入框中引用计算属性，会报错！
<!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>30</td>
<td>
<input v-model="maozi" />
</td>
<td>
{{maozitotle}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>250</td>
<td>
<input v-model="yifu" />
</td>
<td>
{{yifutotle}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>150</td>
<td>
<input v-model="kuzi" />
</td>
<td>
{{kuzitotle}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3m">
{{total}}
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
maozi:1,
yifu:1,
kuzi:1
};
},
methods:{
handle(){
alert("触发事件");
}
},
computed:{
maozitotle(){
return this.maozi*30;
},
yifutotle(){
return this.yifu*250;
},
kuzitotle(){
return this.kuzi*150;
},
total(){
return this.maozitotle+this.yifutotle+this.kuzitotle;
}
}
})
</script>
`
</html>
通过computed进行创建，使用时调用属性名即可。
可以通过改变数量，控制总价。
监听属性：
监听属性必须要在data中进行定义，并且监听属性可以同时监听和被监听（区别于计算属性）。
<!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>30</td>
<td>
<input v-model="maozi" />
</td>
<td>
{{maozitotle}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>250</td>
<td>
<input v-model="yifu" />
</td>
<td>
{{yifutotle}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>150</td>
<td>
<input v-model="kuzi" />
</td>
<td>
{{kuzitotle}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3m">
{{total}}
</td>
</tr>
</table>
<p>监听属性</P>
千米:<input v-model="km" />
米:<input v-model="m" />
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data(){
return {
maozi:1,
yifu:1,
kuzi:1,
km:2,
m:2000
};
},
methods:{
handle(){
alert("触发事件");
}
},
computed:{
maozitotle(){
return this.maozi*30;
},
yifutotle(){
return this.yifu*250;
},
kuzitotle(){
return this.kuzi*150;
},
total(){
return this.maozitotle+this.yifutotle+this.kuzitotle;
}
},
watch:{
km:function(v){
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
}
}
})
</script>
`
</html>
通过watch进行监听事件绑定，使用时依照data中的定义进行调用。
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
