- 创建Vue实例
var vm = new Vue({
// options
})
- data 对象
var student ={"name":"mifeng"}
var vm = new Vue({
data: student,
})
// vm equivalent to the following:
var vm = new Vue({
// define data object
data: {
"name":"mifeng"
},
})
1) 定义vm 这个实例后,Vue的响应系统中加入了data 对象中所有的属性, vm.name = “jjf”
及 student.name= “jjf”
都会导致视图重新渲染
2) Vue 实例还暴露了一些有用的实例属性与方法
- $data
- $el
- $ watch
var student ={"name":"mifeng"}
var vm = new Vue({
el: '#example',
// define data object
data: {
"name":"mifeng"
},
})
vm.$el = document.getElemetById(‘example’) //true
vm.$data === student // => true
// watch是一个实例方法vm. w a t c h 是 一 个 实 例 方 法 v m . watch(‘a’, function (newValue, oldValue) {
// 这个回调将在vm.a
改变后调用
})
- 实例生命周期钩子
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!',
selected: "",
items: [1,2,3],
name: "mifeng"
},
created: function(){
alert(" vue instance created"+ this.name+ new Date());
},
mounted: function () {
alert("mouted time:"+ new Date());
},
watch: {
items : function(){
alert("alert changing items");
},
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
},
getTablesByDb: function(e){ alert("alert")},
info:function($event){alert("info is working")}
}
})
模版
1) 文本插值-“Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ msg }}</span>
2)指令
- 指令 (Directives) 是带有 v- 前缀的特殊特性
<p v-if="seen">现在你看到我了</p>
3). 带参数的指令
<a v-bind:href="url">...</a>
v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
4) 用 JavaScript 表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
- 计算属性computed
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
1). 当改变message ,然后再vm.reversedMessage ,发现已经执行了split 和reverse 这两个操作
- 过滤器
用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:(见下)
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
可以定义多个filter:
{{ message | filterA | filterB }}
- DOM 渲染
1) v-for
(1). 一段取值范围的 v-for
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
(2) v-for on a
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>