Vue - 实例工程

2018-01-31 本文已影响6人廖马儿

官网文档：
http://cn.vuejs.org/guide/instance.html

课程大纲：
构造器 Constructor
属性与方法 Properties_and_Methods
实例生命周期 Instance_Lifecycle

构造器
每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例（root Vue instance）：

// 记住 new Vue() 就是根实例,这就是规则
var vm = new Vue({
  // 选项
})

一个Vue实例其实正是一个MVVM模式中所描述的ViewModel, 因此在文档中经常会使用vm这个变量。

构造器与实例：

构造器（Constructor）：
是用来设定对象的property或者呼叫method，以让未来物件能够正确运作。
实例（Instance）：
是构造器new 以后的物件。

构造器，一般就是一个构造函数，用于创建实例对象。比如一个类的构造函数，用于创建对象。

在实例化Vue对象时候，需要传入一个选项对象，它可以包含数据，模板，挂载元素，方法，生命周期钩子等选项。全部的选项可以在API文档中查看。

可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器。

var MyComponent = Vue.extend({
  // 扩展选项
})

所有的MyComponent实例都可以将预定义的扩展选项被创建，

var my_component_instance = new MyComponent()

构造器扩展
Vue.extend()

Vue.extend({
  template: '<div>vue组件实例</div>'
})

Vue实例与 Vue组件的关系

目前只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
还有一些，比如设计目的，Vue是设计与App的启动，而组件是Vue实例的扩展。

Vue实例会代替其data对象里面所有的属性

var data = {a : 1}
var vm = new Vue({
  el: '#app',
  data: data
})

vm.a === data.a === vm.$data.a

注意：只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

Vue实例的实例属性与方法

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

var data = {a : 1}
var vm = new Vue({
  el: '#app',
  data: data
})

vm.$el === document.getElementById('app')  // 这里不是jQuery不是`#app`哈
vm.$data === data

$watch()是一个实例方法，监听着 vue data的变化，一旦有变化，都会启动

vm.$watch()

eg：

var data = {a : 1}
var vm = new Vue({
  el: '#app',
  data: data
})

vm.$watch('a', function (new_value, old_value) {
  console.log('old:'+old_value + ' new:'+new_value)  // 当a有改变，就会在console中打印。
})

实例的生命周期

Vue实例在创建时候有一些列初始化步骤，比如：它需要建立数据观察，编译模板，创建必要的数据绑定。
在此过程中，它也将调用一些生命周期钩子，给自己定义逻辑提供运行机会。

例如：

var vm = new Vue({
  el: '#app',
  data: {
    a:1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
})

vue实例在创建完成之后，那么就会执行created方法。

Vue实例的生命周期：

图片.png

注意：这个图片是vue.js1.0的，ready都被换为了mounted在vue2.0中。
红色框住的是生命周期函数。

经验

示例：
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuejs-test01</title>

    <link href="./src/assets/styles/style.css" type="text/css" rel="stylesheet"  >
  </head>
  <body>

    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

App.vue:

<template>
  <div id="app">
    <!-- 图片 -->
    <div id="bag">{{ helth }}</div>

    <!-- 进度情况 -->
    <div id="bag-helth">
      <div :style="{ width:helth + '%' }"></div>
    </div>

    <!-- 控制按钮 -->
    <div id="control">
      <button @click="punch" v-show="!ended">click</button>
      <button @click="restart">restart</button>
    </div>
  </div>
</template>

注意：index.html和App.vue中都有<div id="app">。他们是重复的。

index.html 中需要有<script src="/dist/build.js"></script>，不能缺少：
并且npm run dev才能显示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuejs-test01</title>

    <link href="./src/assets/styles/style.css" type="text/css" rel="stylesheet"  >
  </head>
  <body>

    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

2.App.vue 在项目中也是组件，不直接是Vue实例：
所以 data 应该是返回的函数：

<script>
  export default {
    data: function() {
      return {
        helth: 100,
        ended: false,
      }
    },
  ...

3.index.html和App.vue中都有<div id="app">。他们是重复的。

我们这李可以看出render函数的作用：
index.html：

<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>

main.js:

  el: '#app',
  render: h => h(App),  // 渲染DOM完成之后,将App模板渲染，覆盖掉此el的DOM节点
})

App.vue：

<template>
  <div id="app">
    <!-- 图片 -->
    <div id="bag">{{ helth }}</div>

    <!-- 进度情况 -->
    <div id="bag-helth">
      <div :style="{ width:helth + '%' }"></div>
    </div>
    
    <!-- 控制按钮 -->
    <div id="control">
      <button @click="punch" v-show="!ended">click</button>
      <button @click="restart">restart</button>
    </div>
  </div>
</template>

我们可以看到index.html和App.vue的模板的最顶层的id都是app。

Vue - 实例工程

猜你喜欢

热点阅读

Vue - 实例 工程

猜你喜欢

热点阅读

Vue - 实例工程