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 hashtable 修正版 下载
Dec 30 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
JS验证码实现代码
Sep 14 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 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模板页面中分页代码的解析
2009/02/06 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
header跳转和include包含问题详解
2012/09/08 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
原生JS实现天气预报
2020/06/16 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python和flask中返回JSON数据的方法
2018/03/26 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python如何制作缩略图
2019/04/30 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
劳动模范事迹材料
2014/01/19 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
小学庆六一主持词
2015/06/30 职场文书