vue.js用法和特性详解

时间 2019-12-14

原文原文链接

前言javascript

最近用Vue.js作了一个数据查询平台，还作了一个拼图游戏，忽然深深的感到了vue的强大。html

Vue.js是一套构建用户界面(user interface)的渐进式框架。与其余重量级框架不一样的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专一于视图层，而且很容易与其余第三方库或现有项目集成。另外一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也彻底可以为复杂的单页应用程序提供有力驱动。vue

Vue.js目前已经更新到2.x，功能和语法上有必定升级和修改，本文首先介绍基础内容。java

以后的内容会陆续更新。jquery

一、新手指南

　　vue的使用很是简单，下载vue.js或vue.min.js直接导入便可使用。 git

二、vue初步入门

2.1声明式渲染

　　Vue.js 的核心是，能够采用简洁的模板语法来声明式的将数据渲染为 DOM：github

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

　　这样就会输入：Hello Vue！数组

　　咱们已经生成了第一个 Vue 应用程序！这看起来和渲染一个字符串模板很是相似，可是 Vue 在背后作了大量工做。如今数据和 DOM 已经被关联在一块儿，全部的数据和 DOM 都是响应式的。咱们如何对这一切清晰领会？只需打开你的浏览器的 JavaScript 控制台（如今，就在当前页面打开），而后设置 app.message 的值，你将看到上面的示例所渲染的 DOM 元素会相应地更新。浏览器

　　除了文本插值(text interpolation)，咱们还能够采用这样的方式绑定 DOM 元素属性：app

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停此处几秒，
    能够看到此处动态绑定的 title！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

　　鼠标悬停几秒后，就能够看到动态的提示。

　　这里咱们遇到一些新内容。你看到的 v-bind 属性被称为指令。指令带有前缀 v-，表示是由 Vue 提供的专用属性。可能你已经猜到了，它们会在渲染的 DOM 上产生专门的响应式行为。简而言之，这里该指令的做用就是：“将此元素的title 属性与 Vue 实例的 message 属性保持关联更新”。

　　若是你再次打开浏览器的 JavaScript 控制台，并输入 app2.message = '一些新的 message'，就会再次看到，绑定了title 属性的 HTML 已经进行了更新。

2.1条件与循环

　　控制切换一个元素的显示也至关简单：

<div id="app-3">
  <p v-if="seen">如今你能够看到我</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

　　继续在控制台输入 app3.seen = false，你应该会看到 span 消失。

　　这个示例代表，咱们不仅是能够将数据绑定到文本和属性，也能够将数据绑定到 DOM 结构。并且，Vue 也提供一个强大的过渡效果系统，能够在 Vue 插入/更新/删除元素时，自动使用过渡效果。

　　还有其它一些指令，每一个都具备各自不一样的特殊功能。例如，v-for 指令，可使用数组中的数据来展现一个项目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '建立激动人心的代码' }
    ]
  }
})

3 、vue实例

　　每一个 Vue 应用程序都是经过 Vue 函数建立出一个新的 Vue 实例开始的：

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

　　尽管没有彻底遵循 MVVM 模式，可是 Vue 的设计仍然受到了它的启发。做为约定，一般咱们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。

3.1data 和 methods

　　在建立 Vue 实例时，会将全部在 data 对象中找到的属性，都添加到 Vue 的响应式系统中。每当这些属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
  data: data
})
// 这里引用了同一个对象！
vm.a === data.a // => true
// 设置实例上的属性，
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

　　每当 data 对象发生变化，都会触发视图从新渲染。值得注意的是，若是实例已经建立，那么只有那些 data 中的本来就已经存在的属性，才是响应式的。也就是说，若是在实例建立以后，添加一个新的属性，例如：

vm.b = 'hi'

　　而后，修改 b 不会触发任何视图更新。若是你已经提早知道，以后将会用到一个开始是空的或不存在的属性，你就须要预先设置一些初始值。例如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

　　除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具备前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：

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 (newValue, oldValue) {
  // 此回调函数将在 `vm.a` 改变后调用
})

3.2vue实例的声明周期

　　vue实例的声明周期是一个很重要的概念，理解以后能够经过它实现不少功能。

　　看下这段代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="container">个人声明周期，你们看吧！</div>
        
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">

        //如下代码时显示vm整个生命周期的流程
        var vm = new Vue({
            el: "#container",
            data: {
                test : 'hello world'
            },
            beforeCreate: function(){
                console.log(this);
                showData('建立vue实例前',this);
            },
            created: function(){
                showData('建立vue实例后',this);
            },
            beforeMount:function(){
                showData('挂载到dom前',this);
            },
            mounted: function(){
                showData('挂载到dom后',this);
            },
            beforeUpdate:function(){
                showData('数据变化更新前',this);
            },
            updated:function(){
                showData('数据变化更新后',this);
            },
            beforeDestroy:function(){
                vm.test ="3333";
                showData('vue实例销毁前',this);
            },
            destroyed:function(){
                showData('vue实例销毁后',this);
            }
        
        });
        function realDom(){
            console.log('真实dom结构：' + document.getElementById('container').innerHTML);
        }
        function showData(process,obj){
            console.log(process);
            console.log('data 数据：' + obj.test)
            console.log('挂载的对象：')
            console.log(obj.$el)
            realDom();
            console.log('------------------')
            console.log('------------------')
        }
        
    </script>
</html>

　看一下效果图

　　经过控制台的打印效果能够看出来，实例化 vue 对象大体分为建立vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每一个阶段都有对应的钩子，咱们能够经过对这些钩子进行操做，达成一些功能。虽然初学者用不太上，可是提早了解一下仍是好的，到时候碰到实际功能要能想获得生命周期的钩子。

结尾

　今天就先简单介绍一下，以后会陆续更新接下来的内容。

　下一期会为你们介绍一下我用vue作的拼图游戏和一个数据操做平台，但愿你们能关注一下。