Vue文档笔记系列——基础篇

写在前面：本系列博客是我在阅读Vue官方文档的笔记，一部分借鉴了官方网站的例子，一部分是我自己所感所想和总结。本系列着重四个字：简洁，突出。希望读者们挑选阅读。如有错误，敬请指出！

介绍

1. 声明式渲染 {{}}, 双向数据绑定 v-model

2. 条件v-if, 循环 v-for

3. 处理用户输入，v-on

4. 组件化应用构建
   组件我的另一篇博客也介绍过，往往某些大型应用就是由一个个可复用，独立，小型的组件组成。

   
   

   组件

   
   

   Vue里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
   下面是一个简单的注册组件的例子：

    Vue.component('todo-item', {
      props: ['todo'],
      template: '
{{todo.text}}
'
    }); //一个组件，子单元通过prop属性连接父单元
    var app = new Vue({
      el: '#app',
      data: {        list: [
          { id: 0, text: '吃饭' },
          { id: 1, text: '学习' }
        ]
      }
    })

子单元通过 prop 接口与父单元进行了良好的解耦。

Vue实例

1. 创建实例 var vm = new Vue({})

2. el,data,methods等，数据对象data储存所有的属性数据

var vm = new Vue({
  el: '#example',
  data: {
    title: '',    list: [],
  }
})

vm.$data === data // => truevm.$el === document.getElementById('example') // => true// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) {  // 这个回调将在 `vm.a` 改变后调用})

1. 实例的生命周期钩子
   解释:Vue实例在创建的时候需要经过一系列初始化的过程，这个过程会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
   借用官网的一张图：
   

   实例的生命周期

模板语法

Vue.js用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
底层实现：Vue 将模板编译成虚拟 DOM 渲染函数。
若果不用模板语法，也可以用渲染（render）函数，使用JSX语法。

1. 插值
   文本：双大括号{{}}
   原始html:  v-html输出真正的html
   特性： v-bind
   js表达式

2. 指令
   v-xx： 值是一个单个js表达式 （v-for除外）比如v-bind:href='url' v-on:click='fn'
   作用是当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
   修饰符：用于指出一个指令应该以特殊方式绑定。
   3.缩写 v-bind用 ： ，v-on用 @

计算属性

1. computed和methods区别，计算属性是基于它的依赖来进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

2. computed和watch：还没看到，后面再补充 >_<

class和style绑定

class和内联样式是属性，都可以通过v-bind来绑定到DOM，高级的是v-bind在绑定class和style时候，结果表达式除了字符串，还可以绑定数组或对象。

1. class的绑定
   对象语法：

data: {  isActive: true,
  hasError: false
}

渲染为：

数组语法: 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。

data: {  activeClass: 'active',
  errorClass: 'text-danger'}

渲染为：

数组语法中也可以用对象语法：

与使用三元表达式据条件切换列表中的 class的用法一样。

1. style的绑定
   用法跟class的绑定差不多。个人感觉还是绑定class比较常用。

data: {  activeColor: 'red',
  fontSize: 30}

条件渲染

1. v-if  v-else-if v-else

2. v-show
   注意：v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

1. 遍历数组：v-for="item in items"

2. 遍历对象时

  {{ index }}. {{ key }}: {{ value }}

new Vue({  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

注意!! 由于js的机制，vue不能检测如下2种情况下变动的数组：
a. 当利用索引直接设置一个项时
b. 当更改数组的长度的时候，比如添加删除等。
下面用2个例子分别来解决这2种情况。
a. 利用索引更改数组的值，有2种解决办法

var vm = new Vue({  data: {    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的

// Vue.setVue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)

b. 为对象添加属性：

var vm = new Vue({  data: {    userProfile: {      name: 'Anika'
    }
  }
})

添加一个age属性，

Vue.set(vm.userProfile, 'age', 27)

或者用vm.$set 实例方法，它是全局 Vue.set 的别名

vm.$set(vm.userProfile, 'age', 27)

添加多个属性的话，用到Object.assign()

vm.userProfile = Object.assign({}, vm.userProfile, {  age: 27,  favoriteColor: 'Vue Green'})

事件处理

1. v-on 就不说了

2. 修饰符
   事件修饰符：

.........

按键修饰符：

//回车键

表单输入绑定

1. 文本，就不多说了，v-model 绑定在input,textarea上

2. 复选框
   单个复选框，绑定布尔值

  {{checked}}

多个复选框，绑定到同一数组。

    Jack
    John
    Mike
  
  Checked names: {{ checkedNames }}

单选按钮：

  
  One
  

  
  Two
  

  Picked: {{ picked }}

选择框：

  
      请选择
      a
      b
      c
    
    结果：{{selected}}

vue实例：

new Vue({  el: '#app',
  data: {
    checked: '',
    picked: '',
    selected: '',
    checkNames: [],
  }
})

1. 值绑定 想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

2. 修饰符 v-model可以绑定如下3个修饰符
   .lazy   在默认情况下，v-model 在每次 input 事件触发后将输入框的          值与数据进行同步。添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
   .trim  自动过滤用户输入的首尾空白字符
   .number 自动将用户的输入值转为数值类型

作者：从小就很瘦
链接：https://www.jianshu.com/p/26fecf46d53e