欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习Vue组件实例

程序员文章站 2022-05-20 09:48:13
vue实例 项目启动过程 看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开index.html的方法访问为例来说明)? 你首先打开了index....

vue实例

项目启动过程

看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开index.html的方法访问为例来说明)?

你首先打开了index.html,里面只有一个写了一个id='root'的div,还有你引入了打包之后的代码,然后vue自己肯定运行了一下(可以认为是vue初始化)。

接着,应该是执行了entry.js(因为打包是webpack打包的,你配置的入口文件就这一个)。

entry.js干了什么,是的,创建了一个vue实例对象,然后这个对象管理的区域根据el属性知道,应该是index.html中id='root'的那个div,因此余下的事情就只有明白这个vue实例对象是如何管理这片区域的就可以了,这就是接下来的内容了。

什么是vue实例对象?

根据官方文档的说明:每个vue应用都是通过用vue函数创建一个新的vue实例开始的。

你可以简单的理解,他就是一个普普通通的对象罢了,只不过这个对象被赋予了一些特殊的功能,让我们来了解一下他吧!

【我们接下来都是在entry.js里面创建的那个vue对象上面进行实验的】

一个vue实例对象创建的方法如下:

var vm=new vue({
  //一堆配置
});

因此,接下来要说的就是一些常用的配置(不是全部,比较特殊的以后应该会说,毕竟开始就全部,我怕彼此心都太累了)。

vue实例对象基本配置

【1】el:选择器| dom结点

在我们的项目中,我们配置的是:

el:'#root'

这是一个字符串,有点类似css选择器,它会使用查找到的结点作为管理区域(当然还有别的css选择器也可以)。

除此之外,你还可以直接传递一个结点,比如现在我们修改一下代码:

el: document.getelementbyid('root')

这样也是可以了,你可以试试。

【2】render:(createelement:()=>vnode)=>vnode

上面的是es6的箭头函数写法,举个栗子:

((x,y)=>x+y)(1,2)

上面es6的写法等同于下面es5的写法:

(function(x,y){
  return x+y;
})(1,2);

简单的说就是:(x,y)=>x+y就表示一个有二个参数x和y,返回x+y的函数,因此上面的函数用es5的写法就是:

function(createelement){
  //createelement是一个函数,返回类型为vnode
  //这个函数的返回类型也应该是vnode
  return vnode;
}

备注:vnode是vue编译生成的虚拟节点,想一下jquery节点,还有node节点,是不是味道很像。

因此,我把项目中的render稍微改一下:

render: function (createelement) {
  return createelement(app);
}

是不是很清晰了,说白了,就是一个最后返回值是vnode的函数。

因此看见节点这二个字,应该可以理解页面为什么显示的是app里面的模板了吧,如何路由调整为什么配置的是.vue文件大概也有点感觉了吧。

【3】router:vuerouter

这个比较容易理解,就是知道使用的路由配置是什么,由于项目中是:

router:router

看着很奇怪,我们稍微修改一下:

//上面的import routerobj from './router';这一句要跟着修改一下
router: routerobj

基本的就到这里,就三个,别的属性因为还关联很多东西,会一点点来说明。

vue对象生命周期

官方的图我就不放了,感觉意义不大,推荐入门了以后可以去看看,因此后面的文章可能会说。

下面我们来先在entry.js里面修改一下代码,看看运行结果,下面是代码:

//根对象
var vm = new vue({
  //挂载点
  el: document.getelementbyid('root'),
  //2.使用刚刚的路由配置
  router: routerobj,
  //启动组件
  render: function (createelement) {
    return createelement(app);
  },
  //下面是vue对象的几种状态
  beforecreate: function () {
    console.debug('vue对象目前状态:beforecreate');
  },
  created: function () {
    console.debug('vue对象目前状态:created');
  },
  beforemount: function () {
    console.debug('vue对象目前状态:beforemount');
  },
  mounted: function () {
    console.debug('vue对象目前状态:mounted');
  },
  beforeupdate: function () {
    console.debug('vue对象目前状态:beforeupdate');
  },
  updated: function () {
    console.debug('vue对象目前状态:updated');
  },
  beforedestroy: function () {
    console.debug('vue对象目前状态:beforedestroy');
  },
  destroyed: function () {
    console.debug('vue对象目前状态:destroyed');
  }
});

运行一下看看控制台。

因此,就是说,vue对象从创建前到最后死亡,在各个阶段状态改变的时候,都提供了一个钩子方法,你可以注册一下,如果你希望在特定状态改变的时候干点什么的话。

到这里,基本上vue对象实例应该比较清楚了吧?看看我们的代码,应该只有那几个.vue的文件里面的东西没有说清楚了(本文就是把前面写过的代码都说清楚,后面就可以一个新知识点接着一个的来丰富项目,因为都没有疑惑了,学习起来应该不会痛苦了吧!)。

vue组件实例

说明

vue组件的定义方法不是只有我们之前写的建立.vue文件那一种,比如你还可以通过vue.component()的方法来创建,不过这些都以后吧,我们这里就只说明.vue文件这一种(不喜欢一下子说太多,而且仔细想想,不就是api吗)。

【下面都是在pagetwo.vue里面进行修改,菜单名称修改为:vue组件实例】

.vue文件的基本模板如下(下面都会是es5的写法,本人还是不太喜欢es6或者ts,原谅我,反正本质一样):

<template>
  
</template>

<script>
export default {
 //一些配置,和前面说的vue实例类似
}
</script>

<style>

</style>

三个地方,分工明确:模板 + 控制 + 样式

接下来我们说明配置中常用的选项(很多具体的就留到后面一点点品位,好吧,留的有点多):

常用配置
【1】data

先看看pagetwo.vue现在的代码:

<template>
  <section>
    <input type="text" v-model="justdoit">
    <div>
      输入的数据:{{justdoit}}
    </div>
  </section>
</template>
<script>
export default {
 //一些配置
 data() {
  return {
   justdoit: "初始化数据"
  };
 }
};
</script>
<style>

</style>

模板中的代码应该不用说了吧,前面一篇文章说的很清楚了,直接看看data。

其返回了一个键值对(还有别的写法,推荐你这样写,因为这里如果"初始化数据"这几个字是变量,这种写法形成了闭包,是安全的),在这里就是给当前组件对象是data里面添加了一个justdoit的数据,然后上面或者别的地方才可以用,他就是干了这事情。

【2】methods

接着,我们添加一下methods属性:

methods: {
  doit() {
   alert(this.justdoit);
  }
}

其实methods和data类似,只不过是用来添加的不是数据,而是方法,因此,你现在可以在模板里面添加下面代码来调用这个方法(记住,添加的全部代码必须由一个标签包裹):

<input type="button" value="doit" v-on:click="doit()">

v-on:click就是类似原生的onclick,不过因为是vue的方法,你应该用他的。

现在,你可以点击一下页面的按钮试一下,是不是很舒服。

【3】watch

这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合,比如你添加下面的代码:

watch: {
  justdoit: function(newval, oldval) {
   console.log("justdoit改变了,新值为:" + newval + ",旧值为:" + oldval);
  }
 }

如何你运行一下,打开控制台,修改输入框的值的时候,是不是控制台时刻打印了这句话。

【4】computed

这个叫做计算属性,前面一篇文章说过了,不清楚的看看pageone.vue,应该可以明白。

简单的说就是,它用到的data里面的值改变的时候,自己会重新计算。

生命周期
和vue对象一样,也有类似的生命周期钩子,你可以试试,这里就随便提一下。

总结

说到这里,vue应该是入门了,后面开始,就会针对一个个小点来说明,祝你好运!