Vue框架学习02
一、Vue实例
1、创建一个Vue实例
在Vue项目中，每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的，创建Vue实例的代码如下：
<script>
var vm = new Vue({
// 选项
})
</script>
通常使用 vm (ViewModel 的缩写) 这个变量名来表示 Vue 实例。
当创建一个 Vue 实例时，你可以传入一个 选项(Option) 对象。常用的选项如下表所示：
| 选项 | 说明 |
|---|---|
| data | 类型：通常为对象(Object)，Vue 实例的数据对象。Vue 会递归地把 data 的属性(property)转换为 getter/setter，从而让 data 的属性能够响应数据变化。 |
| methods | 类型：{ [key: string]: Function }，定义Vue 实例中的方法 |
| computed | 类型：{ [key: string]: Function | { get: Function, set: Function } }，Vue的计算属性 |
| watch | 类型：{ [key: string]: string | Function | Object | Array}，监听数据变化 |
| filters | 类型：对象(Object)，过滤器 |
| el | 类型：字符串(string) | HTML元素(Element)，唯一根标签 |
| components | 类型：对象(Object)，定义子组件 |
2、el选项(属性)
el表示唯一根标签，用以给 Vue 实例绑定一个页面上已存在的 DOM 元素。其值可以是CSS选择器字符串或HTMLElement。(通常为 CSS id 选择器字符串)
代码示例如下：
<div id="app"></div>
<script>
var vm = new Vue({
el: '#app' // 通过el选项将此Vue实例与id为“app”的div元素绑定在一起
})
</script>
3、data选项
data表示为Vue实例中的数据对象，Vue会将 data 的属性转换为getter、setter，从而让 data 的属性能够响应数据变化。
Vue实例创建后，可以通过vm.$data访问原始数据对象。Vue实例也代理了 data 对象的所有属性，因此访问vm.name相当于访问vm.$data.name。
代码示例如下：
<div id="app">
<p>{{name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app', // 通过el选项将此Vue实例与id为“app”的div元素绑定在一起
data: {
name: '数据'
}
})
console.log(vm.$data.name) // "数据"
console.log(vm.name) // "数据"
</script>
4、methods选项
methods属性用于定义方法，通过 Vue 实例可以直接访问这些方法。在定义的方法中，this指向 Vue 实例本身。
代码示例如下：
var vm = new Vue({
data: { a: 1 },
methods: {
// 定义plus()方法
plus: function () {
this.a++
}
}
})
vm.plus() // 调用plus()方法
vm.a // 2
5、computed选项(计算属性)
当有一些数据需要随着其他数据的变动而变动时，就需要使用computed计算属性。this指向的 Vue 实例的计算属性的结果会被缓存起来，只有依赖的响应式属性变化时，才会重新计算，更新计算属性的结果。
代码示例如下：
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设值
aPlus: {
// getter，默认
get: function () {
return this.a + 1
},
// setter
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
6、watch选项(状态监听)
Vue 提供了 watch 状态监听功能，只需监听当前 Vue 实例中的数据变化，就会调用当前数据所绑定的事件处理方法。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性(property)。
代码示例如下：
var vm = new Vue({
data: {
a: 1
},
watch: {
// 监听 a 的变化
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
}
}
})
vm.a = 2 // => new: 2, old: 1
7、filters选项(过滤器)
1、在插值表达式中使用过滤器
{{data}}语法，就是插值表达式。通过在插值表达式中使用过滤器来对数据进行处理，其语法为{{data | filter}}，符号|称为管道符，管道符前面代码执行的结果会传到后面作为参数进行处理。
代码示例如下：
<div id="app">
<div>{{message | toUpcase}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'helloworld'
},
filters: {
// 将 helloworld 转换为 HELLOWORLD
toUpcase(value) {
return value ? value.toUpperCase() : ''
}
}
})
</script>
// 运行结果：=> "HELLOWORLD"
2、在v-bind 指令中使用过滤器
语法示例：v-bind：id="data | filter"
代码示例：
<div id="app">
<div v-bind: id="dataId | formatId">helloworld</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
dataId: 'dff1'
},
filters: {
// 字符串处理
formatId(value) {
return value ? value.charAt(1) + value.indexOf('d') : ''
}
}
})
</script>
// 运行结果：=> "<div id="f0">helloworld</div>"
二、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: {
// 内层Div
myDiv: {
backgroundColor：'red',
width: '100px',
height: '100px'
},
// 外层Div
pink: 'pink',
width: '100%',
height: '200px'
}
})
</script>
在上述代码中，内层div的样式是通过绑定myDiv样式对象实现的，外层div的样式是通过绑定 data 数据中定义的样式属性名实现的。
2）绑定样式类
样式类即以类名定义元素的样式。
代码示例如下：
// 相应样式
.box{
background-color: pink;
width: 100%;
height: 200px;
}
.inner{
background-color: red;
width: 100px;
height: 50px;
border: 2px solid white;
}
<div id="app">
<!-- 外层Div -->
<div v-bind: class="{{box}}">我是box
<!-- 两个内层Div -->
<div v-bind: class="{{inner}}">我是inner1</div>
<div v-bing: class="{{inner}}">我是inner2</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
box: 'box',
inner: 'inner'
}
})
</script>
在上述代码中，box样式为外部div结构样式，其背景色为粉色；inner样式为内部div结构样式，其背景色为红色。
2、内置指令
Vue 提供了一些内置指令，通过使用内置指令可以用更简洁的代码来实现复杂的功能。常用的内置指令如下表：
| 指令 | 说明 |
|---|---|
| v-model | 双向数据绑定 |
| v-bind | 单向数据绑定 |
| v-text | 插入文本内容 |
| v-html | 插入包含HTML的内容 |
| v-on | 监听事件 |
| v-for | 列表渲染 |
| v-if | 条件渲染 |
| v-show | 显示隐藏 |
Vue的内置指令书写规则：以v开头，后缀用以区分指令的功能，且通过短横线连接。指令必须写在DOM元素上。内置指令还可以使用简写方式，比如，v-on: click 可简写为@click，v-bind: class 可简写为: class。
1、v-model
v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。
代码示例如下：
<div id="app">
<input type="text" v-model="msg" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'this is a v-model 指令'
}
})
vm.msg // ==> “this is a v-model 指令”
</script>
2、v-bind
v-bind可以实现单向数据绑定。
代码示例如下：
<div id="app">
<input type="text" v-bind: value="msg" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'this is a v-bind 指令'
}
})
vm.msg // ==> “this is a v-bind 指令”
</script>
3、v-text
v-text是在DOM元素内部插入文本内容。
代码示例如下：
<div id="app">
<p v-text="msg"></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'this is a v-text 指令'
}
})
vm.msg // ==> “this is a v-text 指令”
</script>
4、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>this is a v-html 指令</h2>'
}
})
vm.msg // ==> “this is a v-html 指令”
</script>
5、v-on
v-on是事件监听指令，直接与事件类型配合使用。
代码示例如下：
<div id="app">
<p>{{msg}}</p>
<button v-on: click="showInfo">请单击</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '请单击按钮查看内容'
},
methods: {
showInfo() {
this.msg = 'this is a v-on 指令'
}
}
})
// 运行结果：
// 单击按钮前 ==> “请单击按钮查看内容”
// 单击按钮后 ==> “this is a v-on 指令”
</script>
6、v-for
v-for可以实现页面列表渲染，常用来循环数组。
代码示例如下：
<div id="app">
<div v-for="(item,key) in list" data-id="key">
索引是：{{key}}，元素内容是：{{item}}
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1,2,3]
}
})
</script>
// 运行结果：
// 索引是：0，元素内容是：1
// 索引是：1，元素内容是：2
// 索引是：2，元素内容是：3
7、v-if 和 v-show
v-if用来控制元素显示或隐藏，属性为布尔值。v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创建，所以v-if在性能上不如v-show。
代码示例如下：
<div id="app">
<div v-if="isShow" style="background-color: #ccc;">
我是v-if
</div>
<button @click="isShow=!isShow">显示/隐藏</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow：true
}
})
</script>
在上述代码中，可将v-if替换为v-show，展示结果将有所不同。
参考资料：
1、Vue 2.x API 文档
2、Vue 2.x 官方教程文档
3、《Vue.js 前端开发实战》，黑马程序员.
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
