Vue入门实战教程（二）—— Vue 实例

最新推荐文章于 2023-10-16 10:42:25 发布

厚嘴猴

最新推荐文章于 2023-10-16 10:42:25 发布

阅读量383

点赞数

分类专栏： vue学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/jcyka/article/details/105490134

版权

vue学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

此学习教程是对官方教程的解析，官方教程地址：Vue 实例—— Vue.js

上一章：Vue入门实战教程（一）——Vue介绍

二. Vue实例

1. Vue实例

1.1 Vue实例是什么

1.1.1 官方教程：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

这个Vue 函数指的就是Vue类。所以：

Vue实例: Vue类的实例

既然是来自Vue类，那就有类的属性（Vue.config)、方法（Vue.extend、Vue.set等）

既然是来自Vue类，那就有组合（组件资源components等)、继承(parent, children, extends等)

既然是实例，那就有最基本的属性（内部属性data、计算属性computed、外部属性props，也就是数据)、方法（methods，处理数据)，除了这些，还有一些以$开头的实例属性（$data、$el等)、实例方法（$watch、$set等)

既然是实例，那就有实例对象的生命周期，包括实例的创建(beforeCreate、created)、销毁（beforeDestroy、destroyed)等等。

最终，Vue 应用需要将实例中的数据渲染到视图——模板（template)中。

这些都是Vue实例的初始化参数，即选项对象。下面会说到它。

1.1.2 官方教程：Vue应用通过创建一个新的Vue实例开始（下面会讲到，这个开始的Vue实例称为根实例）

下例创建一个最简单的名为vue_app的Vue应用：

var vue_app = new Vue();

1.2 选项对象：Vue实例的初始化参数

官方教程：当创建一个 Vue 实例时，你可以传入一个选项对象。

选项对象：包括选项的对象：

var vue_app = new Vue(
    //选项对象
    { 
         // 选项
    }
)

选项：包括模板,、数据、方法、生命周期钩子等，具体参考VUE选项API。 生命周期钩子下面会说，先看一个上次教程包括模板、数据、方法选项的应用名为app-5的简单例子，以及如何在Vue实例外部访问它们：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<!-- Vue实例挂载目标的DOM元素 -->
<div id="app-5">
  <!-- 名为app5的Vue实例的模板 -->
  <!-- 模板开始 -->
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
  <!-- 模板结束-->
</div>

<script>
//名为app5的Vue实例
var app5 = new Vue({

  //模板
  //el:用作挂载目标的DOM元素， 元素的选择一般使用CSS选择器的字符串形式
  //以下的意思是，将id为app-5的DOM元素的innerHTML作为模板挂载到id为app-5的DOM元素
  el: '#app-5', 

  //数据
  data: {
    message: 'Hello Vue.js!'
  },

  //方法
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
//获取data中的数据
console.log(app5.message);

//调用methods中的方法
console.log(app5.reverseMessage());

//获取实例属性$el，需要在前面加上$
console.log(app5.$el);

//获取实例属性$data，需要在前面加上$
console.log(app5.$data);

//没有实例属性methods, 会输出undefined
console.log(app5.$methods);
</script>
</body>
</html>

1.3 Vue 应用：树型结构的Vue 实例

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

Vue 应用 = 根 Vue 实例（必需） + 组件树( Vue 实例树形集合，可选， Vue 组件本质上是Vue 实例） = 树型结构的Vue 实例

怎么理解呢？让我们来实践一下，假设我们要创建一个包含下面这种树形结构Vue 实例的Vue应用：

根实例
└─ TodoList
   ├─ TodoItem
   └─ TodoListFooter

来看下上次课程名为app-7应用的一个等价版本的例子（运行结果基本是一样的, 只是多了一个TodoListFooter组件）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app-7">
  <todo-list></todo-list>
</div>
<script>
//局部注册todoItem组件
var TodoItem = {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
}

//局部注册TodoListFooter组件
var TodoListFooter = {
  template: '<li>=======</li>'
}

//局部注册TodoListFooter组件
//导入TodoItem、TodoListFooter组件
var TodoList = {
  components: {
    'todo-item':TodoItem,
    'todo-list-footer': TodoListFooter
  },
  template: '<ol><todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>'+
  '<todo-list-footer></todo-list-footer></ol>',
  data: function () {
    return {
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    }
  }
}

//创建名为app7的Vue应用
//导入TodoList组件
var app7 = new Vue({
  el: '#app-7',
  components: {
    'todo-list':TodoList
  }
})
</script>
</body>
</html>

数据、方法、生命周期后面章节详解。

Vue实例部分学习教程结束！

全部教程地址：Vue入门实战教程 | 寒于水学习网

下一章：Vue入门实战教程（三）—— 视图层：模板及指令