VUE学习篇：（二）读一读vue官方教程

VUE实例

1.构建一个vue实例，可以传入选项对象来创建想要的行为。
2.选项对象包括：数据，DOM，生命周期钩子，资源，组合等
3.vue实例在创建的时候就会将data中的数据添加到vue的响应式系统，
当这些属性的值发生改变时，视图将会产生“响应”；
而在实例创建之后添加的属性则不会被vue实例绑定。
4.如果你知道晚些时候需要一个属性，可以提前在data中定义一个初始值。

vue的基本应用：

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

• 条件与循环：
  v-if用Boolean值控制元素的显示与隐藏
  v-for可以渲染一个列表

• 处理用户输入：
  用v-on监听一个事件监听器，通过调用vue实例中的方法，进行交互对数据进行处理

• 组件化应用构建：

  • vue里面的组件本质是一个拥有预定义选项的vue实例。
  • v-bind绑定自定义属性，可以通过props将数据从父组件传入子组件，实现子组件数据的更改

生命周期钩子

1.vue实例在不同的阶段提供了不同的钩子，钩子中的this指向vue实例。
2.不要在声明周期函数中使用箭头函数，箭头函数中this的一直指向最外层的this,会导致this的指向找不到而报错。

模板语法：

• 插值：

  • 文本：插值表达式是绑定数据最常见的方式，无论何时绑定的数据对象发生了变化，绑定的插值表达式的数据就会发生变化。

  • 原始的HTML：插值表达式不能解析原始的html语法，v-html可以。

  • javascript表达式：在模板语法中一般只绑定简单的属性键值，vue也支持JavaScript表达式，但是每个绑定都只能包含单个表达式，比如说三元表达式，简单的运算。。。

• 指令：
  指令是带有v-前缀的特殊特性，指令值预期是单个表达式（v-for除外），指令的作用是当表达式改变时，会响应式的改变dom。

  • 参数：指令后面能够接参数，在指令后面用冒号表示，v-bind可以绑定元素的属性，v-on可以绑定元素的监听事件。
  • 动态参数：从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

//[]中的值会被进行动态求值，如果attribute的值是href，那么就想当与绑定的是属性href与属性值url。

<a v-bind:[attributeName]="url"> ... </a>


<a v-on:[eventName]="doSomething"> ... </a>

- 动态参数的值的约束：预期会求值出一个字符串，异常情况下这个字符串的值是null，这个值可以显性的用于解除绑定，其他类型的值将触发一个警告。
- 动态参数语法约束：某些字符例如空格和引号在html特性名中是无效的，所有应该避免空格和引号的使用，或者复杂的表达式用计算属性替代；在dom使用模板的时候也应该避开大写，浏览器在解析时会将大写全部强制转换成小写；        

• 修饰符：
  修饰符是 .指名的特殊后缀，用于指定一个指令以特殊想方式绑定。
  例如：
  • .prevent 告诉v-on对于触发的事件调用event.preventDefault()；

计算属性：

模板中的字符串表达式很方便，但是放入太多逻辑会让模板过重难以维护，所以对于复杂逻辑应该使用计算属性。

<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('')
    }
  }
})

• 可以像绑定普通属性那样绑定计算属性，只要计算属性的依赖项发生变化，所有绑定依赖项的计算属性都会发生变化。

• 计算属性VS方法：

  • 计算属性：计算属性是基于它们的响应式依赖进行缓存的，只有依赖项发生改变时，才会重新计算。
  • 方法：每一次渲染都会重新调用，

• 计算属性VS侦听属性：

  • 侦听属性watch，会实时监听数据的变化，特别是一些数据需要根据别的数据的变化而变化时，要避免侦听属性的滥用
  • 计算属性：默认情况只有getter，必要的时候也可以设置setter。

• 侦听器：

  • 当需要根据数据的变化执行异步或开销较大的操作时，这个方法是最好的，因为计算算属性支撑不了那么复杂的操作。
  • 除了watch选项，vue也提供了$watch方法

class与Style的绑定

1.绑定HTMl Class

• 对象语法：

  • v-bind：class可以绑定一个对象，这个class对象可以与普通的class对象共存
  • 可以绑定对象的属性值为Boolean值，控制切换class
  • 也可以绑定一个计算属性

• 数组语法：

  • 可以传给一个数组，作为对象列表
  • 数组中动态切换可以使用三元表达式
  • 数组中也可以使用对象语法

• 在组件上使用：
  在一个自定义组件上使用class属性时，这些类将被添加到组件的根元素上，组件原有的类不会被覆盖。

2.绑定内联样式

• 对象语法

  • v-bind：Style的对象语法非常直观，看着像css，其实是一个JavaScript对象，css属性名可以用驼峰命名法或者用短横线连接。
  • 或者直接绑定一个样式对象，这样结构更加清晰

