vue的指令操作
插值表达式
<body>
<div id="test">
<p>{{ msg }}</p>
<p>{{ num + 1 }}</p>
<p>{{ msg + num}}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('')}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#test",
data:{
msg:"orange",
num:10
}
})
</script>
>>>
orange
11
orange10
r
[ "o", "r", "a", "n", "g", "e" ]
注意:当使用vue语法时,{{}}中如果什么都不放,语法解析不出来,会显示{{}}.
文本指令
{{ }}直接传值
v-text:不能解析html语法,直接传值.
v-html:可以解析html语法.
<div id="text">
<p v-text="info">123</p>
<p v-html="info"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#text",
data:{
info:'<i>infor</i>',
},
})
</script>
>>>
<i>infor</i>
infor
而且代码从上至下执行,如果原p标签中有值,会被后面执行的v-html或者v-text覆盖掉
v-once
无论多少操作,只渲染一次.
<body>
<div id="text">
<p v-once v-on:click="pClick">{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#text",
data:{
info:'<i>infor</i>',
msg:'1111'
},
methods:{
pClick:function () {
this.msg = "222"
}
}
})
</script>
>>>
1111
渲染一次1111,后面再也改变不了了
事件指令
事件指令 v-on:事件名="方法变量"
简写: @事件名="方法变量"
<body>
<div id="event">
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<p @click="f2($event,'第一个')">{{ info }}</p>
<p @click="f2($event,'第二个')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#event",
data:{
msg:"点击事件",
info:"是我"
},
methods:{
f1(){
this.msg ="点击了"
},
f2(ev,args){
this.info = args + "点击了"
}
}
})
</script>
关于鼠标的操作:@后面的
<!--mouseover mouseenter | mouseout mouseleave-->
| 方法 | 操作 |
|---|---|
| mouseover | 鼠标悬浮 |
| mouserout | 鼠标移开 |
| mousedown | 鼠标点下去 |
| mouseup | 鼠标抬起来 |
| mousemove | 鼠标在上面移动 |
| contextmenu | 右键点击 |
@事件="变量($event,...)"
当事件变量不添加(),系统默认传入一个事件对象:$event
当事件变量后手动添加了(),就告诉了系统不需要再传入事件对象,但是可以手动传入事件对象.
属性指令
v-bind:属性名="变量"
简写 :属性名="变量"
简单使用
<body>
<div id="property">
<p v-bind:title="pTitle" :abc="def">简答使用</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#property",
data:{
pTitle:"简单使用"
}
})
</script>
class属性绑定
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
200px;
height:200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="property">
//可以通过传值的方式传多个
<p :class="c0"></p>
//多类名可以使用[]语法,采用多个变量来控制
<p :class="[c1,c3]"></p>
//[]中也可以使用常量
<p :class="['d1',c3]"></p>
//{类名:布尔值} 可以控制某类名是否起作用,bool=true,d2有效,否则无效
<p :class="['d1',{d2:is_true}]" @click="is_true=!is_true"></p>
//点击事件改变src属性
<p @click="changeImg">大长腿</p>
<img :src="img_src" alt="">
//style控制样式样式
<p :style="myStyle">样式属性</p>
<p :style="{w,height:h,backgroundColor:bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#property",
data:{
c0:"d1 d2",
c1:'d1',
c2:"d2",
c3:"d3",
is_true:true,
img_src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
myStyle: {
'100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods:{
changeImg(){
this.img_src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
})
</script>
注意:data的style中:左侧比如backgroundColor:属性名:驼峰体="减号连接体"
is_true这种也可以不引号
表单指令
可以实现数据的双向绑定:双向:value给input,input给value
v-model绑定的变量值可以影响表单标签的值,反过来表单标签的值也可以影响变量的值
表单指令 v-model="变量"
相当于是一个可以动态变化的value
//实现多位置标签值动态变化
<body>
<div id="app">
<form action="">
<input type="text" id="usr" placeholder="enter the count" v-model="v1">
<input type="text" v-model="v1">
{{ v1 }}
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
v1:'123'
}
})
</script>
单选框
可以通过data中的v2控制标签的默认值
<body>
<div id="app">
<form action="">
male:<input type="radio" v-model="v2" name="gender" value="male">
female:<input type="radio" v-model="v2" name="gender" value="female">
{{ v2 }}
<button type="submit"></button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
v1:'123',
v2:"male",
}
})
</script>
单一复选框
v3为bool值,可在v3中控制,如果input中有自己的value,会显示自己的value
<body>
<div id="app">
<form action="">
male:<input type="checkbox" v-model="v3" name="gender">
{{ v3}}
<button type="submit"></button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
v1:'123',
v2:"male",
v3:false,
}
})
</script>
多复选框
可以动态控制数组中的值
<body>
<div id="app">
<form action="">
male:<input type="checkbox" v-model="v4" name="gender" value="male">
female:<input type="checkbox" v-model="v4" name="gender" value="female">
{{ v4}}
<button type="submit"></button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
v1:'123',
v2:"male",
v3:false,
v4:['male','female']
}
})
</script>
注意:js中:
checked bool类型 checked="checked"写或不屑都是bool
multuple bool类型 表示多选
一般单独写的都是bool类型
条件指令
v-show="布尔值" 隐藏时,采用display:none进行渲染
v-if="布尔值" 隐藏时,不渲染页面中的数据,(保证了不渲染的数据不会泄露)
v-if|v-else-if|v-else if和else-if需要写===来进行判断,如果不写,相当于if/if-else语句没有,而v-else语句可以不写,当上面的if和else-if条件不符合的时候自动执行
//点击按钮高亮实例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{display:none;}
.box {
200px;
height: 200px;
}
.r {background-color: red}
.g {background-color: green}
.b {background-color: blue}
.active {background-color: yellow}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="wrap">
<div>
<button @click="page='r_page'" :class="{active:page==='r_page'}">red</button>
<button @click="page='g_page'" :class="{active:page==='g_page'}">green</button>
<button @click="page='b_page'" :class="{active:page==='b_page'}">blue</button>
</div>
<div class="box r" v-if="page ==='r_page'"></div>
<div class="box g" v-else-if="page==='g_page'"></div>
<div class="box b" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
page:'r_page'
}
})
</script>
循环指令
重要程度:值>键>索引,越重要的越放前面
v-for="(v,i) in str|arr"
v-for="(v,k,i) in dic"
<body>
<div id="app">
<span>{{info}}</span>
//字符串遍历
<i v-for="c in info">{{ c }} </i>
<i v-for="(c,i) in info">{{i}}:{{ c }} </i>
//数组遍历
<div v-for="e in stus">{{ e }}</div>
<div v-for="(e,i) in stus">{{ i }}:{{ e }}</div>
//对象的遍历
<div v-for="v in people">{{v}}</div>
//嵌套使用
<div v-for="v in stus">{{v}}</div>
<div v-for="(v,k,i) in people">{{ i}}: {{ k }}-{{ v }}</div>
<div v-for="tea in teas">
<span v-for="(v,k,i) in tea"><span v-if="i !==0">|</span>{{ i }}:{{k}}-{{v}} </span>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#app",
data:{
info: 'good good study',
stus: ['Bob', 'Tom', 'Jerry'],
people: {
name: '猴子',
age: 36.7,
sex: '女',
},
teas: [
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
}
})
</script>
v-cloak
可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。