学习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 相关文章推荐
JS获取地址栏参数的小例子
Aug 23 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
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
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
python爬虫之百度API调用方法
2017/06/11 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python爬虫实例详解
2018/06/19 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
详解Python中的Lock和Rlock
2021/01/26 Python
创立科技Java面试题
2015/11/29 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
活动总结模板大全
2015/05/11 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL