创建实例：
var vm = new Vue({
})
var data = { a : 1}
var vm = new Vue({
data:data
})
console.log(vm.a == data.a)
vm.a = 2
console.log(data.a) //2
反之相同
vue中数据是响应式的，一旦数据改变，视图将会产生相应的变化
只有当实例被创建时 data 中存在的属性才是响应式的，添加一个新的属性改动将不会触发任何视图的更新
注意 Object.freeze(obj) 可以阻止修改现有属性
vue实例有很多属性和方法
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true 挂载
// $watch 是一个实例方法 监听
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 vm.a 改变后调用
})
生命周期钩子
四对：beforeCreate、created、
beforeMount 、mounted
beforeUpdate、 updated
beforeDestory、destoryed
模板语法
插值
1.文本{{message}} v-once 一次性插值
2.原始HTML
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
span的内容将会被替换成属性值rawHtml
3.特性，Mustache 不能用在HTML特性上，用v-bind来绑定
4.支持js表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
只能包含单个表达式，下面两种不会生效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
指令 v-
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
缩写
v-bind ：
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on @
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
计算属性 computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
模板内表达式获取翻转字符串
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
如果需要多次使用到这个翻转字符串，就会显得很麻烦
所以计算属性computed 应运而生
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
message:'hello'
},
computed:{
//计算属性的getter,返回相应的值
reversedMessage: function(){
return this.message.split('').reverse().join('')
}
}
})
同样的效果也可以通过在methods里面设置一个函数来实现
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
效果完全相同，但是又有什么不一样的地方呢？？
计算属性是基于他们的依赖进行缓存的，只有当依赖改变时他们才会重新求值，只要message不改变，多次访问reverseMessage会立即返回之前计算结果。而每当触发重新渲染时，调用方法将总会再执行函数
计算属性 computed和侦听属性watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性
与其滥用侦听属性，不如好好利用计算属性
<div id="demo">{{fullName}}</div>
var vm1 = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
这里就运用了侦听器属性watch来侦听firstName和lastName，这两个如果有变化立刻处理重新渲染页面，但是我们发现，监听的函数很相似，若是有多个变量，那么侦听器将会显得十分冗杂，看看运用computed效果如何？
<div id="demo">{{fullName1}}</div>
computed:{
fullName1: function(){
return this.firstName + '' + this.lastName
}
}
效果很不错，因此尽量用computed属性
添加set
var vm1 = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
computed: {
fullName1: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
console.log('我被调用了')
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
这个时候修改fullname firstname, lastname 也会相应更新
侦听器 watch 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