• 数组语法

  • v-bind:style的数组语法可以将多个样式对象应用到同一个元素上。

• 自动添加前缀

  • 需要根据浏览器添加前缀的样式属性，vue会自动检测添加。

• 多重值

  • 2.3.0 起，可以为style绑定的属性提供一个包含多个值的数组，常用于提供多个值的数组，一般用于解决浏览器的兼容，一般只会取浏览器能识别的最后一个属性值。

条件渲染：

• v-if
  • 一般用于条件性的渲染一段内容，只有v-if的值为true时才会渲染
  • 也可以用v-else添加一个else块
  • v-else-if，v-else 只有紧跟在v-if代码块之后才能被识别
  • v-if一般作用于元素上，如果是要条件性的渲染多个元素，可以将template作为不可见的包裹元素，作用于包裹标签上，渲染的时候将不会渲染。
  • 用key管理可复用的元素：vue的高效渲染就是避免重复渲染元素，做到高效，添加可以表明代码的块的独立性。

2.v-show
v-show是条件性的展示元素，元素始终会被渲染并保存在DOM中，v-show只是切换元素的CSS属性

• v-show不支持template模板，也不支持v-else

3.v-if VS v-show

• v-if是真正的条件渲染，他会确保切换时组件块中的监听和子组件都被真正销毁和重建

• v-if也是惰性的，只有在条件第一次为真时才会真正的渲染

• v-show不管条件真假，第一次渲染的时候都会渲染，只是基于CSS样式切换

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

4. v-if 与v-for
   不建议一起使用，v-for比v-if的优先级更高

列表渲染

1.渲染数组：

• 语法：v-for：“item in items”,v-for块中对父级作用域属性有完全访问权限
• 支持索引作为第二个可选参数
• 也可以用v-for："item of items"替代上面的遍历语法

2.渲染对象：

• v-for：“item in itemsObj”，对象也可以通过属性来迭代

• 也可以提供第二个参数作为键名

• 第三个可选参数为索引

• 在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

• 用v-for遍历时，应该给每个选项指定一个key，但这个key并不是v-for独有的。

3.数组更新检测：
vue包含一组观察数组的变异方法–就是会改变原始数组的一些方法：
push（）；
pop（）；
shift（）；
unshift()；
splice（）;
sort();
reverse();

4.替换数组：
有变异方法就有非变异方法，可以用非变异方法返回的新数组，替换原来的数组。
concat（）;
filter（）;
slice（）;

5.数组注意事项：
由于vue的限制，JavaScript不能检测以下数组的变动：

• 利用数组的索引设置一个项时，可以用vm.set()或者是vm.$set();或者vm.items.splice(indexOfItem, 1, newValue)
• 直接设置数组的长度时，可以使用vm.items.splice（newLength）;

6.对象检测注意事项：

• 由于JavaScript的限制，vue不能检测对象属性的添加或删除
• 对于已经创建的实例，vue不能不能动态添加根级别的响应式属性，但是可以使用vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性，也可以使用vm.$set（）方法，它只是vue.set()方法的别名。
• 如果需要为对象添加多个属性，可以创建一个新对象，vm.obj=Object.assign({}, vm.obj, newObj);

7.显示过滤/排序结果:

• 有时候需要显示过滤或排序副本，不实际改变或重置原始数据。这时可以创建返回过滤或排序数组的计算属性。
• 如果在v-for中，计算属性不适应，可以创建一个过滤的方法

8.v-for也可以作用于template上渲染多个元素。

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

9.组件与v-for

• 在自定义组件里，你可以像任何普通元素一样用 v-for
• 在组件使用v-for必须有key
• 任何数据都不能被自动的传入组件里面，因为组件有独立的作用域，为了把迭代数据传入组件中需要使用props，[color=#f3423d]不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。[/color]

事件处理：

1.v-on监听DOM事件，并用JavaScript做事件处理
2.对于复杂的逻辑处理，v-on后面可以直接绑定一个方法，方法在methods选项中定义：Greet，greet为方法名
3.也可在内联处理器中直接直接调用方法：Say hi
4.有时也需要在内联语句处理器中访问原始的 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)
  }
}

4.事件修饰符：
事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是很常见的需求，vue提供了事件修饰符来更便捷的方法来做处理。

修饰符	作用
.stop	阻止事件继续传播，即阻止事件冒泡
.prevent	阻止自身默认行为
.capture	即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self	只当在 event.target 是当前元素自身时触发处理函数

以上事件只对原生事件有效
.once —事件只触发一次，可以用于自定义组件

5.按键修饰符
6.按键码
7.系统修饰符
8.鼠标按钮修饰符