Javascript
vue模板语法上
本期内容
1、插值
2、指令
3、过滤器
4、计算属性&监听属性
HBuilder X 软件中代码格式化：Ctrl+K
一、插值
1、文本
{{msg}}
<!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>{{msg}}</h3>
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data() {
return {msg:'欢迎幻影'};
}
})
</script>
</html>
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>
<h3>{{msg}}</h3>
<p>html串，显示带红色字体的内容</p>
<div v-html="htmlstr"></div>
</div>
</body><script type="text/javascript">
<!-- 绑定边界
-->
new Vue({
el: '#app',
data(){
return{
msg: '欢迎幻影',
htmlstr:'<h3 style="color:red;">html片段</h3>'
};
}
})
</script>
</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>
<a v-bind:href="hrefstr">百度</a>
<input v-bind:value="valuestr" /><!-- 缩写方式 -->
<!-- <input :value="valuestr" /> -->
</div>
</body><script type="text/javascript">
<!-- 绑定边界
-->
new Vue({
el: '#app',
data(){
return{
msg: '欢迎幻影',
htmlstr:'<h3 style="color:red;">html片段</h3>',
hrefstr:'http://www.baidu.com',
valuestr:"23546"
};
}
})
</script>
</html>
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="app">
<p>文本</p>
<h3>{{msg}}</h3>
<p>html串，显示带红色字体的内容</p>
<div v-html="htmlstr"></div>
<p>vue中的属性</p>
<a v-bind:href="hrefstr">百度</a>
<input v-bind:value="valuestr" />
<!-- v-bind:value缩写方式 -->
<!-- <input :value="valuestr" /> -->
<p>表达式</p>
<p>截取字符串并转大写</p>
{{str.substring(0,4).toUpperCase()}}
<p>数值相加</p>
张三:{{number+1}}
<p>判断</p>
{{ok ? 'yes':'no'}}
<p>动态生成id</p>
<span :id="'goodsid_id_'+id">xxxxx</span>
</div>
</body><script type="text/javascript">
<!-- 绑定边界
-->
new Vue({
el: '#app',
data(){
return{
msg: '欢迎幻影',
htmlstr:'<h3 style="color:red;">html片段</h3>',
hrefstr:'http://www.baidu.com',
valuestr:"23546",
str:'java is very good',
number:59,
ok:true,
id:66
};
}
})
</script>
</html>
二、 指令
指的是带有“v-”前缀的特殊属性
1、核心指令
v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-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">
<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>90">v-show-上优秀学员名单</div>
<div v-if="score>90">v-if-上优秀学员名单</div>
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data() {
return {
score:78
};
}
})
</script>
</html>
根据用户在输入框中输入的数字判断成绩优良差：
v-if连div代码都不存在了 ，v-show只是display隐藏掉了
v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代 码：style="display:none"
2、v-for
类似JS的遍历
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
下拉框：hobbySelected被选中的选项——回显，以及可以根据后面的输入框填入的进行下拉框选中
<!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-for</p>
<select v-model="hobbySelected">
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</select>
<input v-model="hobbySelected" />
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data() {
return {
hobby:[
{id:"1",name:"唱歌"},
{id:"2",name:"跳舞"},
{id:"3",name:"打游戏"}
],
hobbySelected:3
};
}
})
</script>
</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>v-for</p>
<div v-for="h in hobby">
<input :value="h.id" type=checkbox />{{h.name}}
</div>
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data() {
return {
score:78,
hobby:[
{id:"1",name:"唱歌"},
{id:"2",name:"跳舞"},
{id:"3",name:"打游戏"}
],
};
}
})
</script>
</html>
3、v-on:触发事件 ：
<!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-on</p>
<button v-on:click="handle">触发事件</button>
<p>v-on缩写</p>
<!-- <button @click="handle">触发事件</button> -->
</div>
</body>
<script type="text/javascript">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data() {
return {
score:78,
hobby:[
{id:"1",name:"唱歌"},
{id:"2",name:"跳舞"},
{id:"3",name:"打游戏"}
],
hobbySelected:3
};
},
methods:{
handle(){
alert("触发事件");
}
}
})
</script>
</html>
三、动态参数
注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写
<!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里面的值换成了dblclick时，双击才能触发事件 */
evname:'click',
};
},
methods:{
handle(){
alert("触发事件");
}
}
})
</script>
</html>
四、过滤器
1、全局过滤器：
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
2、局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});
3、串联
4、过滤器可以传参的
<!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|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
</div>
</body>
<script type="text/javascript">
//全局过滤器
Vue.filter('all', function (value) {
return value.substring(2,6);
});
<!-- 绑定边界 -->
new Vue({
el:'#app',
data() {
return {
msg:"吃素并不能减肥，想想猪八戒"
};
},
// 局部过滤
filters:{
'single':function(val){
return val.substring(2,3);
},
'param':function(val,start,end){
return val.substring(start,end);
}
}
})
</script>
</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>
<table border="1" style="width: 600px;height: 300px;">
<tr>
<td>帽子</td>
<td>30</td>
<td>
<input v-model="maozi" />
</td>
<td>
{{maoziTotal}}
</td>
</tr>
<tr>
<td>鞋子</td>
<td>28</td>
<td>
<input v-model="xiezi" />
</td>
<td>
{{xieziTotal}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>12</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">
<!-- 绑定边界 -->
new Vue({
el:'#app',
data() {
return {
maozi:1,
xiezi:1,
kuzi:1,
km:2,
m:2000
};
},
methods:{
handle(){
alert("触发事件");
}
},
// 计算属性
computed:{
maoziTotal(){
return this.maozi*30;
},
xieziTotal(){
return this.xiezi*28;
},
kuziTotal(){
return this.kuzi*12;
},
total(){
return this.maoziTotal+this.xieziTotal+this.kuziTotal;
}
},
// 监听属性
watch:{
// v指的是m变量
m(v){
this.km=parseInt(v)/1000
},
// v指的是km变量
km(v){
this.m=parseInt(v)*1000
}
}
})
</script>
</html>
本期内容结束~
-
Vue3资料：新手入门必读教程11-16
-
Vue3资料：新手入门全面指南11-16
-
Vue资料：新手入门完全指南11-16
-
Vue项目实战：新手入门指南11-16
-
React Hooks之useEffect案例详解11-16
-
useRef案例详解：React中的useRef使用教程11-16
-
React Hooks之useState案例详解11-16
-
Vue入门指南：从零开始搭建第一个Vue项目11-16
-
Vue3学习：新手入门教程与实践指南11-16
-
Vue3学习：从入门到初级实战教程11-16
-
Vue学习：新手入门必备教程11-16
-
Vue3入门：新手必读的简单教程11-16
-
Vue3入门：新手必读的简单教程11-16
-
Vue入门：新手必读的简单教程11-16
-
Vue教程：新手入门与初级技巧详解11-15
