VUE入门实践（2）

一、MVVM模式

1.一、MVC模式的意思是，软件能够分红三个部分。各部分之间的通讯方式以下。

• View 传送指令到Controller
• Controller完成业务逻辑以后，改变Model状态
• Model将新的数据发送到View，展现给用户
• 全部通讯都是单向的

1.二、MVVM

• MVVM采用双向绑定，视图层（View）的变更，自动反映在ViewModel，反之亦然。Angular和Vue，React采用这种方式。
• MVVM模式中，一个ViewModel和一个View匹配，彻底和View绑定，全部View中的修改变化，都会更新到ViewModel中，同时VewModel的任何变化都会同步到View上显示。之因此自动同步是ViewModel中的属性都实现了observable这样的接口，也就是说当使用属性的set方法，会同时触发属性修改的事件，使绑定的UI自动刷新。

二、Hello Word

打开HelloWorld.vue,删除多余的内容，写一个最简单的文本插值和数据绑定，改变input的内容，下面也跟着一块儿改变

<template>
  <div class="hello">
    <input v-model="msg"/>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
input {
  font-size: 20px;
}
</style>


复制代码

运行项目，打开首页

3.生命周期

每一个Vue实例在被建立以前都要通过一系列的初始化过程。例如，实例须要配置数据观测(data observer)、编译模版、挂载实例到DOM，而后在数据变化时更新DOM 。在这个过程当中，实例也会调用一些生命周期钩子 ，这就给咱们提供了执行自定义逻辑的机会。

它能够总共分为8个阶段：

• 1.beforeCreate:在实例初始化以后，数据观测(data observer) 和event/watcher 事件配置以前被调用。

• 2.created:实例已经建立完成以后被调用。在这一步，实例已完成如下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

• 3.beforeMount:在挂载开始以前被调用：相关的render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

• 4.mounted:el 被新建立的vm.$el替换，并挂载到实例上去以后调用该钩子。若是root 实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。该钩子在服务器端渲染期间不被调用。

• 5.beforeUpdate:数据更新时调用，发生在虚拟DOM 从新渲染和打补丁以前。你能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。

• 6.updated:因为数据更改致使的虚拟DOM 从新渲染和打补丁，在这以后会调用该钩子。当这个钩子被调用时，组件DOM 已经更新，因此你如今能够执行依赖于DOM 的操做。然而在大多数状况下，你应该避免在此期间更改状态。若是要相应状态改变，一般最好使用计算属性或watcher取而代之。该钩子在服务器端渲染期间不被调用。

• 7.beforeDestroy:实例销毁以前调用。在这一步，实例仍然彻底可用。该钩子在服务器端渲染期间不被调用。

• 8.destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

四、VUE组件

组件（Component）是 Vue.js 最强大的功能之一。

组件能够扩展 HTML 元素，封装可重用的代码。

组件系统让咱们能够用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面均可以抽象为一个组件树：

vuejs组件的重要选项：

data: function () {
  return {
    count: 0
  }
}
复制代码

• data：vue的全部数据都是放在data里面的，data 必须是一个函数，这样的好处就是每一个实例能够维护一份被返回对象的独立的拷贝，若是 data 是一个对象则会影响到其余实例

• methods：就是本身定义的一下方法

• watch：监听属性，若是对应一个对象，键是观察表达式，值是对应回调，值也能够是方法名，或者是对象，包含选项

• props：父组件经过 props 向下传递数据给子组件；子组件经过 events 给父组件发送消息

• created：html加载完成以前执行，执行顺序：父组件-子组件

• mounted：html加载完成后执行，执行顺序：子组件-父组件

• computed：计算属性容许咱们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在须要时更新。

• methods VS computed：虽然这两种方式输出的结果是相同的，可是性能将遭受毁灭性的打击。使用这种方法totalMarks()方法在每次页面渲染时都被执行一次（例如，使用每个change）。若是咱们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在咱们这个示例中，那就是results）。经过这样作，Vue只有在依赖变化时才能够计算值。不然，将返回之前缓存的值。这也意味着只要results尚未发生改变，屡次访问totalMark计算属性会当即返回以前的计算结果，而没必要再次执行函数。上面两个示例也说明，在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

简单展现一下props的用法：

父组件：

<template>
  <div class="hello">
    <ul>
      <child v-for="(item,index) in list" :key="index" v-bind:item="item"></child>
    </ul>
  </div>
</template>

<script>
import child from './Child'
export default {
  name: 'HelloWorld',
  components: { child },
  data: () => {
    return {
      list: [123, 456, 789]
    }
  }
}
</script>
复制代码

子组件：

<template>
    <li>{{ item }}</li>
</template>

<script>
export default {
  props: ['item']
}
</script>
复制代码

dom结构

五、VUE经常使用指令

5.一、v-text

v-text主要用来更新textContent，能够等同于JS的text属性。

<span v-text="msg"></span>
复制代码

5.二、v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，能够用v-html指令。它等同于JS的innerHtml属性。

export default {
  name: 'HelloWorld',
  data: () => {
    return {
      html: '<p style="color: red;">测试内容</p>'
    }
  }
}


复制代码

<span v-html="html"></span>
复制代码

5.三、v-if

v-if能够实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

<span v-if="flag">标识为true</span>
复制代码

5.四、v-else

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，不然不起做用。

<span v-if="flag">标识为true</span>
<span v-else>标识为false</span>
复制代码

5.五、v-else-if

v-else-if充当v-if的else-if块，能够链式的使用屡次。能够更加方便的实现switch语句。

<span v-if="flag === 1">标识为1</span>
<span v-else-if="flag === 2">标识为2</span>
<span v-else-if="flag === 3">标识为3</span>
<span v-else>标识为false</span>
复制代码

5.六、v-show

用于根据条件展现元素。和v-if不一样的是，若是v-if的值是false，则这个元素被销毁，不在dom中。可是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

<span v-show="flag">标识为true</span>
复制代码

<span v-show="!flag">标识为true</span>
复制代码

5.七、v-for

v-for指令根据遍历数组来进行渲染

export default {
  name: 'HelloWorld',
  data: () => {
    return {
      list: [123, 456, 789]
    }
  }
}
复制代码

<p v-for="(item, index) in list" :key="index">{{item}}</p>
复制代码

index是一个可选参数，表示当前项的索引

5.八、v-model

用于在表单上建立双向数据绑定。

v-model会忽略全部表单元素的value、checked、selected特性的初始值。由于它选择Vue实例数据作为具体的值。

<input v-model="msg"/>
<h1>{{ msg }}</h1>
复制代码

改变input输入框的内容h1标签的内容也会跟着改变

修饰符：

.lazy：默认状况下，v-model同步输入框的值和数据。能够经过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="msg">
复制代码

.number自动将用户的输入值转化为数值类型

<input v-model.number="msg">
复制代码

.trim自动过滤用户输入的首尾空格

<input v-model.trim="msg">
复制代码

5.九、v-on

v-on主要用来监听dom事件，以便执行一些代码块。表达式能够是一个方法名。 简写为：【 @ 】

v-on:click="test"
复制代码

等效于

@click="test"
复制代码

事件修饰符

.stop: 阻止事件继续传播

.prevent: 事件再也不重载页面

.capture 使用事件捕获模式,即元素自身触发的事件先在此到处理，而后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为