Vue之初识Vue

时间 2019-11-06

标签 vue 之初繁體版

原文原文链接

前言

若是你以前已经习惯了用jQuery操做DOM，学习Vue.js时请先抛开手动操做DOM的思惟，
由于Vue.js是数据驱动的，你无需手动操做DOM。它经过一些特殊的HTML语法，将DOM和
数据绑定起来。一旦你建立了绑定，DOM将和数据保持同步，每当变动了数据，DOM也会相
应地更新。javascript

1、Vue简介

1.1 渐进式框架-Vue

vue官网说：Vue.js是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue
采用自底向上增量开发的设计。
渐进式我我的理解就是阶梯式向前。vue是轻量级的，它有不少独立的功能或库，咱们会根据
咱们的项目来选用vue的一些功能。就像咱们开发项目时若是只用到vue的声明式渲染，我就
只用vue的声明渲染，而咱们要用他的组件系统，咱们能够引用它的组件系统。
vue的渐进式表现为：html

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

1.2 Vue两个核心点

1.2.1 响应式数据绑定

当数据发生变化是，vue自动更新视图。
它的原理是利用了 Object.definedProperty 中的setter/getter 代理数据，
监控对数据的操做。（这就是为何vue不支持ie8 以及更早的ie浏览器的缘由）前端

1.2.2 组合的视图组件
ui页面映射为组件书
划分组件可维护、可重用、可测试
vue

1.3 虚拟Dom

js的运行速度已经很快了，然而大量的DOM 操做就会变得很慢，可是前端自己就是要经过
JS处理DOM来更新视图数据的。这样在更新数据后会从新渲染页面，这样就形成在没有
改变数据的地方也从新渲染了DOM节点。这样性能方面就会很受影响。java

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。
当数据发生变化时，可以智能的计算出从新渲染组件的最小代价并应用到DOM操做上。
vue就是利用了这一点。（vue 渲染组件的步骤图：）
浏览器

2、MVVM模式

咱们可能常常据说的有MVC模式和MVVN模式。
angularJS就是所谓的 MVC 模式的框架，model 、view、controller。
而vue 是 MVVM 模式的框架：数据结构

M： model （数据层，也就是指数据（前端是js））
V：view ( 也就是指DOM层或用户界面 )
VM : view-model (处理数据和界面的中间层，也就是指Vue)

3、第一个Vue程序

<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello world!'
        }
    })
</script>
</html>

1)构造器
每一个 Vue.js 应用都是经过构造函数 Vue 建立一个Vue的根实例启动：app

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

2）属性与方法
每一个 Vue 实例都会代理其 data 对象里全部的属性：框架

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。
这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：dom

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

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

<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        beforeCreate: function () {
            console.log("vue beforeCreate......")
        },
        created: function () {
            console.log("vue created......")
        },
        beforeMount: function () {
            console.log("vue beforeMount......")
        },
        mounted: function () {
            console.log("vue mounted......")
        },
        beforeUpdate: function () {
            console.log("vue beforeUpdate......")
        },
        updated: function () {
            console.log("vue updated......")
        },
        beforeDestroy: function () {
            console.log("vue beforeDestroy......")
        },
        destroyed: function () {
            console.log("vue destroyed......")
        }
    })
</script>

</html>

结果：

vue beforeCreate......
vue created......
vue beforeMount......
vue mounted......

谷歌浏览器控制台输入 app.message = 11111
vue beforeUpdate......
vue updated......

app.$destroy()
vue beforeDestroy......
vue destroyed......
undefined