Vue-mustach,插入DOM操作
示例:
<div id="app">{{message}} </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el:"#app"
data:{
message:"hello,Vue"
}
});
</script>
mustach---->{{}} 调用vue中对应的属性或者方法,比如{{message}}
插入DOM操作(更新view)
1、v-once 只显示第一次message内容,后续修改不更新
{{message}}
2、v-html 若果message:“点击跳转百度” ,若不加上v-html,{{message}}按照字符串显示,加上则为html代码,比如
{{message}}
3、v-text 按照文本内容显示
{{message}}
4、v-pre 原封不动显示{{message}}无引用,比如
{{message}}
显示{{message}}5、v-cloak vue解析前有v-cloak属性,解析完成后v-cloak属性消失,可在css中控制样式,
6、v-bind 动态绑定标签属性
<div id="app">
<img v-bind:src="imgUrl"/>
<button v-on:click="onClick">
<!--
可替换成语法糖写法:
<img :src="imgUrl"/>
<button @click="onClick">
-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//v-on可以绑定不一样的事件比如click,调用methods中的事件
const app = new Vue({
el:"#app"
data:{
imgUrl:"图片地址"
},
methods:{
onClick:function() {
this.imgUrl="改变后的img地址"
}
}
});
</script>
7、v-bind动态绑定class,控制样式
①对象法
//常规写法:
<style>
.active{
color:red;
}
.fontsize{
font-size:16px;
}
.bgcolor{
background-color:#000;
}
</style>
<h2 class="active" >字体显示红色</h2>
//v-bind对象法写法:v-bind:class="{key:vlue}" key为class属性名,value为boolean类型,
//value可以为表达式,如1>21,为false,则不显示key的class属性
<h2 v-bind:class="{active:1>32,fontsize:1<32}" class="bgcolor" >hello,word</h2>
//显示为<h2 class="fontsize bgcolor" >hello,word</h2>
//若原来有class样式,则重合
②绑定method
<style>
.active{
color:red;
}
.fontsize{
font-size:16px;
}
.bgcolor{
background-color:#000;
}
</style>
<div id="app">
<h2 v-bind:class="getClass()" >hello,word</h2>
<!--或者 <h2 :class="getClass()" >hello,word</h2>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el:"#app"
data:{
isFontSize:true;
},
methods:{
getClass:function() {
return {active:1>32,fontsize:this.isFontSize};
}
}
});
</script>
③绑定数组
<h2 :class="\['active',fontsize\]" >hello,word</h2>
//去掉‘’为data:{fontsize:true;}
8、v-bind绑定style
①对象法:
// :style="{key:value'}" key为style中的属性名(需要去掉- font-size --> fontsize),
//value为属性值,value需要加'',否则认定为vue中属性
<h2 :style="{fontsize:'50px'}" >hello,word</h2>
②方法
<h2 :style="getstyle()">hello,word</h2>
③数组
<h2 :style="\[style1,style2\]">hello,word</h2>
new Vue({
data:{
style1:{backgroundcolor:'red'},
style1:{fontsize:'50px'},
}
})
9、v-for 循环输出
<div id="app">
<ur>
<!--item为当前对象,index为当前下标-->
<li v-for="(item,index) in movies">{{index}},{{item}}</li>
</ur>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app=new Vue({
el:"#app",
data:{
movies:\['海王','火萤','123','哪吒'\],
}
});
</script>
10、【实现】循环输入一个数组,点击数组中哪一个值,这个值改变样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.active {
color:red;
}
</style>
<body>
<div id="app">
<ur>
<li v-for="(item,index) in movies" @click="onClick(index)" :class="{active:currentIndex===index}" >
{{index}},{{item}}
</li>
</ur>
</div>
<script src="js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
movies:\['海王','火萤','123','哪吒'\],
isActive:false,
currentIndex:0
},
methods:{
onClick:function (index) {
this.currentIndex=index;
}
}
});
</script>
</body>
</html>