vue学习笔记

vue学习笔记

安装

Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
#之后访问localhost:8080即可
$ npm run dev

介绍

vue.js是什么？

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

除了文本插值，我们还可以像这样来绑定元素特性：

  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。

条件与渲染

控制切换一个元素是否显示也相当简单：

  
现在你看到我了

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

  

    

      {{ todo.text }}
    
  

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

  
{{ message }}
  逆转消息

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

  
{{ message }}
  

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

vue实例

创建一个vue实例

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

除了 data 属性，Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
//获取整个data属性值（引用）
vm.$data === data // => true
//获取绑定的元素实例
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

实例生命周期

created钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同场景下调用，如mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。

注意：在vue实例里不要在箭头函数中使用this访问实例，因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例。

模板语法

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

Message: {{ msg }}

通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

这个将不会改变: {{ msg }}

特性

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用v-bind指令：

在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，在这个例子中：

Button

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 元素中。

使用JavaScript表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

指令

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

...

另一个例子是 v-on 指令，它用于监听 DOM 事件：

...

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

...

计算属性和观察者

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

  {{ message.split('').reverse().join('') }}

对于任何复杂逻辑，你都应当使用计算属性。

基础例子

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性缓存 vs 方法

我们可以通过在表达式中调用方法来达到同样（计算属性）的效果，但是，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性的setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听属性

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

  

    Ask a yes/no question:
    
  
  
{{ answer }}

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    getAnswer: 
      function () {    
      }
})

Class与Style绑定

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定HTML Class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

用在组件上

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。例如，如果你声明了这个组件：

Vue.component('my-component', {
  template: '
Hi
'
})

然后在使用它的时候添加一些 class：

HTML 将被渲染为:

Hi

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

直接绑定到一个样式对象通常更好，这会让模板更清晰：

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

条件渲染

v-if

在 Vue 中，我们可以使用 v-if 指令条件渲染的功能：

Yes

在