vue数据绑定
一、绑定样式
Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方式来实现。
1.1 绑定内联样式
在Vue实例中定义的初始数据data，可以通过v-bind将样式数据绑定给DOM元素。
<div id="app">
<div v-bind:style="{backgroundColor:pink,width:width,height:height}">
<div v-bind:style="myDiv"></div>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
myDiv:{backgroundColor:'red',width:'100px',height:'100px'},
pink:'pink',
width:'100%',
height:'200px'
}
});
</script>
CSS内联样式基本语法：
<div style="background-color: pink; width: 100%; height: 200px;"></div>
绑定内联样式的Vue语法1
<div v-bind:style="{backgroundColor:'pink',width:'100%',height:'200px'}"></div>
1.2 绑定样式类
css代码：
.box{
background-color:pink;
width: 100%;
height: 200px;
}
.inner{
background-color: red;
width: 100px;
height: 50px;
}
.mark{
border: 2px solid gold;
}
html代码：
<div id="app">
<div v-bind:class="{box}">
我是box
<div v-bind:class="{inner}">我是inner1</div>
<div v-bind:class="[inner,mark]">我是inner2</div>
</div>
</div>
JavaScript代码：
var vn=new Vue({
el:'#app',
data:{
box:'box',
inner:'inner',
mark:'mark'
}
});
样式类语法：<div class="box"></div>,绑定样式类的Vue语法为<div v-bind:class="{box}"></div>
若样式类语法：<div class="inner mark"></div>，绑定样式类的Vue语法为<div v-bind:class="[inner,mark]">
二、内置指令
2.1 指令的基本概述
Vue的指令书写规则以v开头，后缀用来区分指令的功能，且通过短横线连接。指令时特殊的属性，指令必须写在DOM元素上。
2.2 指令参数
2.2.1 参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
<a v-bind:href="url"></a>
2.2.2 动态参数
<div id="app">
<div v-bind:[mark]="option"></div>
<div v-bind:[mark]="[option,flag]"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
mark:'name',
flag:'wcj',
option:'wch'
}
});
</script>
2.2.3 指令修饰符
修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit"></form>
例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()
2.3 常用内置指令
2.3.1 v-model
v-model主要实现数据双向绑定，通常用在表单元素上。
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'V-model质量'
}
});
</script>
2.3.2 v-text
v-text是在DOM元素内部插入文本内容。
<div id="app">
<p v-text="msg"></p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'我是v-text'
}
});
</script>
其下所有内容效果是一样的：
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
2.3.3 v-html
v-html是在DOM元素内部插入HTML标签内容。
<div id="app">
<div v-html="msg"></div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'<h2>我是v-html添加的内容</h2>'
}
});
</script>
代码实现效果为，在div内部插入二号标题：
<div id="app"> <div> <h2>我是v-html添加的内容</h2> </div> </div>
2.3.4 v-bind
v-bind可以实现单向数据绑定(属性绑定)。
简写：:
如下：<input :value="msg">
<div id="app">
<input v-bind:value="msg">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'我是v-bind内容'
}
});
</script>
==注意：==当改变vm.msg值时，页面中数据会自动更新，但不能实现视图驱动数据变化。
2.3.5 v-on
v-on是事件监听指令，直接与事件类型配合使用。
缩写@
如下：<button @click="showInfo">请单击</button>
<div id="app">
<p>{{msg}}</p>
<button v-on:click="showInfo">请单击</button>
</div>
var vm=new Vue({
el:'#app',
data:{
msg:'请单击按钮查看内容'
},
methods:{
showInfo (){
this.msg='我是单击后内容';
}
}
});
2.3.6 v-for
v-for可以实现页面列表渲染，可以循环Array | Object | number | string | Iterable (2.6 新增)。
此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div>
实例：
<div id="app">
<div v-for="(item,key) in list" :data-id="key">
索引是:{{key}},元素内容是{{item}}
</div>
</div>
var vm=new Vue({
el:'#app',
data:{
list:[1,2,3]
}
});
2.3.7 v-if和v-show
v-if用来控制元素显示或隐藏，属性为布尔值。v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创建，所以v-if在性能上不如v-show
v-if相关代码：
<div id="app">
<div v-if="isShow" style="background-color: #ccc;">我是v-if</div>
<button @click="isShow=!isShow">显示/隐藏</button>
</div>
var vm=new Vue({
el:'#app',
data:{
isShow:true
}
});
v-show相关代码
<div id="app">
<div v-show="isShow" style="background-color: #ccc;">我是v-show</div>
<button @click="isShow=!isShow">显示/隐藏</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
isShow:true
}
});
</script>
注意：v-if和v-show在代码显示的不同
