vue.js指令和组件详细介绍及实例


Posted in Javascript onApril 06, 2017

大家好,本文给各位做一下vue.js一个最基本的概念介绍。

vue.js 指令

<div id="app">
  <div v-text="message"></div>
</div>
var app = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 }
})

这个例子我们会得到,v-text所在的div元素的内部插入了'Hello Vue!'这段字符串,那么我们为什么会产生这样一个结果呢,我们来分析一下:

vue.js指令和组件详细介绍及实例

这一步的意思是,实例化的这个Vue接管了#app元素,这里面的所有内容归我管,也就是说可以接受vue的功能指令。

vue.js指令和组件详细介绍及实例

第二步是在#app里, v-text指令被识别出来,它接受的参数是'message',vue获取到这个参数,并在自己实例化的data里查找叫message的属性,找到message的内容原来是'hello vue', 于是把'hello vue' 渲染到页面。

类似的指令,还有v-if,条件判断,v-for,列表渲染,v-on进行元素的事件绑定。等等。vue.js与页面也就是template进行交互,主要是通过这些内置指令来完成的。

vue.js 组件

开发前端页面,模块化有很多好处,比如公用的sidebar,比如公用的日期选择器。

模块化还有一个好处,就是简化开发逻辑,让项目具有扩展性。

vue.js的模块化主要体现在组件上,以组件为单位进行模块化。

我们可以在实例化vue对象之前,通过Vue.component方法来注册全局的组件,比如:

全局组件

// 告诉Vue,我需要一个组件叫做todo-item,它的配置如下,就是包含props和template那个对象
Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}) 
// 实例化一个vue对象,挂载在#app-7这个元素下,并且设定它的属性,groceryList,是一个数组
var app7 = new Vue({
 el: '#app-7',
 data: {
  groceryList: [
   { text: 'Vegetables' },
   { text: 'Cheese' },
   { text: 'Whatever else humans are supposed to eat' }
  ]
 }
})

模板:

<div id="app-7">
 <ol>
  <!--因为注册了全局的todo-item组件,所以在挂载范围内我们可以直接使用todo-item标签,来引用这个组件,-->
  <!--组件内部会被 todo-item配置表里的template替换,用来渲染。属性todo也是配置对象里规定的,可以接受的参数。-->
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
 </ol>
</div>

子组件

实际项目开发中,我们更多的使用的是子组件。

我们刚刚说的每个组件都有一个配置表,就是一个js对象,比如:

{
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}

我们把这份配置引入到实例化对象里,就可以成为这个vue对象的子组件,比如:

new Vue({
  components: {
    'component-a' : {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'
    }
  }
})

这样的话,我们和之前全局组件一样,也可以在实例化对象挂载的范围内,直接使用<component-a>标签来引用组件。

那么接下来,我们考虑一下,子组件里也可以有自己的子组件,比如:

new Vue({
  components: {
    'component-a' : {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>',
       components: {
          'component-b' : {
             template: 'i am component b',
             components: {
                ...
             }
          }
       }
    }
  }
})

那么这样下去,我们可以有无数个子组件,形成一个组件树:

vue.js指令和组件详细介绍及实例

所以,一个vue.js架构的网站,我们可以看成是一个个组件的开发,最终存在一个根节点,就是项目里唯一实例化的Vue对象,而这一个个组件,其实就是一份份配置对象,以及它们对应的template 模板(html片段)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
javascript闭包功能与用法实例分析
Apr 06 #Javascript
深入理解 JavaScript 中的 JSON
Apr 06 #Javascript
ES6中module模块化开发实例浅析
Apr 06 #Javascript
ES6中class类用法实例浅析
Apr 06 #Javascript
ES6中Proxy代理用法实例浅析
Apr 06 #Javascript
ES6中Symbol类型用法实例详解
Apr 06 #Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
You might like
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
php实现的简单检验登陆类
2015/06/18 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
python元组的概念知识点
2019/11/19 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Django-migrate报错问题解决方案
2020/04/21 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
红色故事演讲稿
2014/05/22 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
市级三好学生评语
2014/12/29 职场文书
爱心募捐通知范文
2015/04/27 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
职位证明模板
2015/06/23 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL