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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
jquery实现用户打分评分特效
May 28 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 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脚本[带参数]的方法
2010/01/22 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript函数详解
2014/11/17 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Pytorch 实现权重初始化
2019/12/31 Python
python中if嵌套命令实例讲解
2021/02/25 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
人力资源专员岗位职责
2014/01/30 职场文书
英文求职信写作小建议
2014/02/16 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
商务助理求职信范文
2014/04/20 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
解析Redis Cluster原理
2021/06/21 Redis
MySQL窗口函数的具体使用
2021/11/17 MySQL
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL