Vue教程基础篇

1.v-bind、v-model、v-html它们什么时候使用以及区别
它们原本的写法以及简化后的写法
v-bind绑定，简写: v-on监听，简写@
https://blog.csdn.net/kingov/article/details/71088073
2.数据和方法
当一个vue实例被创建时，它向vue的响应式系统中加入其data对象中能找到的所有属性，当这些属性的值发生改变时，视图就会产生响应，即匹配更新为新的值，当这些数据改变时，视图会重新渲染。值得注意的是`只有当实例被创建时data中存在的属性才是响应式的。
3.生命周期钩子
4.v-once数据改变，内容不会更新
5.v-bind可以动态的绑定data中的数据，如果是父子组件那么就可以给子组件传值，如果是普通的标签，那么就会显示冒号后面的属性。
6.使用javascript表达式
对于所有数据绑定，Vue.js都提供了完全的javascript表达式支持。

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>

计算属性缓存和方法的区别

  (1)写法不同
计算属性：

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

方法：

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

  从上面代码中我们会发现，计算属性直接在双大括号中写变量名即可，并且代码写在computed中，方法是需要在变量名后面加括号，表示调用这个方法，代码写在methods中。
  (2)缓存不同
计算属性是基于它们的依赖进行缓存的，只有相关依赖改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。假设我们有一个性能开销比较大的计算属性 ，它需要遍历一个巨大的数组并做大量的计算，我们一般会采用计算属性。

计算属性的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 也会相应地被更新。

class和style绑定

  属性绑定分为两种，一种是标签自带的属性，一种是自定义属性。前者绑定的属性可以直接在标签中显示出效果，比如id、class等，后者一般用在自定义组件中，用于父子组件传值。
  在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。注意：只是针对class 和 style，如果是其他属性还是字符串，除了父子组件传值。

class绑定

  第一种是class绑定字符串。
  第二种是class绑定对象，对象的属性是class名，值为布尔值。
  第三种是class绑定数组，数组中的元素可以是字符串、三目运算、变量名、对象。
  如果在组件上写class类，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

style绑定

  v-bind:style的对象语法十分直观，看着非常像css，但其实是一个javascript对象。
第一种是style绑定对象，对象的属性是样式名，值为样式的值。
  css属性名可以用驼峰式或短横线分隔(需要用单引号括起来)来命名：

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

第二种是style绑定数组：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

注意：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。v-show 不支持 <template> 元素。

列表渲染

vue使用v-for渲染列表，列表可以是数组也可以是对象

// 数组的情况
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

// 对象的情况
<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
    }
  }
})

  从上面代码中我们可以看到如果渲染的是数组，第一个元素是值，第二个元素是下标，如果渲染的是对象，第一个元素是值，第二个元素是属性，第三个元素是下标。

数组更新检测

  数组在改变时有的情况可以触发新视图有的是不会触发。如果原始数组被改变，比如使用push()、pop()、shift()、unshift()、splice()、sort()、reverse()都会触发新视图更新，但如果使用ilter()、concat() 和 slice()这几种方法不会改变原始数组，是不会触发视图更新的。
  注意：由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
  为了解决第一类问题，你也可以使用vm.set 的方法：

vm.$set(vm.items, indexOfItem, newValue)

  为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

######## 对象更改检测注意事项
  还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

  对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
  有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

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

  你应该这样做：

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

显示过滤/排序结果

  有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。例如：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

一段取值范围的v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

结果：

1 2 3 4 5 6 7 8 9 10

v-for用于template

类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素。比如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

注意：v-for的优先级比v-if高

事件处理

监听事件

  我们一般在模版中调用方法，也可以直接在模版中写方法。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

  有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }

事件修饰符

.stop .prevent .capture .self .once .passive

<!-- 阻止单击事件继续传播 -->
(event.stopPropagation()简写)
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
(event.preventDefault()简写)
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。
注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes`对象自定义按键修饰符别名:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自动匹配按键修饰符

你也可直接将 KeyboardEvent.key暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

<input @keyup.page-down="onPageDown">

在上面的例子中，处理函数仅在 $event.key === 'PageDown' 时被调用。

系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

######### .exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

表单输入绑定

复选框

  你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
  单个复选框，绑定到布尔值：

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

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

<div id='example-3'>
  <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>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

  这个地方很特殊，checkedNames如果这个是字符串或者对象都会得到不同的结果，至于为什么，我也不清楚。

修饰符

  .lazy
  在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

  .number
  如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

  这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
  .trim
  如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

在组件上使用v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText">

等价于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

######## 解析 DOM 模板时的注意事项
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

• 字符串 (例如：template: '...')
• 单文件组件 (.vue)
• <script type="text/x-template">

总结：
1.v-model用在自定义组件上是为了解决什么问题
2.多个复选框，绑定到同一个数组