Vue 开发基础（上）
Vue数据绑定
实现元素样式绑定以及类名控制，通过v-for内置指令绑定数组实现列表结构等
样式绑定
绑定内联样式
初始数据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>
data: {
myDiv: {
backgroundColor: ‘red‘,
width: ‘100px‘,
height: ‘100px‘
},
pink: "pink",
width: ‘100%‘,
height: ‘200px‘
}
绑定样式类
以类名定义元素样式
<div id="app">
<div v-bind:class="{box}">我是box
<div v-bind:class="{inner}">我是 inner 1</div>
<div v-bind:class="{inner}">我是 inner 2</div>
</div>
</div>
data: {
box: ‘box‘,
inner: ‘inner‘
}
<style>
.box {
background-color: pink;
width: 100%;
height: 200px;
}
.inner {
background-color: red;
width: 100px;
height: 50px;
border: 2px solid white;
}
</style>
内置指令
可用简洁的代码实现复杂的功能，内置指令书写规则以v开头，后缀用来区分指令功能，且通过短横线链接。指令必须写在DOM元素上。
简写方式：
例：v-on:click @click
v-bind:class :class
|
指令名称 |
作用 |
|
v-model |
数据双向绑定；用于表单输入等 |
|
v-on |
监听事件； |
|
v-bind |
单向数据绑定 |
|
v-text |
插入文本内容 |
|
v-html |
插入包含HTML的内容 |
|
v-for |
列表渲染，常用循环数组 |
|
v-if |
条件渲染指令，动态在DOM内添加或删除DOM元素 |
|
v-show |
显示隐藏 |
小提示：Vue 2.0中，代码复用个抽象的主要形式是组件，然而，优秀情况下任需要对普通DOM元素进行底层操作，这时会用到自定义指令。
v-model
通常由于表单，model为双向绑定，当改变data值时在控制台输入 vm.$data.数据名 来查看是否初始数据更改
<div id="app">
<input type="text" v-model="msg">
</div>
data: {
msg: ‘v-model 指令‘
}
v-text
DOM内部插入文本
<div id="app">
<p v-text="msg"></p>
</div>
data: {
msg: ‘v-text 指令‘
}
v-html
在DOM中插入HTML标签内容，其结构可以是HTML结构
<div id="app">
<p v-html="msg"></p>
</div>
data: {
msg: ‘<h2>v-html 指令</h2>‘
}
v-bind
可以实现单向数据绑定，改变表单数据时，在后台输入 vm.msg 仍为初始值
<div id="app">
<input v-bind:value="msg"/>
</div>
// v-bind 绑定 value 值，value 为表单元素值
data: {
msg: ‘v-bind 指令‘
}
v-on
事件监听指令，直接与事件类型配合使用
<div id="app">
<p>{{ msg }}</p>
<button v-on:click="showInfo">请单击</button>
</div>
data: {
msg: ‘v-on 指令‘
},
methods: {
showInfo() {
this.msg = ‘v-on‘
}
}
v-for
实现列表的渲染，常用于循环数组
<div id="app">
<div v-for="(item,key) in list" data-id="key">
索引是: {{ key }}, 元素内容是: {{ item }}
</div>
</div>
data: {
list: [1, 2, 3, 4]
}
v-if v-show
v-if 用于控制元素的显示或隐藏，属性为布尔值，对元素进行删除和重新创建
v-show 可以实现和v-if同样的效果，但是v-show是操作元素的display属性（v-show 在性能上高于 v-if）
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if
<div id="app">
<div v-if="isShow" style="">v-if</div>
<button @click="isShow=!isShow">显示/隐藏</button>
<div v-show="show" style="">v-show</div>
<button @click="show=!show">显示/隐藏</button>
</div>
data: {
isShow: false,
show: false
}