Vue.js学习指南

Posted 2021-05-01 一Li小麦

本教程资料来自《Vue.js权威指南》，View.js官方中文文档，经笔者实际情况改写。

第一章 Vue.js

名词解释

MVC：指的就是模型（Model）-控制（Controller）-视图（View），用户操作控制器操作，通过模型协调，并通过视图反映出来。基本联系是单向的。

MVP：指的就是模型（Model）-控制（Presenter）-视图（View），主要程序逻辑在Presenter中展示。联系是双向的。

MVVM：代表框架就是Vue.js，Angular.js。模型（Model）-视图模型（ViewModel）-视图（View）。View的变化会更新到ViewModel，反之ViewModel的变化也影响View。

Vue.js

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

相对于同为MVVM框架的Angular.js，Vue的体积更小，学习成本更低。相对于Facebook开发的React.js，Vue不依赖虚拟DOM，而是DOM模板。

安装使用

和常用的js库一样，可以直接引入：

<script src="..js/vue.js"></script>

入门实例

hello Vue！

先看最简单的案例

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

在代码中写入：

    var app=new Vue({
      el:'#app',
      data:{
        message:'你好，Vue！'
      }
    });

那么就在网页中打出了相关字样。

不仅是html文本内容可以渲染，元素的的属性也可以渲染：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！  </span></div>

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

那么Vue绑定了data的信息，当鼠标悬停在文字上时。提示页面加载的时间。

el属性定义这个Vue实例的作用范围（id），data则存放这个实例的变量

条件与循环

• if语句

<div id="app">
  <div v-if="seen">当seen为true时，你才能看到我</div></div>

js

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

• for-in循环

让我们变得更加复杂一点：

<div id="nav">
    <ul>
      <p><strong>9月阅读计划</strong></p>
      <li v-for="tab in tabs">
        {{tab.text}}      </li>
    </ul>
  </div>

js：

var app=new Vue({
      el:'#nav',
      data:{
        tabs:[
          {text:'Vue.js权威指南'},
          {text:'单页Web应用：javascript从前端到后端'},
          {text:'微信小程序开发实战'}
        ]
      }
    });

效果：

很简单吧！

用户操作的监听（v-on）

基本操作是v-on:事件名='你定义的函数'

<div id="app">
    <p>{{message}}</p>
    <button type="button" v-on:click="handleClick">点击次数</button>
  </div>

js中就要定义这个handleClick方法。

之前已经知道了el/data属性，现在再来看看新的methods属性，可以认为是这个属性的方法（函数）库。

    var app=new Vue({
      el:'#app',
      data:{
        message:0,
      },
      methods:{
        handleClick:function(){          this.message+=1;
        }
      }
    });

真是越用越简单。

双向数据绑定

回顾之前出现在各个案例中html标签的v-xxx，其实都是指令。双向绑定也只需要一个指令即可完成——v-model。

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

js

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

那么所谓的数据绑定也就是这么回事

组件化的应用基础

就如同PS常说的图层编组一样，Vue.js许多复杂的组件构成了一个大型Web应用。作为Vue.js的核心理念，组件的目标是提高代码的复用性。

可以认为组件就是定义好行为的viewModel类。最主要的选项为：

• 模板（template）——声明数据，搭建展现给用户界面的DOM结构

• 初始数据（data）——组件的初始数据状态，一般是私有的。

• 接受外部的参数（props）——和React.js一样，Vue通过props形式的参数实现数据的流动和共享。这种流动也通常是自上而下的。

• 方法（method）——对数据的改动主要是通过组件内的方法库进行。

• 生命周期钩子函数（lifecycle hooks）——根据组件生命周期定义不同的方法。

注册

注册组件的格式是：

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'})

第一个参数是组件名字，允许你在html中以自定义标签的方式使用——<todo-item></todo-item>。

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item></ol>

第二个参数是组件的构造函数，可以是Function，也可以是Object。在这个案例中，就是一个模板。

属性

现在给这个组件加上一个叫做todo的属性（props），有了属性，就可以通过绑定的方法，把app内容添加到组件的属性中：

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'})var app = new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})

html结构如下

<div id="app">
    <ol>
      <!-- 创建一个 todo-item 组件的实例 -->
      <todo-item        v-for="item in groceryList"        v-bind:todo="item"        v-bind:key="item.id"      ></todo-item>
    </ol>
  </div>

那就打出了有序列表的菜单。

最关节也最令人费解的是v-bind:todo="item"。可以这么认为：app通过todo这个props把data数据传到了渲染层。

---

第二章 Vue的实例分析

首先要知道上章中反复声明的app都是Vue的一个新的实例。在MVVM框架中意味着VM层。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

而所谓响应式系统，可以这样理解：

var data={a:1};var vm=new Vue({
    data:data
});

因为它们引用的都是同一个对象{a:1}，因此无论是重新给vm.a赋值，还是给data.a赋值——都会引起数据的变动。但是，只有实例被创建时，data的属性才是响应式的。如果你追加一个b属性：

vm.b='2';

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你需要设置一些初始值。比如：0,'',flase,null等等。

data是一个十分有用的属性，但只是实例的一个属性。还有许多其它有用的属性可以操作。通常它们都有前缀$。实际上你可以写作vm.$data、vm.$el等等。

生命周期

组件创建是由不同时段组成的。开发者可以通过生命周期钩子函数，在特定的时期添加自己的代码。

比如说以下组件方法允许你在VM创建，更新和销毁时打印出相应的信息：

new Vue({
    data:{
      messageCreate:'我被创建了！',
      messageUpdated:'我被更新了！',
      messageDestroyed:'我被销毁了！'
    },
    created:function(){      // `this` 指向 vm 实例中的data
      console.log(this.messageCreate)
    },
    updated:function(){      console.log(this.messageUpdated)
    },
    destroyed:function(){      console.log(this.messageDestroyed)
    }
  });

以下图示显示了一个组件的声明周期创建过程。