本文共 2787 字，大约阅读时间需要 9 分钟。

1. Vue实例对象

• Vue()是一个构造函数，用new Vue(构造参数)得到的就是一个实例对象，Vue实例对象是Vue.js中最基本的单元。构造参数是一个对象，构造参数的属性即为参数选项，常见的参数选项有el、data、template、components等。
•  在项目中， 在main.js中通过创建最外层的Vue实例对象来实现根结点、根组件的功能。

参数选项：

• el：即element，表示当前Vue实例对象的装载位置，装载在哪个元素上，也称为挂载点。装载的含义是将template中的内容替换挂载点元素所对应的全部HTML代码。
• template：表示装载的内容，HTML代码、包含其他组件的HTML片段，称为模板。
• data：数据，是一个对象，表示该实例对象会用到的数据，其中的属性和属性值（字段）会被代理到当前实例对象。比如data中有一个属性为fruit，属性值为banana，那么可以在实例对象中直接用属性访问符号（·）来访问。也可以直接在template对应的HTML片段中引用相应字段，比如用{
  {变量名}}来实现数据渲染。例：

var my = new Vue({  el:"#app",  template: "
   
    {
  {fruit}}}
   
",  data:{    fruit:"banana"  }});my.fruit;//"banana"

1.1 完整测试代码

新建index.html文件，其中采用<script>标签引用CDN的形式来引入Vue

    
               
   
        
    sssssssss    
   
    

渲染出来的页面可以发现整个div#app被替换成了template中的HTML片段

也可以用class属性来获取挂载点，即el属性为.outerDiv，渲染结果与采用id来获取挂载点，即el属性为#app时的渲染结果相同。

var my = new Vue({            el:".outerDiv",            template: "
{
  {fruit}}
",            data:{                fruit:"banana"            }        });

1.2 Vue实例对象的生存周期

2.Vue组件

2.1 测试代码

      本节使用vue-cli生成一个项目Demo4，主要在main.js、index.html中操作>。首先清空main.js代码，接下来一步步写入代码。本项目已经安装了插件（cnpm install），因此启动时直接cnpm run dev（开发环境）即可。

import Vue from "vue"  ES6语法，引入vue这个库并赋值给Vue这个变量，类似于require()，这样Vue就引入到main.js的全局中。

----------index.html----------------

------------main.js--------------

import Vue from 'vue'new Vue({  el:"#app",  template:"
hello world{
  {word}}
",  data:{    word:" nihao"  }});

2.2 组件的注册和引入

（1）组件树

（2）组件的注册和引入

（2.1）全局注册：Vue.component(id,definition)

       全局注册的组件为全局组件。

        这里的id为组件名，也就是在index.html中使用标签所引用的名字，definition相当于new Vue(构造参数)，只不过可以省略new Vue()，直接将构造参数填入即可，子组件一般就不需要挂载点el了，但是一般需要template、data。

        参数选项data有两种方式，一种是data:{}，另一种是data:function(){return {};}，后者不会出现单一引用问题（比如index.html中引入了多个<my-header>标签，那么这些标签所引用的data中的数据不会共享，不会发生影响彼此的情况），建议采用后者。

---------main.js------------

import Vue from 'vue'Vue.component("my-header",{  template:"
{
  {word}} This is my header
",  data:function () {    return {      word:"hello word"    }  }});new Vue({  el:"#app"});

----------index.html------------（仅显示body）

结果

（2.2）局部注册

          每个组件都是一个Vue实例对象，其中都有components参数选项，可以使用这个参数选项对当前实例对象（组件）注册其子组件。子组件又可以注册其子组件，进而形成了组件树。这里components是一个对象，其中的字段值我们一般抽象出来一个变量，比如myHeader和myHeaderChild，这些变量的值其实就是子组件（实例对象），只不过我们可以省略new Vue()，直接使用构造参数来表示。

------------main.js--------------

import Vue from 'vue'let myHeaderChild = {  template:"
{
  {fruit}} 
",  data:function () {    return {      fruit:"Apple"    }  }};let myHeader = {  template:"
{
  {word}} This is my header 
    
",  data:function () {    return {      word:"hello word"    }  },  components: {    "my-header-child":myHeaderChild  }};new Vue({  el:"#app",  components:{    "my-header":myHeader  }});

-------------index.html--------------

结果

转载地址：https://blog.csdn.net/qq_21428081/article/details/88988010 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！