Vue之指令系统
简介：
Vue中以 v- 的特殊前缀就是指指令系统。
常用指令：
1、v-text:可以从Vue的实例属性中的data拿到值，等于 {{key}}
2、v-html:和v-text类似，但是key对应的value 是 html标签字符串
3、v-if: if判断
4、v-show:类似v-if
5、v-for:for循环
6、v-bind:绑定属性，可以简写成 :
7、v-on:绑定事件 可以简写成@
8、v-model:双向绑定
代码：
v-if,v-else,v-else-if,v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
<!-- bool值判断-->
<div v-if="show">v-if 类似 display=none</div>
<button v-on:click="clickhandler">绑定事件</button>
<!-- <button @click="clickhandler">绑定事件简写</button>-->
<!-- 具体值 配合 v-else 同时该值需要紧紧跟在v-if v-else-if之后 否则不识别-->
<h1 v-if="ok > 1">yes</h1>
<h1 v-else>No</h1>
<!-- v-else-if -->
<h1 v-if="elif === 1">one</h1>
<h1 v-else-if="elif ===2 ">two</h1>
<h1 v-else-if="elif ===3 ">three</h1>
<h1 v-else>four</h1>
<div v-show="test_show">v-show 和 v-if的区别</div>
</div>
<script>
// app 就是一个vue 实例 在控制台可以console打出
// 同python的类实例一样 通过 .的方式可以直接调出来属性
// 同时 在实例vue的时候 会将传入的 key 加 $ 调用的时候 app.$el app.$data.msg
var app=new Vue(
{
el:"#app",
data:{
msg:"指令系统stu",
kk:"直接调用",
show:true,
ok:1,
elif:2,
test_show:true
},
// 事件
methods:{
clickhandler () {
alert("单体模式--绑定事件");
// 修改 实例属性之后 页面 直接跟着修改了
// this.show=true;
// 另外一种方法 取反值
this.show =!this.show;
}
}
}
)
console.log(app.$data.msg);
console.log(app.$el);
console.log(app.kk);
/*
* vue的常用 指令系统
* mvvm model view viewmodel
* viewmodel 简单理解为 v-if
* model vue实例中的data
* view 就是div标签 就是dom
* */
// 条件渲染 v-if 这种方式 在dom中 类似直接删除了
app.show=false;
// 条件渲染 v-show 以及和v-if的区别
/*
* v-if是真正的条件渲染 因为它会确保在切换过程中条件块的事件监听器和子组件被适当的销毁和创建
* v-if 是惰性的如果在初始渲染的时候条件为false 则说明都不做 知道条件第一次变为真 才会开始渲染条件块
* 相比之下 v-show 就简单的多 不管初始条件是什么 元素总是被渲染 并且致使简单的基于css的切换
* 一般来说 v-if有更高的切换开销 而v-show有更高的初始开销 因此如果需要非常频繁的切换 则使用v-show 较好 如果在运营是条件很少改变 则使用 v-if比较好
*
*
* */
</script>
</body>
</html>
v-bind 用于给标签绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app02">
<h1 v-show="flag" v-bind:title="msg">v-bind 学习 一个标签中可以有多个 指令</h1>
<img v-bind:src="img_url" v-bind:alt="time">lianjie
<!-- <img v-bind:src="img_url" :alt="time"> 简写-->
</div>
<script>
var app=new Vue(
{
el:"#app02",
data:{
msg:"v-bind 学习",
flag:true,
img_url:"./111.jpeg",
time:"页面加在于"+new Date().toLocaleString()
}
}
)
</script>
</body>
</html>
v-on 用于绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
.box{
width:100px;
height:100px;
background: red;
}
.box2{
width:100px;
height:100px;
background: green;
}
.active{
width:200px;
height:200px;
background: green;
}
.text-danger{
width:200px;
height:200px;
background: red;
}
</style>
</head>
<body>
<!-- class 和 style 的 绑定 -->
<div id="app">
<div class="box" v-bind:class="{box2:isbox2}"></div>
<button @click="changcolor">切换颜色</button>
</div>
<h1>------------------------</h1>
<!--直接绑定数组-->
<div id="app02">
<div class="box" v-bind:class="{box2:isbox2}"></div>
<button @click="changcolor">切换颜色</button>
</div>
<div id="app03">
<!-- 如果是事件是简单的计算操作 则可以直接在绑定中写 也可以在methods中写对应的处理函数 -->
<button @click="count+=1">{{count}}</button>
<button @click="count_func">{{count}}111</button>
</div>
<script>
var app=new Vue(
{
el:"#app",
data:{
isbox2:false
},
methods:{
changcolor(){
this.isbox2=!this.isbox2
}
}
}
)
// Vue核心思想 数据驱动视图
var app03=new Vue({
el:"#app03",
data:{
count:0
},
methods: {
count_func(){
this.count+=1
}
}
})
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- 列表渲染 -->
<div id="app">
<ul>
<li v-for="(item,index) in imgarr" @click="currenthandler(item)">{{index+1}}--
</li>
</ul>
<img v-bind:src="image_url" alt="">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
imgarr:[
{id:1,src:'./1.png'},
{id:2,src:'./2.jpeg'},
{id:3,src:'./3.png'},
{id:4,src:'./4.jpeg'}
],
image_url:'./1.png'
},
methods:{
currenthandler(item){
this.image_url=item.src;
}
}
})
</script>
</body>
</html>
v-model 双向绑定，下方input的值的改变引发了p标签内的值的改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
// 双向绑定 其实 dom中多个标签绑定了 vue实例中的一个属性 其中任意一个发生变化 其他就会跟着变
// 这有点 python 引用语义的意思
var app6=new Vue({
el:"#app-6",
data:{
message:"hello vue"
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号