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 相关文章推荐
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
jquery replace方法去空格
May 08 jQuery
微信小程序tabbar不显示解决办法
Jun 08 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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
ajax php 实现写入数据库
2009/09/02 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
大二学习计划书范文
2014/04/27 职场文书
求职导师推荐信范文
2015/03/27 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL