学习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 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 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
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python爬虫的工作原理
2017/03/05 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python 模拟登陆github的示例
2020/12/04 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
办公室副主任职责范本
2014/03/08 职场文书
销售合作意向书范本
2015/05/08 职场文书
2016新年感言
2015/08/03 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript