学习Vue组件实例


Posted in Javascript onApril 28, 2018

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应该是入门了,后面开始,就会针对一个个小点来说明,祝你好运!

Javascript 相关文章推荐
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
纯javascript版日历控件
Nov 24 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
vue弹窗消息组件的使用方法
Sep 24 #Javascript
layui实现动态和静态分页
Apr 28 #Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 #Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 #Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 #Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 #Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 #Javascript
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
对Python 数组的切片操作详解
2018/07/02 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
简单的Python调度器Schedule详解
2019/08/30 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
聚网科技C++面试笔试题
2015/09/01 面试题
this关键字的含义
2015/04/08 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
网上签名寄语活动留言
2014/01/18 职场文书
护理专业自荐信范文
2014/02/26 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
语文复习计划
2015/01/19 职场文书
会计工作岗位职责
2015/02/03 职场文书
护士业务学习心得体会
2016/01/25 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
我的收音机情缘
2022/04/05 无线电
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android