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

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

基础

介绍

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

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

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

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

   
   

   

   组件

   
   

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

 <div id="app">    <ol>
      <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
 </div>

    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{todo.text}}</li>'
    }); //一个组件，子单元通过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的绑定
   对象语法：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {  isActive: true,
  hasError: false
}

渲染为：

<div class="static active"></div>

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

<div v-bind:class="[activeClass, errorClass]"></div>

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

渲染为：

<div class="active text-danger"></div>

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

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

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

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

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

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

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. 遍历对象时

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}</div>

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. 修饰符
   事件修饰符：

<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成  --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-on:scroll.passive="onScroll">...</div>

按键修饰符：

//回车键<input v-on:keyup.enter="submit">

表单输入绑定

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

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

 <input type="checkbox" id="cbox" v-model="checked"> <label for="cbox">{{checked}}</label>

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

  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">  <label for="mike">Mike</label>
  <br>  <span>Checked names: {{ checkedNames }}</span>

单选按钮：

  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>

选择框：

  <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>a</option>
      <option>b</option>
      <option>c</option>
    </select>
    <span>结果：{{selected}}</span>

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