VUE的指令
v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- 对于MVVM 的理解 -->
<!-- 解放DOM -->
<!-- 指令:就是VUEjs为我们提供方便操作的自定义属性 -->
<!-- View -->
<div id="app">
<p v-cloak>{{msg+1+1+1+1+1}} </p>
</div>
<!-- View end -->
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})
</script>
</body>
<html>
v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--指令,标签的自定义属性-->
<div id="app">
<!--{{userName}}-->
<p v-text='userName'></p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
userName:'admin'
}
})
</script>
</body>
</html>
v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--myDiv-->
<div v-html="myDiv"></div>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
myDiv:'<h1>Hi</h1>'
}
})
</script>
</body>
</html>
v-pre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-pre>{{msg}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'不想被编译'
}
})
</script>
</body>
</html>
v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'最初的梦想:科学家'
},
mounted(){
this.msg = '后来我成为了火箭程序编写工程师'
}
})
</script>
</body>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--双向数据绑定-->
<div id="app">
<input type="text" value="" v-model="userName">
<p>{{userName}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
userName:'admin'
}
})
</script>
</body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--解放Dom-->
<div id="app">
<input type="text" v-model="num"><br>
<input type="button" value="+1" v-on:click='add'>
<input type="button" value="-1" @click='sub'><!--v-on:click简写为@click-->
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 1
},
methods: {
add: function (){
this.num += 1
},
sub(){
this.num -= 1
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--介绍事件函数的,参数———事件对象-->
<!--解放Dom-->
<!--js原生-->
<div id="app">
<input type="text" v-model="num"><br>
<input type="button" value="+1" v-on:click='add'>
<input type="button" value="-1" @click='sub(1,2,$event)'><!--v-on:click简写为@click-->
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 1
},
methods: {
add: function (event){
console.log(event.target.value);
this.num += 1
},
sub(a,b,event){
console.log(a);
console.log(b);
console.log(event);
this.num -= 1
}
}
})
</script>
</body>
</html>
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--v-bind:用来绑定属性简写成:-->
<div id="app">
<!--<img v-bind:src="srcUrl">-->
<img :src="srcUrl">
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
srcUrl:'./img/1.jpg'
},
mounted(){
this.srcUrl='./img/2.jpg'
}
})
</script>
</body>
</html>