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 数组学习资料收集
Apr 11 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
学校卫生检查制度
2014/02/03 职场文书
小学新学期寄语
2014/04/02 职场文书
校园文明倡议书
2014/05/16 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
承兑汇票延期证明
2015/06/23 职场文书
实践论读书笔记
2015/06/29 职场文书
领导新年致辞2016
2015/07/29 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android