Vue快速入门

1.学习目标

• 会创建Vue实例，知道Vue的常见属性
• 会使用Vue的生命周期的钩子函数
• 能够使用vue常见指令
• 能够使用vue计算属性和watch监控
• 能够编写Vue组件
• 能够使用axios发送异步请求获取数据

2.什么是Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可
以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，
当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.1 Vue作者了解一下

百度百科

Vue官方，Github

2.2 了解几个概念

2.2.1 渐进式框架：

可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且
用了这些组件也不要求你的系统全部都使用该框架。

2.2.2 MVVM：

• M：即Model，模型，包括数据和一些基本操作
• V：即View，视图，页面渲染结果
• VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

• 只要Model发生了改变，View上自然就会表现出来。

• 当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

2.2.3 SPA：

单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。

3.快速入门

3.1 Vue安装

参照官方的提供Vue安装，这里使用本地引用的方式

3.2 入门案例

<div id="app">
    {{message}}
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'hello vue.js'
    }
  })
</script>

3.3 双向绑定

<div id="app">
    <h1>
        <label for="text"></label>
        <input type="text" id="text" v-model="text">
    </h1>
    <h1>
        {{text}}
    </h1>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      text: '你好，南京艾瑞'
    }
  })
</script>

3.4 事件处理

<div id="app">
    <h1>{{message}}</h1>
    <button @click="reverse">反转字符串</button>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world'
    },
    methods: {
      reverse: function () {
        this.message = this.message.split('').reverse().join('');
      }
    }
  })
</script>

点击按钮进行测试

4.Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm = new Vue({ 
	// 选项 
})

4.1 模板和元素

通过el选项将html页面和vue实例进行绑定

html模板

<div id="app">
</div>

Vue实例

<script>
  var vm = new Vue({
    el: '#app',
  })
</script>

4.2 数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：

<div id="app">
    <input type="text" v-model="message">
</div>

js：

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'vue'
    }
  })
</script>

message的变化会影响到 input 的值
input中输入的值，也会导致vm中的message发生改变

4.3 方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

<div id="app">
    <button v-on:click="_click">点我</button>
</div>
<script src="./vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    methods: {
      _click: function () {
        console.log('do something ...')
      }
    }
  })
</script>

4.4 生命钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

4.4.1 生命周期

vm.$el ：Vue 实例使用的根 DOM 元素

vm.$root ：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

4.4.2 钩子函数

<div id="app">
    <input type="text" v-model="message">
</div>
<script src="./vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: ''
    },
    beforeCreate() {
      console.log('beforeCreated')
    },
    created() {
      console.log('created')
    },
    beforeMount() {
      console.log('beforeMount')
    },
    mounted() {
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    }
  })
</script>

5.指令