一, 创建一个 vue 实例
每个 Vue 应用都是使用 Vue 函数创建一个 Vue 实例. 所有的 Vue 组件都是一个 Vue 实例, 并且接受相同的选项对象 (一些根实例特有的选项除外).
数据和方法
当一个实例被创建后, 它向 Vue 的响应式系统加入了其 data 对象中能找到的所有属性. 当这些属性的值改变的时候, 视图也会跟着响应.
注意:
1. 值得注意的是, 只有当 Vue 实例被创建的时候的 data 对象中的存在的属性才是响应式的.
2. 如果你知道你会在晚些时候需要一个属性, 但是一开始它为空或者不存在, 那么你仅需要设置一些初始值.
3. 这里唯一的例外是使用 object.freeze(), 这会阻止修改现有的属性.
4. 当然除了数据属性, Vue 实例还暴露出了一些实例属性和方法, 它们都有前缀 $, 这样便于和用户自定义的属性区分开来.
二, 实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程, 例如, 需要设置数据监听, 编译模板, 将实例挂载到 DOM 并且在数据变化时更新 DOM. 同时在这个
过程中会运行一些叫生命周期钩子的函数. 生命周期钩子的 this 上下文指向调用它的实例
created: 用于在一个实例被创建之后执行的代码
- mounted:
- updated:
- destroyed:
三, 计算属性和侦听器
1. 计算属性
- var vm = new Vue({
- el: '#example',
- data:{
- message: 'hello'
- },
- computed:{
- //reverseMessage 是计算属性, 因为其依赖了 message 数据属性, 当 message 变化的时候, reverseMessage 也跟着改变
- reverseMessage: function(){
- return this.message.split("").reverse().join("");
- },
- //now 也是计算属性, 但是它并不是响应式依赖, 计算属性是基于它们的依赖来缓存
- now: function(){
- return Date.now();
- }
- }
- methods:{
- reverseMessage:function(){
- return this.message.split("").reverse().join("");
- }
- }
- })
2. 侦听属性
- var vm = 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.
3. 计算属性的 setter
计算属性默认只有 getter, 不过在需要的时候, 也提供一个 setter.
- computed:{
- reverseMessage: function(){
- return this.message.split("").reverse().join("");
- },
- now: function(){
- return Date.now();
- },
- fullName:{
- get: function(){
- return this.firstName + this.lastName;
- },
- set:function(newValue){
- var names = newValue.split(" ");
- this.firstName = names[0];
- this.lastName = names[names.length - 1]
- }
- }
- }
4. 侦听器
虽然计算属性在大多数情况下合适, 但也需要一个自定义的侦听器. Vue 通过 watch 选项, 提供一个更通用的方法, 来响应数据的变化.
当需要在数据变化时执行异步或开销较大的操作时, 这个方式是最有用的.
来源: http://www.bubuko.com/infodetail-2826296.html